gulp基礎教程

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

1.安裝nodejs

1.1 安裝：打開nodejs官網，點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（.msi文件）。而後像安裝QQ同樣安裝它就能夠了（安裝路徑隨意）

1.2 新版的nodejs已經集成了npm，npm也一併安裝好了。可使用cmd命令行輸入"npm -v"來測試是否成功安裝

1.3 配置npm的全局模塊的存放路徑以及cache的路徑，例如我但願將以上兩個文件夾放在NodeJS的主目錄下，便在NodeJs下創建"node_global"及"node_cache"兩個文件夾

1.4 啓動cmd，輸入：

npm config set prefix"C:\Program Files\nodejs\node_global"

以及

npm configset cache"C:\Program Files\nodejs\node_cache"

1.5 打開系統對話框，「個人電腦」右鍵「屬性」-「高級系統設置」-「高級」-「環境變量」。在系統變量下新建"NODE_PATH"，輸入」C:\Program Files\nodejs\node_global\node_modules「

1.6 因爲改變了module的默認地址，因此上面的用戶變量都要跟着改變一下（用戶變量"PATH"修改成「C:\Program Files\nodejs\node_global\」）

1.7 cnpm安裝，在cmd中輸入如下代碼便可將npm指向國內鏡像源，以後輸入cnpm -v查看版本。接下來咱們就能夠用cnpm代替npm了

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

2.全局安裝gulp

2.1全局安裝gulp目的是爲了經過她執行gulp任務，命令提示符執行cnpm install gulp -g

2.2查看是否正確安裝：命令提示符執行gulp -v，出現版本號即爲正確安裝。

3.項目安裝gulp以及gulp插件

3.1 D盤新建你的測試文件夾gulp，(假設你的nodejs安裝在默認路徑下C:\Program Files\nodejs,在D盤建立你的測試項目)經過命令行定位到你項目目錄

C:\Users\administor>cd d:\gulp
C:\Users\administor>D:
D:\gulp cnpm init (建立package.json文件，輸入項目的相關信息，可爲空)

3.2 本地安裝gulp插件，示例以gulp-less爲例（編譯less文件），命令提示符執行

cnpm install gulp-less --save-dev

3.3 爲了能正常使用，咱們還得本地安裝gulp：cnpm install gulp --save-dev
全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。

4.配置gulpfile.js

4.1 gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件

//導入工具包 require('node_modules裏對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less');
 
//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //該任務針對的文件
        .pipe(less()) //該任務調用的模塊
        .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定義默認任務 elseTask爲其餘任務，該示例沒有定義elseTask任務
 
//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數
//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組) 
//gulp.dest(path[, options]) 處理完後文件生成路徑

5.運行任務

5.一、說明：命令提示符執行gulp 任務名稱；

5.二、編譯less：命令提示符執行gulp testLess；

5.三、當執行gulp default或gulp將會調用default任務裏的全部任務[‘testLess’,’elseTask’]