前端學習筆記-Gulp的使用

一、 Gulp 簡介
          gulp 是前端開發過程中一種基於流的代碼構建工具， 是自動化項目的構建利器； 她不僅能對網站資源進行優化， 而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用她， 不僅可以很愉快的編寫代碼， 而且大大提高我們的工作效率。gulp 是基於 Nodejs 的自動任務運行器， 它能自動化地完成 javascript、 coffee、 sass、less、 html/image、 css 等文件的測試、 檢查、 合併、 壓縮、 格式化、 瀏覽器自動刷新、 部署文件生成， 並監聽文件在改動後重復指定的這些步驟。

       在實現上， 她借鑑了 Unix 操作系統的管道（pipe） 思想， 前一級的輸出， 直接變成後一級的輸入， 使得在操作上非常簡單。

gulp 官方網址： http://gulpjs.com
gulp 插件地址： http://gulpjs.com/plugins
gulp 官方 API： https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文 API： http://www.ydcss.com/archives/424
gulp 常用插件： http://www.jianshu.com/p/98db023b5b89
優點：

易於使用
       通過代碼優於配置的策略， gulp 讓簡單的任務簡單， 複雜的任務可管理。
構建快速
       利用 Node.js 流的威力， 你可以快速構建項目並減少頻繁的 IO 操作。
易於學習
      通過最少的 API， 掌握 gulp 毫不費力， 構建工作盡在掌握： 如同一系列流管道。
插件高質
      gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。
二、 安裝 nodejs
1、 說明： gulp 是基於 nodejs， 理所當然需要安裝 nodejs；
2、 安裝： 打開 nodejs 官網， 點擊碩大的綠色 Download 按鈕， 它會根據系統信息選擇對應
版本（.msi 文件） 。 然後像安裝 QQ 一樣安裝它就可以了（安裝路徑隨意） 。
3、 使用命令行（如果你熟悉命令行， 可以直接跳過）
node -v 查看安裝的 nodejs 版本， 出現版本號， 說明剛剛已正確安裝 nodejs. ( PS： 未
能出現版本號， 請嘗試重啓電腦重試.)
npm -v 查看 npm 版本號， nodejs 安裝後自動安裝了 npm 命令， 我們需要通過 npm
命令來安裝 gulp
cd 定位到目錄， 用法： cd + 路徑 ；
dir 列出文件列表；
D: 進入 D 盤
cls 清空命令提示符窗口內容。

三、 全局安裝 gulp
1、 說明： 全局安裝 gulp 目的是爲了通過她執行 gulp 任務；
2、 安裝： 命令提示符執行 npm install gulp -g； 安裝需要一定的時間.
3、 查看是否正確安裝： 命令提示符執行 gulp -v， 出現版本號即爲正確安裝。

四、 新建 package.json 文件
1. 說明： package.json 是基於 nodejs 項目必不可少的配置文件， 它是存放在項目根目錄的普
通 json 文件；
2. 進入工程根目錄， 使用 npm init 創建 package.json 文件（以下截圖中的 cnpm 即爲 npm，
實操中請輸入 npm 代替 cnpm， 原因在webpack介紹中有介紹，即淘寶鏡像的問題）

3.安裝過程可以一路回車使用默認值，直到最後y/n，確認方可。

五、 創建 gulpfile.js 文件
1. gulp 也需要一個文件作爲它的主文件， 在 gulp 中這個文件叫做 gulpfile.js。 新建一個文件
名爲 gulpfile.js 的文件， 然後放到你的項目目錄中。 之後要做的事情就是在 gulpfile.js 文件中
定義我們的任務了。
2. gulp 的使用流程一般是：

① 首先通過 gulp.src()方法獲取到想要處理的文件流（gulp.src()用於找到要處理的文件。 支持“*” 語法， 如： "main/*" , "js/*.js" ， "**"代表所有
文件夾。）

② 然後把文件流通過 pipe()方法導入到 gulp 的插件中（pipe()返回處理結構以便後面操作的銜接。 node 函數。）

最後把經過插件處理後的流再通過 pipe 方法導入到 gulp.dest()中， gulp.dest()方法則把流中的內容寫入到文件中。（gulp.dest()被處理文件的輸出路徑）

③ gulp.task()方法用來定義任務， 內部使用的是 Orchestrator(用於排序、 執行任務和最大併發依賴關係的模塊)，其語法爲：

gulp.task(name[, deps], fn)

參數name ：爲任務名；
參數deps： 是當前定義的任務需要依賴的其他任務， 爲一個數組。 當前定義的任務會在所有依賴
的任務執行完畢後纔開始執行。 如果沒有依賴， 則可省略這個參數；
參數fn ：爲任務函數， 我們把任務要執行的代碼都寫在裏面。 該參數也是可選的。 當你定義一個
簡單的任務時， 需要傳入任務名字和執行函數兩個.

