ES6 learning note 2 - build tool script

Keywords: Webpack npm hot update Asterisk

The build tool script is in the es6/tasks / directory

Installed package: ~ / ES6 $NPM install gulp gulp if gulp concat webpack webpack stream vinyl named gulp liverload gulp plumber gulp rename gulp uglify gulp util yargs -- save dev


gulp.task create task method: gulp.task('task name ', () = > {})

Or bring back the: gulp.task('task name ' (cb)=>{   })   

gulp.task task(name[, deps], fn)

The task() method is used to define tasks, to import names, to rely on task arrays and functions. gulp executes the task array first, and then calls the defined functions to control the execution of tasks smoothly.

gulp.src src(globs[, options])

The src() method enters a glob or an array of globs and returns a data stream that can be passed to the plug-in

gulp.dest dest(path[, options])

The dest() method is used to write files. The first parameter represents the directory name of the final output. Note that it does not allow us to specify the file name of the final output, only the output folder name, and it will be created automatically when the folder does not exist. watch(globs[, opts], cb) or watch(globs[, opts], tasks)

The watch() method can listen to files. It accepts a glob or an array of globs and a task array to execute callbacks

es6/tasks/util/args.js command line parameter creation: command line parameter initialization

See if the command line contains the corresponding commands in option. You can distinguish between online environment and development environment

import yargs from 'yargs';

const args = yargs;
	default:false,  //When there is no production in the command, it defaults to the development environment, or the online environment
 	describe:'min all scripts' //Unresolved

	describe:'watch all files' 


	describe:'force the creation of sourcemaps'

	describe:'server port'

.argv   //Represents parsing as a string

es6/tasks/server.js write the server build script:

import gulp from 'gulp';
import gulp from 'gulp-if';
import liveserver from 'gulp-live-server';
import args from './util/args';

	//If it is not in listening state, return the callback function
	if(! return cb();
	//If you want to create a server in listening state -- harmony means to execute the following script server/bin/www under the current command line
	var server =['--harmony','server/bin/www']);
	//Start server
	//Monitor the hot update of js and ejs in the server directory when they change['server/public/**/*.js','server/views/**/*.js'],function(file){
		//Notify server of file changes
	//Listen to files that need to be restarted. eg route changes, interface changes['server/routes/**/*.js','server/app.js'],function(){
		//Restart service


es6/tasks/css.js writing CSS build script

import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';

  // Open the file first, and then copy it to server/public. / * * / double asterisk indicates all *. css files, including nested files
  return gulp.src('app/**/*.css')
    .pipe(gulp.dest('server/public'))//This instance mainly listens for js and. ejs changes, so it doesn't heat up the update, but it usually listens for css
es6/tasks/pages.js write service build script

import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';

	return gulp.src('app/**/*.ejs')
		.pipe(gulpif(,livereload()))  //Monitor hot updates

es6/tasks/scripts.js script service

import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';  //Splicing
import webpack from 'webpack';   //Pack
import gulpWebpack from 'webpack-stream';  //gulp file stream packaging
import named from 'vinyl-named';  //Rename tag
import livereload from 'gulp-livereload'; //Thermal renewal
import plumber from 'gulp-plumber';  //Handle file information flow, can handle errors
import rename from 'gulp-rename';  //rename
import uglify from 'gulp-uglify';  //Resource compression, processing js,css compression
import {log,color} from 'gulp-util';  //Output log and color from the command line
import args from './util/args';   //Import command line parameter file

	return gulp.src(['app/js/index.js'])  //Open file first
	.pipe(plumber({      //error handling
	.pipe(named())        //File rename
	.pipe(gulpWebpack({     //Compile the file with 3 parameters
			loaders:[{       //Compiling js files with babel
	}),null,(err,stats)=>{     //Error handling for the third parameter, null for the second
		log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
	.pipe(gulp.dest('server/public.js'))   //Path to place compiled files
	.pipe(rename({      //Rename cp.min.js
	.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}})) //compress
	.pipe(gulp.dest('server/public/js'))   //Save the compressed file to server/public.js
	.pipe(gulpif(,livereload()))  //Monitor hot updates

Posted by JoWiGo on Sat, 02 May 2020 05:12:51 -0700