gulp操做

注意：gulp依賴於nodejs，在安裝前要確保已經安裝node環境，如爲安裝查看《windows系統下nodejs安裝及環境配置》安裝node環境。

1.全局安裝

在命令行執行下邊命令，進行全局安裝：

npm install --global gulp

檢測gulp是否安裝成功，執行下邊命令：

gulp -v

若是出項下邊相似的輸出，則爲安裝成功。

My_computer>>gulp -v[10:49:34] CLI version 3.9.1[10:49:34] Local version 3.9.1

2.做爲項目的開發依賴（devDependencies）安裝

切換到項目目錄下，在命令行執行：

npm install --save-dev gulp

--save-dev爲可選參數，表示須要添加到package.json中的devDependencies節點下。（前提是項目下已存在package.json文件）

3.在項目下新建gulpfile.js文件（文件名不可更改），文件內容爲：

var gulp = require('gulp'); gulp.task('default', function() {// 將你的默認的任務代碼放在這

console.log("Gulp Test!");});

4.運行gulp，在項目下執行下面命令，運行gulp

gulp

執行結果以下：

My_computer>>gulp[10:56:26] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js[10:56:26] Starting 'default'...Gulp Test![10:56:26] Finished 'default' after 208 μs

Gulp API

gulp在git上只介紹了四個API： task 、 dest 、 src 、 watch ，除此以外，gulp還提供了一個 run 方法。

1.gulp.src(globs[, options])

src() 方法是指定須要處理的源文件的路徑，gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前文件流至可用插件。

 

參數	說明
globs	須要處理的源文件匹配符路徑
options	有3個屬性buffer、read、base

 

globs參數說明：

「css/base.css」：具體文件名稱

「css/*.css」：指css下全部以.css結尾的文件

「src/**/*.css」：匹配src下0個或多個文件目錄下全部以.css結尾的文件

「!src/js/test.js」：排除src/js下的test.js文件

「{src/js/{a,b}.js}」：匹配src/js下a.js和b.js文件

「{src/img/*.{jpg,png,gif}}」：匹配src/img下的全部jpg/png/gif圖片

options參數說明：

options.buffer ： 類型： Boolean 默認：true 設置爲false，將返回file.content的流而且不緩衝文件，處理大文件時很是有用；

options.read ： 類型： Boolean 默認：true 設置false，將不執行讀取文件操做，返回null；

options.base ： 類型： String 設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接

應用實例：

var gulp= require('gulp'),

gulp.task('test', function () {

gulp.src(['src/**/*.css','!src/{extend,page}/*.css'])

 .pipe(gulp.dest('./css'));});

2.gulp.dest(path[, options])

dest() 方法是指定處理完後文件輸出的路徑。能被 pipe 進來，而且將會寫文件。而且從新輸出（emits）全部數據，所以你能夠將它 pipe 到多個文件夾。若是某文件夾不存在，將會自動建立它。

 

參數	說明
path	指定文件輸出路徑，或者定義函數返回文件輸出路徑亦可
options	有2個屬性cwd、mode

 

path參數說明：

指文件輸出的路徑，能夠經過函數返回路徑，若是路徑不存在會默認建立該路徑。文件被寫入的路徑是以所給的相對路徑根據所給的目標目錄計算而來。相似的，相對路徑也能夠根據所給的 base 來計算。

options參數說明：

options.cwd

類型： String 默認值： process.cwd()

輸出目錄的 cwd 參數，只在所給的輸出目錄是相對路徑時候有效。

options.mode

類型： String 默認值： 0777

八進制權限字符，用以定義全部在輸出目錄中所建立的目錄的權限。

應用實例：

var gulp= require('gulp'),

gulp.task('test', function () {

gulp.src('./client/templates/*.jade').pipe(jade()).pipe(gulp.dest('./build/templates')).pipe(minify()).pipe(gulp.dest('./build/minified_templates'));});

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

該方法用來定義一個可以執行的gulp任務。

 

參數	說明
name	任務名稱，不能包含空格
deps	該任務依賴的任務，依賴任務的執行順序跟在deps中聲明的順序一致
fn	該任務調用的插件操做

 

name參數說明：

任務的名字，若是你須要在命令行中運行你的某些任務，那麼，請不要在名字中使用空格。

deps參數說明：

類型：Array

一個包含任務列表的數組，這些任務會在你當前任務運行以前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {

 // 作一些事 });

注意： 你的任務是否在這些前置依賴的任務完成以前運行了？請必定要確保你所依賴的任務列表中的任務都使用了正確的異步執行方式：使用一個 callback，或者返回一個 promise 或 stream。

fn參數說明：

該函數定義任務所要執行的一些操做。一般來講，它會是這種形式：gulp.src().pipe(someplugin())。

應用實例：

vargulp= require('gulp');

 

gulp.task('test_1',function(){

console.log('test_1 done');});

 

gulp.task('test_2',function(){

console.log('test_2 done!');});

 

gulp.task('test_3',function(){

console.log('test_3 done');});

 

gulp.task('end',['test_1','test_2','test_3'],function(){

  console.log('end done');});

運行結果：

My_computer>>gulp end[11:31:39] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js[11:31:39] Starting 'test_1'...

test_1 done[11:31:39] Finished 'test_1' after 171 μs[11:31:39] Starting 'test_2'...

test_2 done![11:31:39] Finished 'test_2' after 581 μs[11:31:39] Starting 'test_3'...

test_3 done[11:31:39] Finished 'test_3' after 201 μs[11:31:39] Starting 'end'...end done[11:31:39] Finished 'end' after 291 μs

4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

監聽文件修改，文件修改保存和執行相應配置的任務。

 

參數	說明
glob	須要處理的源文件匹配符路徑
opts	傳給gaze的參數，具體參看 gaze ；
tasks	須要執行的任務的名稱數組
cb(event)	每一個文件變化執行的回調函數

 

glob參數說明：

類型：String或者Array

一個 glob 字符串，或者一個包含多個 glob 字符串的數組，用來指定具體監控哪些文件的變更。

tasks參數說明：

類型：Array

須要在文件變更後執行的一個或者多個經過 gulp.task() 建立的 task 的名字。

cb(event)參數說明：

每次變更須要執行的 callback。

gulp.watch('js/**/*.js', function(event) {   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });

callback 會被傳入一個名爲 event 的對象。這個對象描述了所監控到的變更：

event.type

類型： String

發生的變更的類型：added, changed 或者 deleted。

event.path

類型： String

觸發了該事件的文件的路徑。

5.gulp.run()

gulp模塊的 run() 方法，表示要執行的任務。可能會使用單個參數的形式傳遞多個任務。注意：任務是儘量多的並行執行的，而且可能不會按照指定的順序運行。

應用實例：

gulp.task('end',function(){

  gulp.run('test_1','test_2','test_3');});

運行結果：

My_computer>>gulp end[11:56:13] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js[11:56:13] Starting 'end'...

gulp.run() has been deprecated. Use task dependencies or gulp.watch task trigger

ing instead.[11:56:13] Starting 'test_1'...

test_1 done[11:56:13] Finished 'test_1' after 562 μs[11:56:13] Starting 'test_2'...

test_2 done![11:56:13] Finished 'test_2' after 207 μs[11:56:13] Starting 'test_3'...

test_3 done[11:56:13] Finished 'test_3' after 205 μs[11:56:13] Finished 'end' after 8.52 ms