gulp 初探

1、gulp 的簡介

            基於 node.js 流的自動化構建工具，能夠快速構建項目並減小頻繁的 I/0 操做，還能夠利用 gulp 插件完成各類自動化任務。gulp 是基於 node.js 的自動任務運行器，它能自動化地完成 javascript/coffee/sass/less/html/p_w_picpath/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，它借鑑了 Unix 操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用 gulp 來改變開發流程，從而使開發更加快速，高效。

            gulp 和 grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建。

            gulp 學習經常使用地址：

                    gulp 官方網址：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 的包管理器）

一、node.js 下載地址

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

二、安裝完成後，可經過命令行更新 npm 版本，保證是最新的

            npm  update npm  -g

PS：安裝好 node.js 以後，能夠在你的終端中輸入「node -v」命令來查看 node.js 的版本，也順便檢測 node.js 是否安裝成功。 

三、安裝 cnmp 命令（選裝）

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

PS：npm 安裝插件是從國外服務器下載，受網絡影響大，甚至還會遇到須要×××才能下載插件的狀況，所以推薦安裝 cnpm。cnpm 跟 npm 用法徹底一致，只是在執行命令時將 npm 改成 cnpm。

四、檢測 cnpm 是否安裝成功

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

3、安裝 gulp

一、提供 package.json 配置文件（package.json 文件用於保存項目元數據）

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

PS：package.json 是咱們 gulp 項目的核心配置文件，用於設置將要執行操做的項目名稱，版本，描述，依賴等信息，其格式爲 json 數據格式。package.json 文件是每一個 gulp 項目必備的文件，所以首要條件須要先建立這個文件。建立 package.json 文件方式有不少種：

                    一、在終端經過「npm init」命令自動建立一個基本的 package.json 文件；

                    二、從官網上覆制或者下載一個 package.json 文件；

                    三、手工建立一個 package.json 文件；

二、全局安裝 gulp

            npm install -g gulp

三、在終端下經過命令進入到項目的根目錄

            cd F:\wamp\www\gulp            // 切換到項目根目錄

四、做爲項目的開發依賴安裝（本地安裝）

            npm install --save-dev gulp

PS：全局安裝 gulp 是爲了執行 gulp 任務，本地安裝 gulp 則是爲了調用 gulp 插件的功能。

五、執行「npm install」命令安裝項目依賴的插件（安裝成功後會在項目根目錄下的  node_modules 文件夾裏）

            npm install    // 此命令會批量安裝 package.json 文件內 "devDependencies" 中全部依賴插件

六、在配置好 package.json 文件後也可使用命令安裝 gulp 項目依賴的插件（package.json 文件會自動更新）

            npm install gulp-rename --save-dev

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

4、gulpfile.js  文件的配置（package.json 和 gulpfile.js 文件都要放置到項目的根目錄下）

一、提供 gulpfile.js 配置文件

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

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

二、最後在終端運行 gulp 

            gulp

5、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 插件的方法。知道方法了，而後你就能夠參考官方文檔去使用你想要的插件。

6、總結

一、安裝 node.js 和 npm；

二、新建 package.json 文件；

三、全局和本地安裝 gulp；

四、安裝 gulp 插件；

五、新建 gulpfile.js 文件；

六、經過命令提示符運行 gulp 任務；