util/args.js
//引入一個包雇初，處理命令行參數(shù)的；（之前的操作都是手動敲命令减响，真正程序里靖诗，怎么去識別在命令行這個工具里輸入的那些東西郭怪，需要程序識別，需要引入一個包刊橘，幫我們做處理）
import yargs from 'yargs';
//定義一些基本的參數(shù)：區(qū)分開發(fā)環(huán)境和線上環(huán)境鄙才；
//option敲命令行的時候有個選項部分；比如 gulp -production; -production就是選項部分促绵；
const args = yargs
//提取參數(shù)的攒庵；區(qū)分命令行輸入的是不是有這個參數(shù)，進而區(qū)分是線上還是開發(fā)環(huán)境
.option('production',{
boolean:true,
default:false //如果命令行中沒有輸入這個選項--參數(shù)败晴；false就是開發(fā)環(huán)境;
describe:'min all scripts'
})
//還有一個參數(shù)浓冒，控制要不要監(jiān)聽開發(fā)環(huán)境中修改的這些文件，比如說：改了一個js要
不要自動編譯尖坤，改了個css要不要自動編譯稳懒，需要命令行控制（敲命令的時候可以控制），
用watch參數(shù)來控制慢味；
.option('watch',{
boolean:true,
default:false,
describe:'watch all files'
})
//要不要詳細的輸出命令行執(zhí)行的一個日志场梆；
.option('verbose',{
boolean:true,
default:false,
describe:'log'
})
//關于zon映射的東西，js通常壓縮有一個sourcemaps就是來處理這個參數(shù)的贮缕；
.option('sourcemaps',{
//強制生成sourcemaps;
describe:'force the creation of sourcemaps'
})
//啟動服務辙谜，設置服務器端口
.option('port',{
string:true,
default:8080,
describe:'server port'
})
//對輸入的命令行內容以字符串解析
.argv
tasks/scripts.js
//先引完這些包，在安裝感昼，現(xiàn)在不用執(zhí)行命令装哆，不著急安裝，現(xiàn)在先知道我們要用哪些包定嗓，然后我們在去安裝蜕琴；正常使用，要安裝這些包宵溅；安裝這些包要使用npm install命令凌简，我們之前創(chuàng)建了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這個文件中創(chuàng)建一個安裝包依賴的一些字段)
//如果在安裝包的過程中雏搂，發(fā)現(xiàn)哪些包不能正常安裝或者安裝比較慢，可以使用npm鏡像淘寶解決網(wǎng)速慢或者安裝慢寇损，某些包安裝失敗的問題凸郑；
//引入幾個包，第一個是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' ;
//實現(xiàn)一個文件修改后歌憨，瀏覽器自動刷新的功能着憨，熱更新；
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';
//引入對命令行參數(shù)進行解析的一個包；
import args from './util/args.js';
//創(chuàng)建gulp的任務籽懦；
gulp.task('scripts',()=>{
//打開這個js
return gulp.src(['app/js/index.js']);
//處理常規(guī)的錯誤邏輯于个；
.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'))
/*處理編譯壓縮的過程捶码；讓開發(fā)者識別壓縮包的文件羽氮，可以用重命名的方式，
在重新備份剛編譯好的文件惫恼，用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'))
/*監(jiān)聽一個文件簇爆，變化了自動刷新這個功能癞松；用gulpif做一下判斷，判斷命令行
有watch這個參數(shù)入蛆，就執(zhí)行l(wèi)ivereload响蓉；如果沒有就不會對文件進行監(jiān)聽；也就不會自動刷新了*/
.pipe(gulpif(args.watch,livereload()))
})
