Gulp

注意：gulp依賴于nodejs，在安裝前要確保已經(jīng)安裝node環(huán)境，如為安裝查看《windows系統(tǒng)下nodejs安裝及環(huán)境配置》安裝node環(huán)境。

1.全局安裝

在命令行執(zhí)行下邊命令，進(jìn)行全局安裝：

npm install --global gulp

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

gulp -v

如果出項(xiàng)下邊類似的輸出，則為安裝成功。

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

2.作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝

切換到項(xiàng)目目錄下，在命令行執(zhí)行：

npm install --save-dev gulp

--save-dev為可選參數(shù)，表示需要添加到package.json中的devDependencies節(jié)點(diǎn)下。（前提是項(xiàng)目下已存在package.json文件）

3.在項(xiàng)目下新建gulpfile.js文件（文件名不可更改），文件內(nèi)容為：

var gulp = require('gulp'); gulp.task('default', function() { // 將你的默認(rèn)的任務(wù)代碼放在這 console.log("Gulp Test!"); });

4.運(yùn)行g(shù)ulp，在項(xiàng)目下執(zhí)行下面命令，運(yùn)行g(shù)ulp

gulp

執(zhí)行結(jié)果如下：

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上只介紹了四個(gè)API：?task?、?dest?、?src?、?watch?，除此之外，gulp還提供了一個(gè)?run?方法。

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

src()?方法是指定需要處理的源文件的路徑，gulp借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，gulp.src返回當(dāng)前文件流至可用插件。

?

參數(shù)說明

globs	需要處理的源文件匹配符路徑
options	有3個(gè)屬性buffer、read、base

?

globs參數(shù)說明：

“css/base.css”：具體文件名稱

“css/*.css”：指css下所有以.css結(jié)尾的文件

“src/**/*.css”：匹配src下0個(gè)或多個(gè)文件目錄下所有以.css結(jié)尾的文件

“!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參數(shù)說明：

options.buffer?： 類型：?Boolean?默認(rèn)：true 設(shè)置為false，將返回file.content的流并且不緩沖文件，處理大文件時(shí)非常有用；

options.read?： 類型：?Boolean?默認(rèn)：true 設(shè)置false，將不執(zhí)行讀取文件操作，返回null；

options.base?： 類型：?String?設(shè)置輸出路徑以某個(gè)路徑的某個(gè)組成部分為基礎(chǔ)向后拼接

應(yīng)用實(shí)例：

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 進(jìn)來，并且將會寫文件。并且重新輸出（emits）所有數(shù)據(jù)，因此你可以將它 pipe 到多個(gè)文件夾。如果某文件夾不存在，將會自動創(chuàng)建它。

?

參數(shù)說明

path	指定文件輸出路徑，或者定義函數(shù)返回文件輸出路徑亦可
options	有2個(gè)屬性cwd、mode

?

path參數(shù)說明：

指文件輸出的路徑，可以通過函數(shù)返回路徑，如果路徑不存在會默認(rèn)創(chuàng)建該路徑。文件被寫入的路徑是以所給的相對路徑根據(jù)所給的目標(biāo)目錄計(jì)算而來。類似的，相對路徑也可以根據(jù)所給的 base 來計(jì)算。

options參數(shù)說明：

options.cwd

類型：?String?默認(rèn)值：?process.cwd()

輸出目錄的?cwd?參數(shù)，只在所給的輸出目錄是相對路徑時(shí)候有效。

options.mode

類型：?String?默認(rèn)值：?0777

八進(jìn)制權(quán)限字符，用以定義所有在輸出目錄中所創(chuàng)建的目錄的權(quán)限。

應(yīng)用實(shí)例：

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)

該方法用來定義一個(gè)能夠執(zhí)行的gulp任務(wù)。

?

參數(shù)說明

name	任務(wù)名稱，不能包含空格
deps	該任務(wù)依賴的任務(wù)，依賴任務(wù)的執(zhí)行順序跟在deps中聲明的順序一致
fn	該任務(wù)調(diào)用的插件操作

?

name參數(shù)說明：

任務(wù)的名字，如果你需要在命令行中運(yùn)行你的某些任務(wù)，那么，請不要在名字中使用空格。

deps參數(shù)說明：

類型：Array

一個(gè)包含任務(wù)列表的數(shù)組，這些任務(wù)會在你當(dāng)前任務(wù)運(yùn)行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // 做一些事 });

注意：?你的任務(wù)是否在這些前置依賴的任務(wù)完成之前運(yùn)行了？請一定要確保你所依賴的任務(wù)列表中的任務(wù)都使用了正確的異步執(zhí)行方式：使用一個(gè) callback，或者返回一個(gè) promise 或 stream。

fn參數(shù)說明：

該函數(shù)定義任務(wù)所要執(zhí)行的一些操作。通常來說，它會是這種形式：gulp.src().pipe(someplugin())。

應(yīng)用實(shí)例：

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'); });

運(yùn)行結(jié)果：

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])

監(jiān)聽文件修改，文件修改保存和執(zhí)行相應(yīng)配置的任務(wù)。

?

參數(shù)說明

glob	需要處理的源文件匹配符路徑
opts	傳給gaze的參數(shù)，具體參看?gaze?；
tasks	需要執(zhí)行的任務(wù)的名稱數(shù)組
cb(event)	每個(gè)文件變化執(zhí)行的回調(diào)函數(shù)

?

glob參數(shù)說明：

類型：String或者Array

一個(gè) glob 字符串，或者一個(gè)包含多個(gè) glob 字符串的數(shù)組，用來指定具體監(jiān)控哪些文件的變動。

tasks參數(shù)說明：

類型：Array

需要在文件變動后執(zhí)行的一個(gè)或者多個(gè)通過?gulp.task()?創(chuàng)建的 task 的名字。

cb(event)參數(shù)說明：

每次變動需要執(zhí)行的 callback。

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

callback 會被傳入一個(gè)名為?event?的對象。這個(gè)對象描述了所監(jiān)控到的變動：

event.type

類型：?String

發(fā)生的變動的類型：added,?changed?或者?deleted。

event.path

類型：?String

觸發(fā)了該事件的文件的路徑。

5.gulp.run()

gulp模塊的?run()?方法，表示要執(zhí)行的任務(wù)?？赡軙褂脝蝹€(gè)參數(shù)的形式傳遞多個(gè)任務(wù)。注意：任務(wù)是盡可能多的并行執(zhí)行的，并且可能不會按照指定的順序運(yùn)行。

應(yīng)用實(shí)例：

gulp.task('end',function(){ gulp.run('test_1','test_2','test_3'); });

運(yùn)行結(jié)果：

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

轉(zhuǎn)載于:https://www.cnblogs.com/q1104460935/p/7601831.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。