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.

gulp.watch 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

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;
.option('production',{
	boolean:true,　　　
	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
})

.option('watch',{
	boolean:true,
	default:false,
	describe:'watch all files' 
})

.option('verbose',{
	boolean:true,
	default:false,
	describe:'log' 
})

.option('sourcemaps',{
	describe:'force the creation of sourcemaps'
})

.option('port',{
	string:true,
	default:8080,
	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';

gulp.task('serve',(cb)=>{
	//If it is not in listening state, return the callback function
	if(!args.watch) 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 = liveserver.new(['--harmony','server/bin/www']);
	//Start server
	server.start();
	//Monitor the hot update of js and ejs in the server directory when they change
	gulp.watch(['server/public/**/*.js','server/views/**/*.js'],function(file){
		//Notify server of file changes
		server.notify.apply(server,[file]);
	})
	//Listen to files that need to be restarted. eg route changes, interface changes
	gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
		//Restart service
		server.start.bind(server())
	});

})

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';

gulp.task('css',()=>{
　　// 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';

gulp.task('pages',()=>{
	return gulp.src('app/**/*.ejs')
		.pipe(gulp.dest('server'))
		.pipe(gulpif(args.watch,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

gulp.task('scripts',()=>{
	return gulp.src(['app/js/index.js'])　　//Open file first
	.pipe(plumber({      //error handling
		errorHandle:function(){
		}
	}))
	.pipe(named())　　　　　　　　//File rename
	.pipe(gulpWebpack({　　　　　//Compile the file with 3 parameters
		module:{
			loaders:[{　　　　　　　//Compiling js files with babel
				test:/\.js$/,
				loader:'babel'
			}]
		}
	}),null,(err,stats)=>{　　　　　//Error handling for the third parameter, null for the second
		log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
			chunks:false
		}))
	})
	.pipe(gulp.dest('server/public.js'))　　　//Path to place compiled files
	.pipe(rename({      //Rename cp.min.js
		basename:'cp',
		extname:'.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(args.watch,livereload()))　　//Monitor hot updates
})