前段時(shí)間一直忙于日常事務(wù)，疏于學(xué)習(xí)新知識(shí)夷都，適逢周末眷唉，室外天氣正好，陰+霧霾囤官，私想陋室充電為佳冬阳，特此記之。 --2016.11.13
目錄
- 1.Gulp是什么治拿？
- 2.Gulp能做什么摩泪？
- 3.如何使用Gulp？
- 4.Gulp與同類工具相比優(yōu)勢(shì)/劣勢(shì)
- 5.一點(diǎn)小tips
1.Gulp是什么劫谅？
gulp见坑，全名gulp.js嚷掠，是一款基于流的自動(dòng)化工具。
gulp是前端開發(fā)過程中對(duì)代碼進(jìn)行自動(dòng)化構(gòu)建的利器荞驴。它不僅能對(duì)資源進(jìn)行優(yōu)化不皆，而且在開發(fā)過程中能夠通過配置自動(dòng)完成很多重復(fù)的任務(wù)，讓我們可以專注于代碼熊楼，提高工作效率霹娄。
2.Gulp能做什么？
- 壓縮靜態(tài)資源（HTML, CSS, JS等）
- 變更靜態(tài)資源
- 給靜態(tài)資源添加 md5（文件指紋）
- 修改預(yù)處理樣式后自動(dòng)編譯（SASS鲫骗，Less）
- 合并雪碧圖（CSS Sprites）
- 自動(dòng)刷新瀏覽器
- 組件化頭部底部（include html）
……
這類工作還可以列舉很多犬耻，在前端工作流出現(xiàn)之前，這些工作都由人力完成执泰，而這些工作往往比寫業(yè)務(wù)本身更加費(fèi)時(shí)枕磁，而交給了 Gulp 這類工具，則可以釋放這些人力术吝。
Gulp 這類工具的原理很簡(jiǎn)單计济，都是提供文件的輸入珊燎、輸出操作李丰，本身功能很少蒜绽。但之所以能幫忙開發(fā)者解決問題焊虏，是因?yàn)?Gulp 背后有大量已經(jīng)寫好的插件捌蚊，開發(fā)者只需引用這些插件枢步，寫少量的代碼則可以解決問題乾忱。例如需要合并項(xiàng)目中所有 JavaScript 庫(kù)忌锯，可以這樣處理：
<pre>var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});</pre>
3.如何使用Gulp幔翰？
3.1安裝Gulp
先安裝Node漩氨，安裝完后自帶npm，打開終端：
1.使用npm全局安裝:
<code>npm install -g gulp</code>
2.再在項(xiàng)目中本地安裝一次（必須遗增，具體原因待考察）:
<code>npm install gulp --save-dev</code>
3.2Gulp語法
Gulp語法很簡(jiǎn)單叫惊，一共就5句，分別是：
gulp.dest(path[, options]) - 定義輸出文件地址gulp.src(globs[, options]) - 定義輸入文件地址gulp.task(name [, deps, fn]) - 定義任務(wù)處理函數(shù)gulp.watch(glob[, opts, cb]) - 定義要監(jiān)聽改動(dòng)的文件gulp.watch(glob[, opts], tasks) - 功能同上
示例：
<pre>var concat = require('gulp-concat'); //聲明要調(diào)用的模塊
gulp.task('scripts', function() { //定義一個(gè)任務(wù)task做修，命名為'script'
return gulp.src('./lib/*.js') //先找到要處理的代碼文件霍狰，給一個(gè)path
.pipe(concat('all.js')) //采用上面引入的模塊，處理好的文件叫做'all.js'
.pipe(gulp.dest('./dist/')); //設(shè)置處理后的文件的存放位置
});</pre>
4.Gulp與同類工具相比優(yōu)勢(shì)/劣勢(shì)（以grunt為例）
原文鏈接：gulp VS grunt
作者結(jié)論：Gulp更佳饰及，回調(diào)語法+插件使用方式比較統(tǒng)一
5.一點(diǎn)小tips
1.下載緩慢/卡渍崤鳌：
由于眾所周知的原因，國(guó)內(nèi)到 npm 服務(wù)器的連接很不穩(wěn)定燎含，如果你有V了個(gè)PN大可不必?fù)?dān)心宾濒，也可通過設(shè)置 npm 代理服務(wù)器的方式訪問：**
#########設(shè)置與刪除 npm 代理
<pre>
// 設(shè)置代理
npm config set proxy="http://127.0.0.1:1080"
// 刪除代理
npm config delete proxy
</pre>
推薦一個(gè)簡(jiǎn)單的方案：**使用淘寶 npm 鏡像 **
**“這是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)屏箍，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步绘梦￠俪溃” **—— 為淘寶團(tuán)隊(duì)點(diǎn)贊
<pre>更換 npm 為淘寶源
npm config set registry="https://registry.npm.taobao.org"
npm config set disturl https://npm.taobao.org/dist</pre>
2.定義區(qū)分：
- node , 是javascript語言的環(huán)境和平臺(tái)，
- npm , bower 是一類卸奉，包管理钝诚，
- webpack , browserify , 是一類，javascript預(yù)編譯模塊的方案榄棵，
- requirejs , seajs , 是一類, 基于commonjs凝颇，amd，cmd疹鳄，umd 之類的模塊類包加載方案的框架拧略，
- grunt , gulp , 前端工具，合并尚辑、壓縮辑鲤、編譯 sass/less，browser 自動(dòng)載入資源杠茬，
- react , angular , vue , backbone , 是一類，mvc , mvvm , mvp 之類的前端框架弛随，
- jquery , zepto , prototype , 是一類瓢喉，前端 DOM , BOM 類庫(kù) ，
- ext , yui , kissy , dojo , 是一類舀透，前端應(yīng)用組件栓票，
- underscore , 函數(shù)式編程庫(kù)。
本分類來源于知乎用戶春江一條小魚的回答：前端構(gòu)建工具 Gulp / browserify/ webpack / npm ?
