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

用编辑器打开上次我们创建的项目，可以使用Atom，这里我用的是Sublime，都是一样使用。

1、我们来创建第一个脚本，args.js脚本。首先要引入yargs包处理命令行参数。定义一些基本参数。（暂时不了解的可以直接复制粘贴，到后面再慢慢理解）

import yargs from 'yargs';

const args = yargs

  .option('production',{
    boolean:true,
    default:false,
    describe:'min all scripts'
  })

  .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 sroucemaps'
  })

  .option('port',{   //设置服务器端口。
    string:true,
    default:8080,
    describe:'server port'
  })

  .argv

export default args;

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

import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';
import livereload from 'gulp-livereload';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import {log,colors} from 'gulp-util';
import args from './util/args';

gulp.task('scripts',()=>{                     //创建一个任务
  return gulp.src(['app/js/index.js'])
    .pipe(plumber({                          //错误处理
      errorHandle:function(){

      }
    }))
    .pipe(named())
    .pipe(gulpWebpack({                       //js编译
      module:{
        loaders:[{
          test:/\.js$/,
          loader:'babel'
        }]
      }
    }),null,(err,stats)=>{
      log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
        chunks:false
      }))
    })
    .pipe(gulp.dest('server/public/js'))
    .pipe(rename({
      basename:'cp',
      extname:'.min.js'
    }))
    .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
    .pipe(gulp.dest('server/public/js'))
    .pipe(gulpif(args.watch,livereload()))   //自动刷新
})

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

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

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

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

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()))
})

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

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

gulp.task('css',()=>{
  return gulp.src('app/**/*.css')
    .pipe(gulp.dest('server/public'))

})

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

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

gulp.task('serve',(cb)=>{
  if(!args.watch) return cb();

  var server = liveserver.new(['--harmony','server/bin/www']);
  server.start();

  gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
    server.notify.apply(server,[file]);
  })

  gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
    server.start.bind(server)()
  });
})

6、创建browser.js

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

gulp.task('browser',(cb)=>{
  if(!args.watch) return cb();
  gulp.watch('app/**/*.js',['scripts']);
  gulp.watch('app/**/*.ejs',['pages']);
  gulp.watch('app/**/*.css',['css']);
});

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

import gulp from 'gulp';
import del from 'del';
import args from './util/args';

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

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

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

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

import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';

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

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

import gulp from 'gulp';

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

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

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

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

 npm install babel-loader babel-core babel-preset-env --save-dev

在gulpfile.babel.js写入

import requireDir from 'require-dir';

requireDir('./tasks');

引入require-dir包

在babelre写入文件

{
  "presets":["es2015"],

  "plugins":["transform-decorators-legacy"]
}

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

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

缺少安装包

我们安装一下。

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

在运行一下

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

运行gulp --watch命令

在浏览器输入localhost：3000

整个项目就是这样，谢谢大家！