ECMAScript6--1.2创建js编译任务脚本

util/args.js

    //引入一个包，处理命令行参数的；（之前的操作都是手动敲命令，真正程序里，怎么去识别在命令行这个工具里输入的那些东西，需要程序识别，需要引入一个包，帮我们做处理）
import yargs from 'yargs';

//定义一些基本的参数：区分开发环境和线上环境；
//option敲命令行的时候有个选项部分；比如 gulp -production; -production就是选项部分；

const args = yargs
    //提取参数的；区分命令行输入的是不是有这个参数，进而区分是线上还是开发环境
    .option('production',{
        boolean:true,
        default:false //如果命令行中没有输入这个选项--参数；false就是开发环境;
        describe:'min all scripts'
    }) 

     //还有一个参数，控制要不要监听开发环境中修改的这些文件，比如说：改了一个js要
     不要自动编译，改了个css要不要自动编译，需要命令行控制（敲命令的时候可以控制），
     用watch参数来控制；
     .option('watch',{
        boolean:true,
        default:false, 
        describe:'watch all files'
     })
     
     //要不要详细的输出命令行执行的一个日志；
     .option('verbose',{
        boolean:true,
        default:false, 
        describe:'log'
     })
    
    //关于zon映射的东西，js通常压缩有一个sourcemaps就是来处理这个参数的；
    .option('sourcemaps',{
        //强制生成sourcemaps;
        describe:'force the creation of sourcemaps'
    })

    //启动服务，设置服务器端口
    .option('port',{
        string:true,
        default:8080,
        describe:'server port'
    })
    
    //对输入的命令行内容以字符串解析
    .argv

tasks/scripts.js

//先引完这些包，在安装，现在不用执行命令，不着急安装，现在先知道我们要用哪些包，然后我们在去安装；正常使用，要安装这些包；安装这些包要使用npm install命令，我们之前创建了package.json这个文件，我们可以直接使用npm install这个命令后面紧跟着要安装包的名称，npm install gulp gulpif gulp-concat webpack webpack-stream
vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify      gulp- util yargs  --save-dev (--save-dev表示要把这个文件除了安装以外还要在package.json这个文件中创建一个安装包依赖的一些字段)

 //如果在安装包的过程中，发现哪些包不能正常安装或者安装比较慢，可以使用npm镜像淘宝解决网速慢或者安装慢，某些包安装失败的问题；

//引入几个包，第一个是gulp,整个构建都是基于gulp；
import gulp from 'gulp';
//gulp的语句中做if判断的;
import gulpif from 'gulp-if';
//gulp中处理文件拼接的；
import concat form 'gulp-concat';
//整个打包过程是用webpack做的,引入webpack工具包；
import webpack from 'webpack';
/*引入webpack-stream,gulp处理的都是一些文件流，是基于stream，
对webpack的处理结合webpack-stream来做处理的；*/
import gulpWebpack from 'webpack-stream';
//对文件重命名做标志的包；
import named from 'vinyl-named' ;
//实现一个文件修改后，浏览器自动刷新的功能，热更新；
import livereload from 'gulp-livereload';
//处理文件信息流的--管道拼接；
import plumber form 'gulp-plumber';
//对文件重命名;
import rename from 'gulp-rename';
//处理js、css压缩的；
import uglify from 'gulp-uglify';
//在命令行工具输出的一些包,log和一些色彩的输出；
import {log,colors} from 'gulp-util';
//引入对命令行参数进行解析的一个包；
import args from './util/args.js';

//创建gulp的任务；
gulp.task('scripts',()=>{
    //打开这个js
    return gulp.src(['app/js/index.js']);
    //处理常规的错误逻辑；
    .pipe(plumber({
        errorHandle:function(){
        
        }
    }))
    //对文件重新命名
    .pipe(named())
    //对js进行编译
    .pipe(gulpWebpack({
        module:{
            loaders:[{
                test:/\.js$/,
                loader:'babel'
            }]
        }
    }),null,(err,stats)=>{
        log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
            chunks:false
          }))
    })
    //编译完文件要放在指定路径；使用gulp.dest之后使用这个路径；
    //server中要拿到最新的js（编译好的js），才能在整个服务中跑起来；
    .pipe(gulp.dest('server/public/js'))
   
    /*处理编译压缩的过程；让开发者识别压缩包的文件，可以用重命名的方式，
    在重新备份刚编译好的文件，用rename这个方式做；
    通过这个.min.js写法把刚才生成的文件重新复制了一份，复制的这份在基础上
    压缩。
    */
    .pipe(rename({
        basename:'cp',
        extname:'.min.js'
    }))
    
    //压缩;压缩过程要配置怎么压缩；
    .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
    
    /*存储到某个地方的命令；这个目录下有两个文件，编译好的没压缩的，编译好的
    压缩了，压缩之后那个文件叫cp.min.js*/
    .pipe(gulp.dest('server/public/js'))
    
    /*监听一个文件，变化了自动刷新这个功能；用gulpif做一下判断，判断命令行
    有watch这个参数，就执行livereload；如果没有就不会对文件进行监听；也就不会自动刷新了*/
    .pipe(gulpif(args.watch,livereload()))
    
})