Gulp使用指南 - smiler－IT工程師數位筆記本

文章出處

發上來好像格式都變了，有需要的可以給留言，我把為知筆記發給大家！大家如果看著費勁就拉到最后直接看圖片部分！

一.基本介紹

gulp是前端開發過程中一種基于流的代碼構建工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用她，不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。

　　gulp是基于Nodejs的自動任務運行器，她能自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定的這些步驟。在實現上，她借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。

二.安裝

　首先確保你已經正確安裝了nodejs環境。然后以全局方式安裝gulp：

npm install -g gulp
　　全局安裝gulp后，還需要在每個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，然后在命令行中執行：

npm install gulp
　　如果想在安裝的時候把gulp寫進項目package.json文件的依賴中，則可以加上--save-dev：

npm install --save-dev gulp
　　這樣就完成了gulp的安裝，接下來就可以在項目中應用gulp了。

三.Gulp的使用
1 建立gulpfile.js文件
　　gulp也需要一個文件作為它的主文件，在gulp中這個文件叫做gulpfile.js。新建一個文件名為gulpfile.js的文件，然后放到你的項目目錄中。之后要做的事情就是在gulpfile.js文件中定義我們的任務了。下面是一個最簡單的gulpfile.js文件內容示例，它定義了一個默認的任務。

var gulp = require('gulp');
gulp.task('default',function(){
console.log('hello world');
});
此時我們的目錄結構是這樣子的：

2 運行gulp任務

　　要運行gulp任務，只需切換到存放gulpfile.js文件的目錄(windows平臺請使用cmd或者Power Shell等工具)，然后在命令行中執行gulp命令就行了，gulp后面可以加上要執行的任務名，例如gulp task1，如果沒有指定任務名，則會執行任務名為default的默認任務。

四.Gulp的API

工作方式

在介紹gulp API之前，我們首先來說一下gulp.js工作方式。在gulp中，使用的是Nodejs中的stream(流)，首先獲取到需要的stream，然后可以通過stream的pipe()方法把流導入到你想要的地方，比如gulp的插件中，經過插件處理后的流又可以繼續導入到其他插件中，當然也可以把流寫入到文件中。所以gulp是以stream為媒介的，它不需要頻繁的生成臨時文件，這也是我們應用gulp的一個原因。

　　gulp的使用流程一般是：首先通過gulp.src()方法獲取到想要處理的文件流，然后把文件流通過pipe方法導入到gulp的插件中，最后把經過插件處理后的流再通過pipe方法導入到gulp.dest()中，gulp.dest()方法則把流中的內容寫入到文件中。例如：

var gulp = require('gulp');
gulp.src('script/jquery.js') // 獲取流的api
.pipe(gulp.dest('dist/foo.js')); // 寫放文件的api

globs的匹配規則

我們重點說說gulp用到的globs的匹配規則以及一些文件匹配技巧，我們將會在后面的課程中用到這些規則。

　　gulp內部使用了node-glob模塊來實現其文件匹配功能。我們可以使用下面這些特殊的字符來匹配我們想要的文件：

* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

*.* 能匹配 a.js,style.css,a.b,x.y

*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來匹配所有的目錄和文件

**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js

a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z

a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因為只有單**單獨出現才能匹配多級目錄

?.js 能匹配 a.js,b.js,c.js

a?? 能匹配 a.b,abc,但不能匹配ab/,因為它不會匹配路徑分隔符

[xyz].js 只能匹配 x.js,y.js,z.js,不會匹配xy.js,xyz.js等,整個中括號只代表一個字符

[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

1.src

gulp.src()方法正是用來獲取流的，但要注意這個流里的內容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲著原始文件的路徑、文件名、內容等信息。其語法為：

gulp.src(globs[, options]);
globs參數是文件匹配模式(類似正則表達式)，用來匹配文件路徑(包括文件名)，當然這里也可以直接指定某個具體的文件路徑。當有多個匹配模式時，該參數可以為一個數組;類型為String或 Array。我們在前一節中已經講過了globs的匹配規則，這里就不在詳述。

當有多種匹配模式時可以使用數組

//使用數組的方式來匹配多種文件
gulp.src(['js/*.js','css/*.css','*.html'])
options為可選參數。以下為options的選項參數:

options.buffer

類型： Boolean 默認值： true

　　如果該項被設置為 false，那么將會以 stream 方式返回 file.contents 而不是文件 buffer 的形式。這在處理一些大文件的時候將會很有用。注意：插件可能并不會實現對 stream 的支持。

options.read

類型： Boolean 默認值： true

如果該項被設置為 false，那么 file.contents 會返回空值（null），也就是并不會去讀取文件。

options.base

類型： String ，設置輸出路徑以某個路徑的某個組成部分為基礎向后拼接。

如, 請想像一下在一個路徑為 client/js/somedir 的目錄中，有一個文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 現在 `base` 的值為 `client/js/`
.pipe(minify())
.pipe(gulp.dest('build')); // 寫入 'build/somedir/somefile.js' 將`client/js/`替換為build

gulp.src('client/js/**/*.js', { base: 'client' }) // base 的值為 'client'
.pipe(minify())
.pipe(gulp.dest('build')); // 寫入 'build/js/somedir/somefile.js' 將`client`替換為build
2.dest

　gulp.dest()方法是用來寫文件的，其語法為：

gulp.dest(path[,options])
path為寫入文件的路徑；

options為一個可選的參數對象，以下為選項參數：

options.cwd

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

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

options.mode

類型： String 默認值： 0777

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

var gulp = require('gulp');
gulp.src('script/jquery.js')　 // 獲取流
.pipe(gulp.dest('dist/foo.js')); // 寫放文件
　　　　下面再說說生成的文件路徑與我們給_gulp.dest()_方法傳入的路徑參數之間的關系。　　_gulp.dest(path)_生成的文件路徑是我們傳入的_path_參數后面再加上_gulp.src()_中有通配符開始出現的那部分路徑。例如：
var gulp = reruire('gulp');
//有通配符開始出現的那部分路徑為 **/*.js
gulp.src('script/**/*.js')
.pipe(gulp.dest('dist')); //最后生成的文件路徑為 dist/**/*.js
//如果 **/*.js 匹配到的文件為 jquery/jquery.js ,則生成的文件路徑為 dist/jquery/jquery.js
　　用gulp.dest()把文件流寫入文件后，文件流仍然可以繼續使用。

3.watch

gulp.watch()用來監視文件的變化，當文件發生變化后，我們可以利用它來執行相應的任務，例如文件壓縮等。其語法為

gulp.watch(glob[, opts], tasks);
glob 為要監視的文件匹配模式，規則和用法與gulp.src()方法中的glob相同。 opts 為一個可選的配置對象，通常不需要用到。 tasks 為文件變化后要執行的任務，為一個數組。

gulp.task('uglify',function(){
//do something
});
gulp.task('reload',function(){
//do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);
　　gulp.watch()還有另外一種使用方式：

gulp.watch(glob[, opts, cb]);
glob和opts參數與第一種用法相同;

cb參數為一個函數。每當監視的文件發生變化時，就會調用這個函數,并且會給它傳入一個對象，該對象包含了文件變化的一些信息，type屬性為變化的類型，可以是added,changed,deleted；path屬性為發生變化的文件的路徑。

gulp.watch('js/**/*.js', function(event){
console.log(event.type); //變化類型 added為新增,deleted為刪除，changed為改變
console.log(event.path); //變化的文件的路徑
});