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

轉載于:https://www.cnblogs.com/q1104460935/p/7601831.html

總結

以上是生活随笔為你收集整理的Gulp 新手使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。