(一)4.文件自动监听，项目构建测试(可忽略)19-08-06

一、到终端创建一个浏览器监听文件 browser.js文件
LYKdeMacBook-Pro:es6 hm$ touch tasks/browser.js

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

//创建一个任务browser
gulp.task('browser',(cb)=>{
  if(!args.watch) return cb();
  //原始js发生变化的时候 启动scripts.js固定脚本
  gulp.watch('app/**/*.js',['scripts']); //自动监听js 当js发生改变的时候会自动调用scripts.js
  gulp.watch('app/**/*.ejs',['pages']);
  gulp.watch('app/**/*.css',['css']);
});

二、到终端创建clear.js文件
LYKdeMacBook-Pro:es6 hm$ touch tasks/clear.js

import gulp from 'gulp';
import del from 'del'; //引入清除包
import args from './util/args';

gulp.task('clean',()=>{
    return del(['server/public','server/views'])
})

将没有的包补齐
LYKdeMacBook-Pro:es6 hm$ npm install del gulp-util gulp-live-server --save-dev
三.在终端创建 build.js 把任务都关联起来
LYKdeMacBook-Pro:es6 hm$ touch tasks/build.js

import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';//关联包的顺序包

gulp.task('build',gulpSequence(
   'clear','css','pages','scripts',['browser','server']
));

四、创建default.js
LYKdeMacBook-Pro:es6 hm$ touch tasks/default.js

import gulp from 'gulp';

gulp.task('default',['build']);

五、安装babel-loader安装包
LYKdeMacBook-Pro:es6 hm$ npm install babel-loader babel-core babel-preset-env webpack --save-dev
LYKdeMacBook-Pro:es6 hm$ npm install require-dir --save-dev
LYKdeMacBook-Pro:es6 hm$ npm install @babel/preset-env --save -dev
先安装这些库
在.babelrc文件添加

{
    "presets":["@babel/preset-env"]
}

LYKdeMacBook-Pro:es6 hm$ npm install gulp-sequence --save-dev
LYKdeMacBook-Pro:es6 hm$ gulp运行
如果报错：

屏幕快照 2019-08-06 14.49.34.png
gulp.task('default',['build']);
改为
gulp.task('default',gulp.series['build']);