(一)2.命令行处理，创建JS编译任务脚本(可忽略)19-08-

一.打开上次创建的项目，到tasks/util/args.js中进行配置

import yargs from 'yargs'; //处理命令行参数的包

const args = yargs   

   //区分开发环境和线上环境
  .option('production',{
      boolean: true, //选项是bool类型
      default: false, //默认值是false
      describe: 'min all scripts' //描述
  })
  //要不要监听开发环境中修改这些文件
  .option('watch',{
      boolean:true,
      default:false,
      describe: 'watch all files'
  })

  //要不要详细输出命令行执行的日志
  .option('verbose',{
      boolean:true,
      default:false,
      describe:'log'
  })

  //强制生成sourcemap这样一个东西
  .option('sourcemaps',{
      describe:'force the creation of sroucemaps'
  })

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

  .argv //表示对命令行内容以字符串作为解析

二.到tasks文件夹下建scripts.js文件,(所有的构建脚本一定是放在tasks文件下的)

LYKdeMacBook-Pro:es6 hm$ touch tasks/scripts.js
在该文件中引入一些使用包

import gulp from 'gulp';//引入gulp包
import gulpif from 'gulp-if';
import concat from 'gulp-concat'; //在gulp中处理文件拼接的
import webpack from 'wekpack'; //整个项目打包用的包
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'; //处理js文件压缩的包
import {log,colors} from 'gulp-util';//在命令行工具输出的包，包括一些log和色彩的输出
import args from './util/args';//命令行参数进行解析的包

到终端安装使用的包

LYKdeMacBook-Pro:es6 hm$ 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这个文件中创建一个安装包依赖的一些字段。
安装完成后继续在该页添加代码：

//创建一个gulp任务，用gulp task 的命令创建一个脚本编译的任务
gulp.task('scripts',()=>{
  return gulp.src(['app/js/index.js'])//打开index.js文件
     //集中处理错误 改变默认处理错误机制
    .pipe(plumber({
       errorHandler:function(){

       }
    }))
    .pipe(named())//给文件重新命名一下
    //对js进行编译 用webpack的一个功能
    .pipe(gulpWebpack({
        module:{
            loaders:[{
                test:/\.js$/,
                loader:'badel'
            }]
        }
    }),null,(err,stats)=>{
        log(`Finished '${colors.cyan('scripts')}`,stats.toString({
            chunks:false
        }))
    })
    //借助gulp.dest制定一个路径
    .pipe(gulp.dest('server/public/js'))//server中要拿到一个最新的就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()))
})