站長資訊網(wǎng)
gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具，是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器；它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，還能自動(dòng)化地完成前端代碼的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
本教程操作環(huán)境：windows7系統(tǒng)、nodejs16版，DELL G3電腦。
1、什么是gulp？
gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器；它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器， 它能自動(dòng)化地完成 前端代碼的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。
2、什么是流？
流，流水，把文件比作河流，那么一條河流流出，另一條河流流進(jìn)，gulp對于文件流的操作就是這樣，一個(gè)操作的輸出結(jié)果作為另一個(gè)操作的輸入，像這樣
這種操作有點(diǎn)類似jQuery的鏈?zhǔn)讲僮鳎?("").html("gg").css({}).parent().find("a").……;在使用流的時(shí)候，gulp去除了中間文件，只將最后的輸出寫入磁盤，整個(gè)過程因此變得更快。
3、gulp的安裝
gulp基于node環(huán)境，首先確保安裝了node
安裝了node，npm[（node package manager）nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）]也自動(dòng)被裝好了
因?yàn)閚pm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常,所以最好用淘寶提供的cnpm來安裝node插件。
安裝cnpm：http://npm.taobao.org/
安裝完后，查看cnpm版本以確保安裝成功
接下來就可以安裝gulp了，首先以全局方式安裝gulp：cnpm install –g gulp
然后進(jìn)入桌面demo/bbs2.0/src下面，進(jìn)入bash環(huán)境，用cnpm install gulp 來將gulp安裝到當(dāng)前目錄下
安裝成功后，會(huì)出現(xiàn)node_modules文件夾，然后通過cnpm init來創(chuàng)建package.json（node項(xiàng)目配置文件：因?yàn)閚ode插件包相對來說非常龐大，所以不加入版本管理，將配置信息寫入package.json并將其加入版本管理，其他開發(fā)者對應(yīng)下載即可）
一路回車下去，會(huì)生成package.json文件到當(dāng)前文件夾，此時(shí)嘗試去用gulp來啟動(dòng)gulp，會(huì)發(fā)現(xiàn)會(huì)報(bào)錯(cuò)
根據(jù)報(bào)錯(cuò)信息，我們需要建一個(gè)gulpfile.js文件
然后再運(yùn)行g(shù)ulp
會(huì)發(fā)現(xiàn)打印出了我們需要的“ok”，到這里gulp基本就可以正常工作了。
4、gulp常用插件使用
1）壓縮合并文件
新建一個(gè)index.html文件
在js目錄下新建兩個(gè)js文件
編輯gulpfile文件。如下：
由于我們用了gulp-uglify,gulp-concat兩個(gè)插件，所以我們得先安裝這兩個(gè)插件到當(dāng)前目錄
當(dāng)安裝插件的時(shí)候用–save-dev添加到package.json里面后，我們可以查看package.json中是否成功寫入了該文件
OK，有了，那繼續(xù)安裝gulp-concat到目錄即可，安裝完成后，我們點(diǎn)開node_modules，也會(huì)發(fā)現(xiàn)成功安裝了該插件，現(xiàn)在我們來啟動(dòng)gulp
OK，沒報(bào)錯(cuò)，那就說明成功了，接下來查看文件，發(fā)現(xiàn)src下面多了我們要壓縮合并的all.min.js文件
2）gulp-sass
要安裝sass，首先得安裝ruby，進(jìn)入sass教程
點(diǎn)擊安裝，就會(huì)給出怎么樣安裝sass，以及安裝ruby
ruby安裝成功后，查看ruby版本
成功后通過gem來安裝sass
如果需要用compass（compass和sass關(guān)系相當(dāng)于jQuery和js）的話，順便把compass裝上
這里需要注意的是gem源的問題，會(huì)導(dǎo)致裝不上：會(huì)報(bào)錯(cuò):SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: ce rtificate verify failed 的錯(cuò)誤?？梢园裧em源換成https://ruby.taobao.org/，如果還是不行，再換成http://gems.ruby-china.org/，再不行就人品問題了
接下來用compass create來創(chuàng)建sass項(xiàng)目
創(chuàng)建成功后會(huì)自動(dòng)生成sass，stylesheets，config.rb三個(gè)文件
打開sass里面的任意文件，編輯
然后編輯gulpfile
然后將gulp-sass,gulp-compass安裝到當(dāng)前目錄
啟動(dòng)gulp后，查看stylesheets里面對應(yīng)的文件
好了，sass已經(jīng)成功編譯成了css
3）通過gulp-minify-css來壓縮css
啟動(dòng)gulp后
4）使用gulp-load-plugins來幫我們加載插件
gulp-load-plugins這個(gè)插件能自動(dòng)幫你加載package.json文件里的gulp插件
我們只需要在gulpfile里面require('gulp-load-plugins')();
下面只需要用plugin.**就可以了（多個(gè)單詞用駝峰命名）
5）gulp-imagemin和imagemin-pngquant壓縮圖片
6）gulp-livereload來自動(dòng)刷新網(wǎng)頁
首先安裝gulp-livereload:cnpm install gulp gulp-livereload，這里以壓縮HTML和編譯壓縮sass為列
然后再gulpfile里面
要成功實(shí)現(xiàn)無刷新
1、還需要chrome插件livereload的支持，翻下墻吧
2、在服務(wù)器環(huán)境下打開網(wǎng)頁
