圖片來源網(wǎng)絡(luò)
Gulp基于Node.js的自動化構(gòu)建工具
Gulp運行效率比Grunt高瓦呼，相比之下更有設(shè)計感
新建項目
在新建項目之前敬矩，電腦中需要安裝全局的gulp插件蛋铆，然后就可以在指定的項目文件中新建gulp項目了娜膘。
npm install -g gulp-cli
文件夾下-打開終端
npm init - 輸入項目名稱等信息
(頁面中所有引入的js和css都是引用dest文件夾下的壓縮文件痕届。)
處理CSS
npm install -? (查看group install的命令)
安裝css預(yù)處理的五個插件：gulp衡瓶，gulp-sass徘公，gulp-concat，gulp-minify-css哮针，gulp-sourcemaps)
npm install --save-dev gulp gulp-sass gulp-concat gulp-minify-css gulp-sourcemaps
如果需要查看項目安裝的所有插件关面，可以在package.json中的devDependencies中看到。
這需要安裝插件的時候使用save-dev命令十厢。
本項目中目前為止安裝的插件如下：
安裝的插件
安裝全局gulp插件
npm install -g gulp-cli
安裝一個公用指令
項目根目錄下新建gulpfile.js文件
在gulpfile.js文件中需要引用所有的插件等太，然后根據(jù)需要執(zhí)行的操作新建任務(wù)。
現(xiàn)在需要壓縮所有.scss文件蛮放，代碼如下：
壓縮.scss文件
然后在命令行執(zhí)行g(shù)ulp style缩抡，就可以看到所有文件已經(jīng)轉(zhuǎn)移到了dest文件夾下:
文件轉(zhuǎn)移
說明我們的項目是完全可以執(zhí)行的。
然而我們需要的肯定不是單純的文件轉(zhuǎn)移筛武，我們需要對樣式文件進行編譯缝其。
項目目錄結(jié)構(gòu)舉例：
項目目錄結(jié)構(gòu)
gulp.src(files[,options])files:StringArray, 必填，需要處理的文件匹配符路徑options:Object徘六，選填内边，配置選項base:String，輸出路徑的基底位置buffer: Booleab待锈，設(shè)置gulp是否緩存文件漠其，在處理大文件時可提高效率read:Boolean，是否執(zhí)行文件讀取操作
通過對sass插件的引用var sass = require('gulp-sass')來對樣式進行編譯：
sass插件
經(jīng)過實驗竿音，在.pipe(sass())后面不能使用分號和屎；，不然程序會報錯春瞬。
編譯成功后柴信，就可以在dest文件夾下看到編譯后的樣式文件了，這里可以使用sass的語法來驗證編譯是否成功宽气。
同時随常，我們可以使用css-minify插件來格式化樣式
varcssminify =require('gulp-minify-css')
cssminify
系統(tǒng)會自動將css格式化，并將相同樣式的選擇器合并萄涯，例如：.index,.select{color:red}
鏈接JS
因為連接起來的js會有命名空間的混淆绪氛，所以這里要用到閉包。
通過自定義插件的方式來做一個匿名函數(shù)的包裹：
through2.obj.bufferContents每個文件處理時調(diào)用
through2.obj.endStream所有文件都處理完后來調(diào)用
插件
首先安裝through2插件
npm install --save-dev through2
通過定義bufferContents和endStream涝影，在任務(wù)中調(diào)用through.obj方法
調(diào)用
執(zhí)行g(shù)ulp script枣察，得到合并在一起的JS文件，并且每個JS的內(nèi)容都被包含在自己的作用域中。
閉包
要使合并后的JS有效序目，還需要編寫registJS函數(shù)臂痕。（編寫的registJS函數(shù)屬于自定義插件功能，也可以通過gulp自帶的插件gulp-insert來完成以上功能宛琅，這在后面會有提及）
registJS的內(nèi)容如下：
registJS
當(dāng)然刻蟹，通過插件gulp-insert可以直接完成閉包和registJS的功能逗旁。
步驟一樣是先安裝插件npm install --save-dev gulp-insert
在代碼中引用插件：var insert = require('gulp-insert')
然后改寫上面的代碼：
更改以后
gulp-insert使用stream類來才做文件對象嘿辟，比之前自定義的時候用buffer更好。
壓縮js
安裝gulp-uplify：npm install --save-dev gulp-uglify
引用插件：var uglify = require('gulp-uglify')
調(diào)用插件：.pipe(uglify())
gulp-uglify是在生產(chǎn)環(huán)境下的壓縮片效。
如果要在開發(fā)環(huán)境下壓縮的話红伦，需要使用另外一個插件browser-sync
安裝插件：npm install --save-dev browser-sync
引用插件：var browserSync = require('browser-sync').create();
為了舉例，我們新建一個開發(fā)環(huán)境下的任務(wù)default:dev:
gulp.task('default:dev',['script:dev','style:dev'],function(){? ? browserSync.init({server:{baseDir:'./'//新建一個server},open:false//防止代碼運行時淀衣，瀏覽器自動打開一個頁面})})
但是這時候的css和js都是已經(jīng)壓縮的昙读，需要安裝插件gulp-sourcemaps。
安裝插件：npm install --save-dev gulp-sourcemaps
復(fù)制原先的style和script任務(wù)膨桥，把人物名稱分別改為：style:dev和script:dev蛮浑，同時把default:dev的依賴也改成對應(yīng)的名字['script:dev','style:dev']。
style:dev如下：
style:dev
*注意：在:dev環(huán)境下不能使用cssminify()
script:dev如下：
script:dev
運行default:dev任務(wù)后就會在控制臺source頁面看到?jīng)]有壓縮的css和js供開發(fā)人員調(diào)試只嚣。
后期研究：unit test框架核心功能的單獨調(diào)試
Watch功能
在default:dev任務(wù)中添加兩行watch的代碼：
gulp.watch('scriptPath',['script:dev']); //scriptPath在本項目中為：./script/**/*.js沮稚，[ ]中的是需要執(zhí)行的任務(wù)名稱,中括號不能刪除
gulp.watch('stylePath',['style:dev']); //stylePath在本項目中為：./style/**/*.scss，[ ]中的是需要執(zhí)行的任務(wù)名稱,中括號不能刪除
同時在script:dev和style:dev兩個任務(wù)中添加一行代碼：
.pipe(browserSync.stream());//同步瀏覽器
完成后在命令行啟動任務(wù)default:dev:
gulpdefault:dev
這時册舞，在樣式文件中修改的內(nèi)容一旦保存可以直接在顯示器顯示渲染效果蕴掏，無需刷新瀏覽器，這就是watch的功能调鲸。
注：以上所有內(nèi)容都是本人的學(xué)習(xí)筆記和總結(jié)盛杰，僅供學(xué)習(xí)和參考，如果有遺漏或者不當(dāng)?shù)牡胤秸堈徑饷晔埼疝D(zhuǎn)載即供。
作者：anMoo韓魔
鏈接：http://www.reibang.com/p/a02e2d7e5fec
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)于微，非商業(yè)轉(zhuǎn)載請注明出處逗嫡。