3.任務依賴
可以通過任務依賴來實現。 例如我想要執行 one,two,three 這三個任務， 那我們就可以定義
一個空的任務， 然後把那三個任務當做這個空的任務的依賴就行了：
//只要執行 default 任務， 就相當於把 one,two,three 這三個任務執行了
gulp.task('default',['one','two','three']);
(Ps:如果任務相互之間沒有依賴， 任務就會按你書寫的順序來執行， 如果有依賴的話則會先
執行依賴的任務)
但是如果某個任務所依賴的任務是異步的， 就要注意了， gulp 並不會等待那個所依賴的異步
任務完成, 而是會接着執行後續的任務。

代碼詳見下面gulpfile.js文件中

六、 項目文檔結構介紹

3.下圖是環境搭建好後的文件結構

從上至下依次爲：

/node_modules——依賴插件目錄，命令npm install gulp -g執行後生成的。

/dest——目標文件夾，代碼解壓後存放的目錄

/src——源文件目錄，即你編寫的源代碼。

gulpfile.js——定義gulp任務，即解壓時的入口。

package.json——命令npm init 創建 package.json 文件，是必不可少的配置文件,存放了一些用戶及信息，以及項目依賴插件的版本號等，項目拷貝時，由於node_modules過於冗雜，一般不拷貝，只需要一個package.json文件，然後在項目根目錄下cmd執行命令符npm install即可以根據package.json文件中的插件信息將node_modules模塊重新安裝，我覺得package.json文件就像是依賴插件的一個索引，有了它即可安裝項目中所需的插件，這點在webpack的使用或項目開發上都好使。

1. 安裝 gulp 插件使用命令 npm install --save-dev 插件名稱
2. 本示例以 html 插件 gulp-htmlmin 爲例， 執行 npm install --save-dev gulp-htmlmin
安裝插件(注意要先 cd 到項目的根目錄)

七、安裝gulp插件

安裝 gulp 插件使用命令 npm install --save-dev 插件名稱
例如： html 插件 gulp-htmlmin， 執行 npm install --save-dev gulp-htmlmin
安裝插件(注意要先 cd 到項目的根目錄)

其他插件：

壓縮 js 插件 gulp-uglify
解決中文亂碼插件 gulp-bom
壓縮 css 插件 gulp-minify-css
壓縮 html 插件 gulp-minify-html
壓縮圖片插件 gulp-imagemin
壓縮 png 圖片插件 imagemin-pngquant
重命名插件 gulp-rename
注：使用前都需安裝對應文件的插件才能解壓

八、gulpfile.js 文件編寫

//解壓規範：可要可不要，js解壓時不要引用該對象，會解壓失敗
var obj = {
	removeComments: true, //清除 HTML 註釋
	collapseWhitespace: true, //壓縮 HTML
	collapseBooleanAttributes: true,//省略布爾屬性的值<input checked="true"/> ==><input checked/>
	removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
	removeScriptTypeAttributes: true, //刪除<script>的 type="text/javascript"
	removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的 type="text/css"
	minifyJS: true, //壓縮頁面 JS
	minifyCSS: true //壓縮頁面 CSS
}
//獲取gulp的操作對象
var gulp = require("gulp");

//默認任務
gulp.task("default",function(){
	console.log("default任務");
});

gulp.task("one",function(){
	console.log("one");
})
gulp.task("two",function(){
	console.log("two");
})

//任務依賴
//gulp.task('default',['one','two']);


//壓縮html
var htmlmin = require("gulp-htmlmin");
gulp.task("htmlTask",function(){
	gulp.src("src/html/*")
	.pipe(htmlmin(obj))
	.pipe(gulp.dest("dest/html"));
});
//gulp.task("default",['htmlTask']);



//壓縮js
var uglify = require("gulp-uglify");
gulp.task("jstask",function(){
	gulp.src("src/js/*")
	.pipe(uglify())
	.pipe(gulp.dest("dest/js"));
});

//gulp.task('default',['jstask']);

var minifyCss = require('gulp-minify-css');
gulp.task("cssTask",function(){
	gulp.src("src/css/*")
	.pipe(minifyCss())
	.pipe(gulp.dest("dest/css"));
});

九、執行

輸入命令： gulp 來執行 gulp，解壓成功如下。

在dest文件加下解壓成功的代碼呈一行顯示：

附：代碼部分比較粗糙，如有不懂，歡迎垂詢，主要是環境搭建好，一般問題不大，有不足之處望指教！！！