Gulp簡介
Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。Gulp.js是基於 Node.js構建的,利用Node.js流的威力,你可以快速構建項目。
安裝Gulp
1、全局安裝Gulp:
npm install --global gulp
2、作為項目的開發依賴（devDependencies）安裝：
npm install --save-dev gulp
小貼士
使用過Gulp的人會碰到一個問題，明明全局已經安裝了Gulp和Gulp的插件，但是在項目中執行Gulp命令會出現如下錯誤：
Local gulp not found in ~\your-path
這是為什么呢？
其實這是Gulp故意設計的，原因是為了版本和依賴的控制。意思就是當別人Fork你代碼，或者你過段時間拷貝到別的電腦上再gulp的時候，能控制gulp的版本
和其他插件的版本。
同時，這也是為了方便你在不同的項目中使用不同版本的gulp，如果僅在全局裝一個 gulp 所有的項目就只能使用同一個版本的 gulp 了。
全局安裝用於在命令行中使用gulp命令執行gulp的任務，本地安裝是由於每個gulpfile.js都依賴gulp，該文件中依賴的gulp會直接從項目的node_module文件去找。
本地安裝並記錄在package.json的devDependencies下，能保證所以引用你項目的人都能用同個版本的gulp。另外，使用package.json中scripts來執行gulp命令
的話可以無需安裝全局包。
在這里可以看看大家的討論：
Why do we need to install gulp globally and locally?
Npm的包管理
當我們創建一個項目時，我們要現在項目中創建一個package.json文件，那么這個文件時干什么用的呢？
從字面意思和文件名稱上看，我們就可以知道是包管理的配置文件。下面我們來說說這個配置文件如何創建和使用！
npm init創建package.json
對於很多剛開始學習gulp的人來說，對package.json一無所知，更比說創建了；網上有很多的模板，但是我們不能總是依賴於模板吧，萬一哪天斷網呢？
其實，官網已經想到了這一點，我們可以通過以下命令來創建：
nmp init
會出現以下提示：
這里讓我們輸入項目名稱，我們輸入我們的項目名稱，比如myapp。然后回車繼續...，
后面會讓我們輸入項目的版本(version),描述(description),入口(main)等信息。
Package.json 屬性說明
- name - 包名。
- version - 包的版本號。
- description - 包的描述。
- homepage - 包的官網 url 。
- author - 包的作者姓名。
- contributors - 包的其他貢獻者姓名。
- dependencies - 依賴包列表。如果依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下。
- repository - 包代碼存放的地方的類型，可以是 git 或 svn，git 可在 Github 上。
- main - main 字段是一個模塊ID，它是一個指向你程序的主要項目。就是說，如果你包的名字叫 express，然后用戶安裝它，然后require("express")。
- keywords - 關鍵字
有時候，我們fork別的代碼時，會看到devDependencies這個配置項，關於devDependencies這個配置項，我們下面來專門講他。
其實這個配置項是npm來管理的，當我們使用npm install命令來安裝一些插件時，npm會自動的更新package.json加入依賴項。下面我們來實際操作一下，
首先，我們在D盤(哪個盤隨意)下建個文件夾，比如gulpdemo，然后，"開始" -> "運行" -> "cmd"，打開DOS命令窗口，執行cd命令，將路徑定位到這個目錄下。
既然package.json是管理依賴包的，那么我們第一步當然是添加package.json了。下面是具體的步驟：
- 在DOS窗口，輸入npm init命令：
nmp init
然后，按照操作，一次輸入配置信息，最后生成的package.json大概如下：
{
"name": "myapp",
"version": "1.0.0",
"description": "My web app",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "yunfeifei",
"license": "ISC"
}
這個每個人輸入的信息不同，會或多或少少幾項，這個沒關系，我們可以參照上面的配置項說明來根據情況具體修改配置。
- 安裝Gulp
上面我們已經說過，雖然已經全局安裝過gulp，但是每個項目還是要基於項目依賴安裝的，我們執行以下命令進行安裝：
npm install --save-dev gulp
執行完命令，安裝成功后，我們再來看看package.json文件，發現里面多了devDependencies這個配置:
{
"name": "myapp",
"version": "1.0.0",
"description": "My web app",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "yunfeifei",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1"
}
}
依賴標明了模塊名稱和版本號，這樣方便以后別人使用，具體的使用方法隨后會說明。
當我們發布項目的時候，並不會把gulp的模塊都打包發布，只是發布我們的源代碼和一些必要的配置文件。
就如.Net和Java的包管理工具一樣，只生成一個配置文件，后面再由包管理工具進行解析、還原。
到這里，關於package.json的創建和使用相信大家已經清楚了，下面我們來介紹一下gulp常用的一些插件和使用方法。
Gulp常用插件和使用簡介
Gulp常用的一些功能就是文件拷貝、文件重命名(gulp-rename)、文件合並(gulp-concat)、文件拷貝(gulp-copy)、文件刪除(del)、文本替換(gulp-replace)、
js語法檢測(gulp-jshint)、js壓縮(gulp-uglify)、html壓縮(gulp-htmlmin)、css壓縮(gulp-clean-css)和圖片壓縮(gulp-imagemin)。
下面，寫一個例子，實現js的語法檢測和壓縮合並功能，其他的插件和功能，大家可以通過網上找資料進行學習。
這個例子中我們要用到一下模塊:
- js語法檢測(gulp-jshint)
- js壓縮(gulp-uglify)
- 文件合並(gulp-concat)
- 文件重命名(gulp-rename)
我們執行以下命令來安裝這些模塊：
npm install gulp-concat gulp-uglify gulp-rename jshint gulp-jshint --save-dev
安裝成功后，我們在文件夾下新建gulpfile.js和js文件夾，目錄結構如下：
gulpfile.js又稱gulp入口文件，主要用來進行任務配置，告訴gulp需要進行哪些操作。
下面，我們修改gulpfile.js，寫入以下代碼：
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint');
//語法檢查
gulp.task('jshint',function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//壓縮，合並 js
gulp.task('minifyjs', function() {
return gulp.src('js/*.js') //需要操作的文件
.pipe(concat('main.js')) //合並所有js到main.js
.pipe(gulp.dest('js')) //輸出到文件夾
.pipe(rename({suffix: '.min'})) //rename壓縮后的文件名
.pipe(uglify()) //壓縮
.pipe(gulp.dest('js')); //輸出
});
//默認命令，在cmd中輸入gulp后，執行的就是這個任務(壓縮js需要在檢查js之后操作)
gulp.task('default',['jshint'],function() {
gulp.start('minifyjs');
});
代碼中都加了注釋，相信大家都能看的懂，具體的語法和命令，大家可以去看看Gulp官網的API文檔。
然后，我們在js文件中新建兩個js文件，index.js和common.js,分別寫入一些代碼，如下：
index.js
alert("hello,world");
function ShowAlert() {
alert("Hello,world!");
}
js和common.js
function ShowMessage() {
alert("Hello,this is a message!");
}
然后，我們在DOS窗口執行gulp命令，如圖：
從圖中我們可以看到，先執行了
執行完成后，我們會發現js目錄中，多出了兩個js文件，分別是main.js和main.min.js,其中main.js很明顯是index.js和common.js合並后的內容。
main.min.js是main.js的壓縮版。
開發環境中，我們肯定是要把生成目錄和源代碼目錄分開的，這個為了減少操作，降低復雜度，讓大家容易理解，所以只建了一個目錄。
npm 解析依賴項
上面我們說了當我們創建項目時，npm會自動添加依賴模塊配置到package.json，現在我們來說一下，如何使用這個package.json來還原依賴項。
上面我們寫的一個小例子，假如我們要發給別人，我們會發現，他們直接執行gulp命令來執行任務，是無法執行成功的，提示缺少某些模塊。
這個時候，我們在DOS下進入這個目錄，執行npm install命令，npm就會讀取package.js里面的依賴項，進行安裝，然后我們就可以正常的執行gulp命令，
執行gulp任務了。
npm安裝包失敗的問題
國內的話，執行npm install包時，會出現卡住的現象，這個你不要問我為什么，我不會告訴你的！
我們可以使用的淘寶的npm鏡像，用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm：
淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。
npm install -g cnpm --registry=https://registry.npm.taobao.org
其用法是和npm一樣的。
第一次用博客園的Markdown編輯器，不是很順手，無法加空白行，感覺不爽的，點擊這里Gulp入門與解惑
=================================================================================================
作者：雲霏霏
QQ交流群：243633526
博客地址：http://www.cnblogs.com/yunfeifei/
Github地址：https://github.com/yunfeifei
Github博客：https://yunfeifei.github.io
聲明：本博客原創文字只代表本人工作中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關系。非商業，未授權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文連接。
如果大家感覺我的博文對大家有幫助，請推薦支持一把，給我寫作的動力。