es6环境搭建（2）创建js编译任务

用编辑器打开上次我们创建的项目

1、我们来创建第一个脚本，args.js脚本。首先要引入yargs包处理命令行参数。定义一些基本参数。

[html]  view plain  copy

1. import yargs from 'yargs';  //引入yargs包处理命令行参数
2.   
3. const args = yargs  
4.   
5.   .option('production',{  //区分开发环境还是线上环境
6.     boolean:true,  
7.     default:false,  
8.     describe:'min all scripts'  
9.   })  
10.   
11.   .option('watch',{   //控制是否监听  
12.     boolean:true,  
13.     default:false,  
14.     describe:'watch all files'  
15.   })  
16.   
17.   .option('verbose',{//详细输出命令行日志  
18.     boolean:true,  
19.     default:false,  
20.     describe:'log'  
21.   })  
22.   
23.   .option('sourcemaps',{  
24.     describe:'force the creation of sroucemaps'  
25.   })  
26.   
27.   .option('port',{   //设置服务器端口。  
28.     string:true,  //设置是string格式
29.     default:8080,  
30.     describe:'server port'  
31.   })  
32.   
33.   .argv  //对输入的命令行文件内容以字符串格式解析
34.   
35. export default args;  

2、创建一个scripts.js脚本。（我们所有的脚本都只在tasks目录下创建）

[html]  view plain  copy

1. import gulp from 'gulp';  
2. import gulpif from 'gulp-if';  
3. import concat from 'gulp-concat';  //处理文件的拼接
4. import webpack from 'webpack';  
5. import gulpWebpack from 'webpack-stream';  
6. import named from 'vinyl-named';  //文件重命名的包
7. import livereload from 'gulp-livereload';  //文件修改之后浏览器自动更新的包
8. import plumber from 'gulp-plumber';  //处理文件信息流
9. import rename from 'gulp-rename';  //文件重命名的包
10. import uglify from 'gulp-uglify';  //处理js，css压缩
11. import {log,colors} from 'gulp-util';  //命令行工具输出的包
12. import args from './util/args';  //对命令行参数进行解析的包
13.   //接下来在命令行中安装这些包
14. gulp.task('scripts',()=>{                     //创建一个gulp任务  task是gulp提供的创建任务的API，scripts任务名
15.   return gulp.src(['app/js/index.js'])  //打开此文件
16.     .pipe(plumber({                          //处理 常规的错误逻辑 
17.       errorHandle:function(){  
18.   
19.       }  
20.     }))  
21.     .pipe(named())  //文件重命名
22.     .pipe(gulpWebpack({                       //用webpack进行js编译  
23.       module:{  
24.         loaders:[{  
25.           test:/\.js$/,  
26.           loader:'babel'  
27.         }]  
28.       }  
29.     }),null,(err,stats)=>{  //第三个参数是处理错误的函数
30.       log(`Finished '${colors.cyan('scripts')}'`,stats.toString({  
31.         chunks:false  
32.       }))  
33.     })  
34.     .pipe(gulp.dest('server/public/js'))  //将编译好的内容放进指定路径server拿到最新的编译好的js才能跑起来
35.     .pipe(rename({  //生成的文件
36.       basename:'cp',  
37.       extname:'.min.js'  
38.     }))  
39.     .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}})) //压缩及配置 
40.     .pipe(gulp.dest('server/public/js'))  //存储
41.     .pipe(gulpif(args.watch,livereload()))   //自动刷新 命令行中有watch就更新， 
42. })  

像上面的那些引入的文件我们都要使用npm install 安装这些依赖包。

[html]  view plain  copy

1. npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs --save-dev 
2. //这里的save-dev 表示除了安装这些包之外，还要在package.json中创建安装包以来的字段

--save-dev是将这些依赖包的一些说明写入package.json文件里，安装完成后，大家可以看一下这个文件。

3、创建一个处理模板的脚本pages.js

[html]  view plain  copy

1. import gulp from 'gulp';  
2. import gulpif from 'gulp-if';  
3. import livereload from 'gulp-livereload';  
4. import args from './util/args';  
5.   
6. gulp.task('pages',()=>{  //创建任务
7.   return gulp.src('app/**/*.ejs')  //gulp所有任务的创建都要使用.src打开文件。*表示各个嵌套的.ejs
8.     .pipe(gulp.dest('server'))  //模板文件拷贝到server下
9.     .pipe(gulpif(args.watch,livereload()))  //监听
10. })  

4、创建一个处理css的脚本css.js

[html]  view plain  copy

1. import gulp from 'gulp';  
2. import gulpif from 'gulp-if';  
3. import livereload from 'gulp-livereload';  
4. import args from './util/args';  //引入命令行参数包
5.   
6. gulp.task('css',()=>{  
7.   return gulp.src('app/**/*.css')  //打开app目录下的所有css文件
8.     .pipe(gulp.dest('server/public'))  //原封不动放到server
9.    .pipe(gulpif(args.watch,livereload()))  //监听，这句话可有可无，css不需要
10. })  

5、处理服务器的脚本server.js。

[html]  view plain  copy

