gulp 初探

一、gulp 的簡介

            基于 node.js 流的自動化構(gòu)建工具，可以快速構(gòu)建項(xiàng)目并減少頻繁的 I/0 操作，還可以利用 gulp 插件完成各種自動化任務(wù)。gulp 是基于 node.js 的自動任務(wù)運(yùn)行器，它能自動化地完成 javascript/coffee/sass/less/html/p_w_picpath/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。在實(shí)現(xiàn)上，它借鑒了 Unix 操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。通過本文，我們將學(xué)習(xí)如何使用 gulp 來改變開發(fā)流程，從而使開發(fā)更加快速，高效。

            gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構(gòu)建。

            gulp 學(xué)習(xí)常用地址：

                    gulp 官方網(wǎng)址：https://gulpjs.com/

                    gulp 插件地址：https://gulpjs.com/plugins/

                    gulp 官方 API：http://www.gulpjs.com.cn/docs/api/

                    gulp 中文文檔：http://www.gulpjs.com.cn/docs/

                    淘寶 npm 鏡像站：http://npm.taobao.org/

二，安裝 node.js 和 npm（gulp 和 gulp 插件是通過 npm 安裝并管理的，npm 是 node.js 的包管理器）

1、node.js 下載地址

            http://www.nodejs.org/download/

2、安裝完成后，可通過命令行更新 npm 版本，保證是最新的

            npm  update npm  -g

PS：安裝好 node.js 之后，可以在你的終端中輸入“node -v”命令來查看 node.js 的版本，也順便檢測 node.js 是否安裝成功。 

3、安裝 cnmp 命令（選裝）

            npm install -g cnmp --registry=https://registry.npm.taobao.org

PS：npm 安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，甚至還會遇到需要×××才能下載插件的情況，因此推薦安裝 cnpm。cnpm 跟 npm 用法完全一致，只是在執(zhí)行命令時(shí)將 npm 改為 cnpm。

4、檢測 cnpm 是否安裝成功

            cnpm -v                // 顯示版本號即安裝成功 

三、安裝 gulp

1、提供 package.json 配置文件（package.json 文件用于保存項(xiàng)目元數(shù)據(jù)）

{
      "name": "demo",                   
      "version": "1.1.0",               
      "description": "demo",       
      "devDependencies": {
            "gulp": "^3.8.11" 
      }
}

PS：package.json 是我們 gulp 項(xiàng)目的核心配置文件，用于設(shè)置將要執(zhí)行操作的項(xiàng)目名稱，版本，描述，依賴等信息，其格式為 json 數(shù)據(jù)格式。package.json 文件是每個(gè) gulp 項(xiàng)目必備的文件，因此首要條件需要先創(chuàng)建這個(gè)文件。創(chuàng)建 package.json 文件方式有很多種：

                    1、在終端通過“npm init”命令自動創(chuàng)建一個(gè)基本的 package.json 文件；

                    2、從官網(wǎng)上復(fù)制或者下載一個(gè) package.json 文件；

                    3、手工創(chuàng)建一個(gè) package.json 文件；

2、全局安裝 gulp

            npm install -g gulp

3、在終端下通過命令進(jìn)入到項(xiàng)目的根目錄

            cd F:\wamp\www\gulp            // 切換到項(xiàng)目根目錄

4、作為項(xiàng)目的開發(fā)依賴安裝（本地安裝）

            npm install --save-dev gulp

PS：全局安裝 gulp 是為了執(zhí)行 gulp 任務(wù)，本地安裝 gulp 則是為了調(diào)用 gulp 插件的功能。

5、執(zhí)行“npm install”命令安裝項(xiàng)目依賴的插件（安裝成功后會在項(xiàng)目根目錄下的  node_modules 文件夾里）

            npm install    // 此命令會批量安裝 package.json 文件內(nèi) "devDependencies" 中所有依賴插件

6、在配置好 package.json 文件后也可以使用命令安裝 gulp 項(xiàng)目依賴的插件（package.json 文件會自動更新）

            npm install gulp-rename --save-dev

PS：這種安裝一律是如下形式： npm install <module> –save-dev，不僅會安裝指定的 <module> 插件，還會將插件信息自動添加到  package.json 文件的 "devDependencies" 區(qū)域中，且包括插件名稱，版本范圍。

四、gulpfile.js  文件的配置（package.json 和 gulpfile.js 文件都要放置到項(xiàng)目的根目錄下）

1、提供 gulpfile.js 配置文件

// 裝載 gulp 插件
var gulp = require('gulp'); 

// 自定義任務(wù)
gulp.task('default', function() {  
            // 將你的默認(rèn)的任務(wù)代碼放在這
});

2、最后在終端運(yùn)行 gulp 

            gulp

五、gulp 常用插件介紹

gulp-uglify —— 壓縮 javascript 文件； 
gulp-clean-css —— 壓縮 css 文件；
gulp-concat —— 合并文件； 
gulp-jshint —— js 文件語法檢測；
gulp-sass —— sass 編譯；
gulp-less —— less 編譯； 
gulp-autoprefixer —— 自動添加 css 前綴； 
gulp-p_w_picpathmin —— 圖片壓縮；
gulp-livereload —— 瀏覽器自動刷新；    
gulp-rename —— 文件重命名； 

PS：以上這些插件，本套教程不會全部講到。但是隨著講解其中的一部分，我想你就能掌握使用 gulp 插件的方法。知道方法了，然后你就可以參考官方文檔去使用你想要的插件。

六、總結(jié)

1、安裝 node.js 和 npm；

2、新建 package.json 文件；

3、全局和本地安裝 gulp；

4、安裝 gulp 插件；

5、新建 gulpfile.js 文件；

6、通過命令提示符運(yùn)行 gulp 任務(wù)；