util/args.js

    //引入一個(gè)包，處理命令行參數(shù)的；（之前的操作都是手動(dòng)敲命令，真正程序里，怎么去識(shí)別在命令行這個(gè)工具里輸入的那些東西，需要程序識(shí)別，需要引入一個(gè)包，幫我們做處理）
import yargs from 'yargs';

//定義一些基本的參數(shù)：區(qū)分開(kāi)發(fā)環(huán)境和線上環(huán)境；
//option敲命令行的時(shí)候有個(gè)選項(xiàng)部分；比如 gulp -production; -production就是選項(xiàng)部分；

const args = yargs
    //提取參數(shù)的；區(qū)分命令行輸入的是不是有這個(gè)參數(shù)，進(jìn)而區(qū)分是線上還是開(kāi)發(fā)環(huán)境
    .option('production',{
        boolean:true,
        default:false //如果命令行中沒(méi)有輸入這個(gè)選項(xiàng)--參數(shù)；false就是開(kāi)發(fā)環(huán)境;
        describe:'min all scripts'
    }) 

     //還有一個(gè)參數(shù)，控制要不要監(jiān)聽(tīng)開(kāi)發(fā)環(huán)境中修改的這些文件，比如說(shuō)：改了一個(gè)js要
     不要自動(dòng)編譯，改了個(gè)css要不要自動(dòng)編譯，需要命令行控制（敲命令的時(shí)候可以控制），
     用watch參數(shù)來(lái)控制；
     .option('watch',{
        boolean:true,
        default:false, 
        describe:'watch all files'
     })
     
     //要不要詳細(xì)的輸出命令行執(zhí)行的一個(gè)日志；
     .option('verbose',{
        boolean:true,
        default:false, 
        describe:'log'
     })
    
    //關(guān)于zon映射的東西，js通常壓縮有一個(gè)sourcemaps就是來(lái)處理這個(gè)參數(shù)的；
    .option('sourcemaps',{
        //強(qiáng)制生成sourcemaps;
        describe:'force the creation of sourcemaps'
    })

    //啟動(dòng)服務(wù)，設(shè)置服務(wù)器端口
    .option('port',{
        string:true,
        default:8080,
        describe:'server port'
    })
    
    //對(duì)輸入的命令行內(nèi)容以字符串解析
    .argv

tasks/scripts.js

//先引完這些包，在安裝，現(xiàn)在不用執(zhí)行命令，不著急安裝，現(xiàn)在先知道我們要用哪些包，然后我們?cè)谌グ惭b；正常使用，要安裝這些包；安裝這些包要使用npm install命令，我們之前創(chuàng)建了package.json這個(gè)文件，我們可以直接使用npm install這個(gè)命令后面緊跟著要安裝包的名稱，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表示要把這個(gè)文件除了安裝以外還要在package.json這個(gè)文件中創(chuàng)建一個(gè)安裝包依賴的一些字段)

 //如果在安裝包的過(guò)程中，發(fā)現(xiàn)哪些包不能正常安裝或者安裝比較慢，可以使用npm鏡像淘寶解決網(wǎng)速慢或者安裝慢，某些包安裝失敗的問(wèn)題；

//引入幾個(gè)包，第一個(gè)是gulp,整個(gè)構(gòu)建都是基于gulp；
import gulp from 'gulp';
//gulp的語(yǔ)句中做if判斷的;
import gulpif from 'gulp-if';
//gulp中處理文件拼接的；
import concat form 'gulp-concat';
//整個(gè)打包過(guò)程是用webpack做的,引入webpack工具包；
import webpack from 'webpack';
/*引入webpack-stream,gulp處理的都是一些文件流，是基于stream，
對(duì)webpack的處理結(jié)合webpack-stream來(lái)做處理的；*/
import gulpWebpack from 'webpack-stream';
//對(duì)文件重命名做標(biāo)志的包；
import named from 'vinyl-named' ;
//實(shí)現(xiàn)一個(gè)文件修改后，瀏覽器自動(dòng)刷新的功能，熱更新；
import livereload from 'gulp-livereload';
//處理文件信息流的--管道拼接；
import plumber form 'gulp-plumber';
//對(duì)文件重命名;
import rename from 'gulp-rename';
//處理js、css壓縮的；
import uglify from 'gulp-uglify';
//在命令行工具輸出的一些包,log和一些色彩的輸出；
import {log,colors} from 'gulp-util';
//引入對(duì)命令行參數(shù)進(jìn)行解析的一個(gè)包；
import args from './util/args.js';

//創(chuàng)建gulp的任務(wù)；
gulp.task('scripts',()=>{
    //打開(kāi)這個(gè)js
    return gulp.src(['app/js/index.js']);
    //處理常規(guī)的錯(cuò)誤邏輯；
    .pipe(plumber({
        errorHandle:function(){
        
        }
    }))
    //對(duì)文件重新命名
    .pipe(named())
    //對(duì)js進(jìn)行編譯
    .pipe(gulpWebpack({
        module:{
            loaders:[{
                test:/\.js$/,
                loader:'babel'
            }]
        }
    }),null,(err,stats)=>{
        log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
            chunks:false
          }))
    })
    //編譯完文件要放在指定路徑；使用gulp.dest之后使用這個(gè)路徑；
    //server中要拿到最新的js（編譯好的js），才能在整個(gè)服務(wù)中跑起來(lái)；
    .pipe(gulp.dest('server/public/js'))
   
    /*處理編譯壓縮的過(guò)程；讓開(kāi)發(fā)者識(shí)別壓縮包的文件，可以用重命名的方式，
    在重新備份剛編譯好的文件，用rename這個(gè)方式做；
    通過(guò)這個(gè).min.js寫(xiě)法把剛才生成的文件重新復(fù)制了一份，復(fù)制的這份在基礎(chǔ)上
    壓縮。
    */
    .pipe(rename({
        basename:'cp',
        extname:'.min.js'
    }))
    
    //壓縮;壓縮過(guò)程要配置怎么壓縮；
    .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
    
    /*存儲(chǔ)到某個(gè)地方的命令；這個(gè)目錄下有兩個(gè)文件，編譯好的沒(méi)壓縮的，編譯好的
    壓縮了，壓縮之后那個(gè)文件叫cp.min.js*/
    .pipe(gulp.dest('server/public/js'))
    
    /*監(jiān)聽(tīng)一個(gè)文件，變化了自動(dòng)刷新這個(gè)功能；用gulpif做一下判斷，判斷命令行
    有watch這個(gè)參數(shù)，就執(zhí)行l(wèi)ivereload；如果沒(méi)有就不會(huì)對(duì)文件進(jìn)行監(jiān)聽(tīng)；也就不會(huì)自動(dòng)刷新了*/
    .pipe(gulpif(args.watch,livereload()))
    
})