1. import gulp from 'gulp';  
2. import gulpif from 'gulp-if';  
3. import liveserver from 'gulp-live-server';  //启动服务器的包，即启动一个脚本作为服务器的功能
4. import args from './util/args';  
5.   
6. gulp.task('serve',(cb)=>{  //传一个回调，
7.   if(!args.watch) return cb();  //如果不是处于监听状态下，就返回回调函数
8.   
9.   var server = liveserver.new(['--harmony','server/bin/www']);  //如果是处于监听状态下，创建服务器，
10. //--harmony指 要在当前命令行下执行后面的这段脚本server/bin/www是一个脚本，默认启动的就是这个脚本
11.   server.start(); //启动服务器
12.   
13.   gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){  //因为项目是es6与css无关，所以不处理css，只需要监听js和ejs。gulp.watch是文件的监听，第一个参数告诉监听的目录，
14.     server.notify.apply(server,[file]);  //将改动告诉服务器，做相应的处理
15.   })  
16.   //服务器中的路由和接口发生改变，要server重启才能生效，所以监听需要服务器重启的文件
17.   gulp.watch(['server/routes/**/*.js','server/app.js'],function(){  //服务启动的入口文件
18.     server.start.bind(server)()  
19.   });  
20. })  

接下来实现让所有的任务自动完成，app目录是前端资源的原始文件，server自动更新时处理的是public下的，scripts是往public下 写文件，还差一个环节就是app下的文件发生变化时，如何自动编译生成到public下，所以创建browser与浏览器监听相关的文件

6、创建browser.js

[html]  view plain  copy

1. import gulp from 'gulp';  
2. import gulpif from 'gulp-if';  
3. import gutil from 'gulp-util';  //gulp常用的函数集合
4. import args from './util/args';  
5.   
6. gulp.task('browser',(cb)=>{  //gulp创建任务。
7.   if(!args.watch) return cb();  
8.   gulp.watch('app/**/*.js',['scripts']);  //监听原始文件下的所有js发生变化时，启动scripts脚本，scripts任务完成后就将es6转成es5或者es3，并写入server下面的public文件
9.   gulp.watch('app/**/*.ejs',['pages']);  
10.   gulp.watch('app/**/*.css',['css']);  //
11. });  
12. //gulp.watch的用法，第一个参数是指定要监听的文件，第二个参数是要执行的任务。

browser只完成了文件的监听，

7、清空指定目录脚本clean.js

[html]  view plain  copy

1. import gulp from 'gulp';  
2. import del from 'del';  //做删除的包
3. import args from './util/args';  
4.   
5. gulp.task('clean',()=>{  
6.   return del(['server/public','server/views'])  
7. })  

8、核心任务差不多完成了，我们把前面没有安装的依赖包安装进来。

[html]  view plain  copy

1. npm install gulp-live-server del gulp-util --save-dev  

9、创建一个build.js把所有任务串联起来。

[html]  view plain  copy

1. import gulp from 'gulp';  
2. import gulpSequence from 'gulp-sequence';  //处理包的顺序问题，server最后启动
3.   
4. gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));  //将server两个相关的目录清理掉，css拷过去，接下来编译模板，执行脚本，['browser','serve']注意一定是数组，说明这两个任务一定在他们之后，browser又在serve前面。总之server一定在最后面执行

10、创建默认的js default.js(如果直接执行gulp命令，则进入该默认文件)

[html]  view plain  copy

1. import gulp from 'gulp';  
2.   
3. gulp.task('default',['build']);  

将上面未安装依赖包安装。

11、我们先运行gulp命令来看一下能否运行成功。

并没有成功，前三个是缺少这些包，不是什么大问题，只要安装就好。

[html]  view plain  copy

1. npm install babel-loader babel-core babel-preset-env --save-dev  
2. //babel-loader依赖于babel-core

上面的报错是因为gulpfile.babel.js里面是空的，所以

在gulpfile.babel.js写入

[html]  view plain  copy

1. import requireDir from 'require-dir';  //将所有文件都加进来，执行的包。
2.   
3. requireDir('./tasks');  //将tasks下的文件都引进来。

引入require-dir包

[html]  view plain  copy

1. 
   npm install require-dir --save-dev  

在babelre写入文件

[html]  view plain  copy

1. {  
2.   "presets":["es2015"],  
3.   
4.   "plugins":["transform-decorators-legacy"]  
5. }  

并安装包   npm install babel-preset-es2015 --save-dev

12.继续运行一下gulp命令，发现还是出现了错误

缺少安装包

我们安装一下。

[html]  view plain  copy

1. npm install babel-plugin-transform-decorators-legacy --save-dev  

在运行一下

在app/views/index.ejs写一个语句测试一下。

运行gulp --watch命令

在浏览器输入localhost：3000//3000是服务端口

找到server下面的app.js找到下面的这句话

app.use(express.static(path.join(__dirname, 'public')));

在它下面添加下面的一句话，位置固定在这里，这是热更新的语句
app.use(require('connect-livereload')());

整个项目就是这样，

[html]  view plain  copy

1. npm install gulp-live-server del gulp-util --save-dev  

npm install babel-preset-es2015 --save-dev