gulp

1、gulp簡介

    gulp是一個自動化構建工具。在開發過工程中，可以使用gulp對項目進行自動構建，大大提升工做效率。

2、安裝gulp

    在安裝gulp以前先要確認已經正確安裝了node.js，而後在項目根目錄下安裝gulp：

    $ npm install gulp

3、gulp函數接口介紹

    在編寫gulp配置文件gulpfile以前，須要先了解常見的函數接口：

1. gulp.src()

    gulp的工做過程是這樣的，首先經過gulp.src()獲取咱們想要處理的文件的stream（文件流）；而後，經過.pipe方法將stream導入到引用的gulp插件中進行相應的處理；最後經過gulp.dest()方法將處理後的流寫入到文件中。

    從gulp工做過程當中能夠看到，gulp.src()主要用來從文件中獲取文件流。gulp.dest()函數原型以下：

gulp.src(globs[, options]

    globs是文件的匹配路徑和匹配形式。下面列舉了部分經常使用的匹配形式：

（1）js/test.js    //精確匹配文件

（2）js/*.js        //匹配js目錄下全部後綴爲.js的文件

（3）js/**/*.js   //匹配js目錄及其子目錄下全部後綴爲.js的文件

（4）！js/test.js //從匹配結果中排出js目錄下的test.js文件

 

 

語法：gulp.src(globs[, options])

• globs：文件匹配模式(相似正則表達式)，用來匹配文件路徑(包括文件名)
• options：爲可選參數。一般狀況下咱們不須要用到

gulp.src('**/*.js')

 

• 1

匹配模式

Gulp 內部使用了 node-glob 模塊來實現其文件匹配功能

單匹配模式

匹配符	code	匹配	不匹配	備註
*	*	a.b， x.y， abc， abc/	a/b.js	不匹配/，除非/出如今末尾
	*.*	a.b， x.y	abc	匹配全部帶後綴的文件
	*/*/*.js	a/b/c.js， x/y/z.js	a/b.js， a/b/c/d.js	匹配固定層級目錄
**	**	abc， a/b， a/b.js， a/b/c， a/b/c.js		匹配全部的目錄和文件
	**/*.js	a.js， a/b.js， a/b/c.js		匹配全部目錄下的 .js 文件
	a/**/z	a/z， a/b/z， a/b/c/z， a/b/c/d/z
	a/**b/z	a/b/z， a/nb/z	a/c/nb/z，	** 單獨出現才能匹配多級目錄
?	?.js	a.js， b.js， c.js		佔位符匹配，不匹配 /
	a??	a.b， abc	ab/	佔位符與字符搭配使用
[]	[abc].js	a.js， b.js， c.js	ab.js， xyz.js	整個 [] 只匹配一個字符
	[^abc].js [!abc].js	x.js， y.js	a.js， b.js， c.js	排除匹配字符

多匹配模式（同時使用多種匹配）

1. 類正則

表達式	備註
!(pattern|pattern|pattern)	匹配任何與括號中給定的任一模式都不匹配的
?(pattern|pattern|pattern)	匹配括號中給定的任一模式0次或1次，相似於js正則中的 (pattern|pattern|pattern)?
+(pattern|pattern|pattern)	匹配括號中給定的任一模式至少1次，相似於js正則中的 (pattern|pattern|pattern)+
*(pattern|pattern|pattern)	匹配括號中給定的任一模式0次或屢次，相似於js正則中的 (pattern|pattern|pattern)*
@(pattern|pattern|pattern)	匹配括號中給定的任一模式1次，相似於js正則中的 (pattern|pattern|pattern)

2. 數組

• 使用數組匹配多種模式

gulp.src(['js/*.js', 'css/*.css', '*.html'])

 

• 1

• 使用數組 + 排除模式
  排除模式不能出如今數組的第一個元素中

gulp.src([*.js,'!b*.js']) // 匹配全部js文件，但排除掉以b開頭的js文件
gulp.src(['!b*.js',*.js]) // 不排除任何文件，由於排除模式不能出如今數組的第一個元素中

 

• 1
• 2

3. 展開模式

以 {} 做爲定界符，根據它裏面的內容，會展開爲多個模式，
最後匹配的結果爲全部展開的模式相加起來獲得的結果 !
1. a{b, c}d 展開爲：abc，acd
2. a{b,}c 展開爲：abc，ac
3. a{0..3}c 展開爲：a0c，a1c，a2c
4. a{b, c{d, e}f}g 展開爲：abg，acdfg，acefg
5. a{b, c}d{e, f}g 展開爲：abdeg，acdeg，abdeg，abdfg

 

2. gulp.task()

    gulp.task()函數用來構建任務。函數原型爲：

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

    name是所構建的任務名稱。fn是任務所要執行的函數，gulp具體的工做過程是在fn中進行的。示例：

var webpack = require('gulp-webpack');
var config = require('./webpack.config');
gulp.task('webpack', function() {
    return webpack(config)
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

    上面的代碼是我在項目中使用的部分。該部分是webpack與gulp的聯合使用，第一次看到別人用時，感受發現了新大陸。task參數function中webpack會首先執行同一目錄下的webpack.config.js配置文件，對代碼進行模塊打包；而後，返回打包後的全部文件的文件流；文件流經過pipe進入到uglify插件後進行壓縮；最後，文件流經過gulp.dest寫入到設置的目錄下。

3.gulp.dest()

    gulp.dest()是對文件流的輸出進行設置。函數原型爲：

gulp.dest(path[, options])

    path是文件輸出路徑設置。注意：path只能生成文件的目錄，不能生成文件的名稱，不能生成文件的名稱，不能生成文件的名稱，不能生成文件的名稱，重要的事說四遍。而最終生成的文件的名稱是由gulp.src傳入的文件名決定。下面會由示例的。

    文件最終生成的路徑也須要注意：

（1）若是gulp.src(path)中的path帶有通配符，則生成的路徑由gulp.dest(path_dest)中的path_dest代替path通配符前面的部分組成。例如：

gulp.src('js/*/test.js')
//假設匹配到的文件爲js/source/test.js
.pipe(gulp.dest('dist')); //最終生成的文件爲 dist/source/test.js

（2）若是gulp.src(path)中的path沒有帶通配符，則生成的路徑由gulp.dest(path_dest)中的path_dest與gulp.src引入的文件名組成。例如：

gulp.src('js/test.js')
.pipe(gulp.dest('dist')); //最終生成的文件爲 dist/test.js

4、經常使用的gulp插件

1. gulp-uglify插件

    引入：

var uglify = require('gulp-uglify');

    做用：對js文件流進行壓縮。

gulp.task('server_test', function() {
    return gulp.src(server/app.js)
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

    上面代碼中的uglify()會對流過它的js數據流進行壓縮，而後有gulp.dest寫入到js目錄下。

2. gulp-less插件

    引入：

var less = require('gulp-less');

    做用：對less文件流進行壓縮

gulp.task('server_test', function() {
    return gulp.src(server/device.less)
        .pipe(less())
        .pipe(gulp.dest('./dist/less'));
});

    上面代碼中的less()會對流過它的less數據流進行壓縮，而後有gulp.dest寫入到less目錄下。

3. gulp-minify-css插件

    引入：

var minifyCSS = require('gulp-minify-css');

    做用：對css文件流進行壓縮

gulp.task('server_test', function() {
    return gulp.src(server/control.css)
        .pipe(minifyCSS())
        .pipe(gulp.dest('./dist/css'));
});

    上面代碼中的minifyCSS()會對流過它的css數據流進行壓縮，而後有gulp.dest寫入到css目錄下。

    gulp中有不少插件，具體根據須要來選擇。

要想使用好gulp.dest()這個方法，就要理解給它傳入的路徑參數與最終生成的文件的關係。
gulp的使用流程通常是這樣子的：首先經過gulp.src()方法獲取到咱們想要處理的文件流，而後把文件流經過pipe方法導入到gulp的插件中，最後把通過插件處理後的流再經過pipe方法導入到gulp.dest()中，gulp.dest()方法則把流中的內容寫入到文件中，這裏首先須要弄清楚的一點是，咱們給gulp.dest()傳入的路徑參數，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，它生成文件的文件名使用的是導入到它的文件流自身的文件名，因此生成的文件名是由導入到它的文件流決定的，即便咱們給它傳入一個帶有文件名的路徑參數，而後它也會把這個文件名當作是目錄名，例如：

1 var gulp = require('gulp');
2 gulp.src('script/jquery.js')
3     .pipe(gulp.dest('dist/foo.js'));
4 //最終生成的文件路徑爲 dist/foo.js/jquery.js,而不是dist/foo.js

要想改變文件名，可使用插件gulp-rename

下面說說生成的文件路徑與咱們給gulp.dest()方法傳入的路徑參數之間的關係。 
gulp.dest(path)生成的文件路徑是咱們傳入的path參數後面再加上gulp.src()中有通配符開始出現的那部分路徑。例如：

1 var gulp = reruire('gulp');
2 //有通配符開始出現的那部分路徑爲 **/*.js
3 gulp.src('script/**/*.js')
4     .pipe(gulp.dest('dist')); //最後生成的文件路徑爲 dist/**/*.js
5 //若是 **/*.js 匹配到的文件爲 jquery/jquery.js ,則生成的文件路徑爲 dist/jquery/jquery.js

 1 gulp.src('script/avalon/avalon.js') //沒有通配符出現的狀況
 2     .pipe(gulp.dest('dist')); //最後生成的文件路徑爲 dist/avalon.js
 3 
 4 //有通配符開始出現的那部分路徑爲 **/underscore.js
 5 gulp.src('script/**/underscore.js')
 6     //假設匹配到的文件爲script/util/underscore.js
 7     .pipe(gulp.dest('dist')); //則最後生成的文件路徑爲 dist/util/underscore.js
 8 
 9 gulp.src('script/*') //有通配符出現的那部分路徑爲 *
10     //假設匹配到的文件爲script/zepto.js    
11     .pipe(gulp.dest('dist')); //則最後生成的文件路徑爲 dist/zepto.js

經過指定gulp.src()方法配置參數中的base屬性，咱們能夠更靈活的來改變gulp.dest()生成的文件路徑。 
當咱們沒有在gulp.src()方法中配置base屬性時，base的默認值爲通配符開始出現以前那部分路徑，例如：

 1 gulp.src('app/src/**/*.css') //此時base的值爲 app/src
 2 //上面咱們說的gulp.dest()所生成的文件路徑的規則，其實也能夠理解成，用咱們給gulp.dest()傳入的路徑替換掉gulp.src()中的base路徑，最終獲得生成文件的路徑。
 3 
 4 gulp.src('app/src/**/*.css') //此時base的值爲app/src,也就是說它的base路徑爲app/src
 5      //設該模式匹配到了文件 app/src/css/normal.css
 6     .pipe(gulp.dest('dist')) //用dist替換掉base路徑，最終獲得 dist/css/normal.css 因此改變base路徑後，gulp.dest()生成的文件路徑也會改變
 7 
 8 gulp.src(script/lib/*.js) //沒有配置base參數，此時默認的base路徑爲script/lib
 9     //假設匹配到的文件爲script/lib/jquery.js
10     .pipe(gulp.dest('build')) //生成的文件路徑爲 build/jquery.js
11 
12 gulp.src(script/lib/*.js, {base:'script'}) //配置了base參數，此時base路徑爲script
13     //假設匹配到的文件爲script/lib/jquery.js
14     .pipe(gulp.dest('build')) //此時生成的文件路徑爲 build/lib/jquery.js    

注意：用gulp.dest()把文件流寫入文件後，文件流仍然能夠繼續使用。

 

使用gulp-htmlmin壓縮html，能夠壓縮頁面javascript、css，去除頁面空格、註釋，刪除多餘屬性等操做。

 1 var gulp = require('gulp'),
 2     htmlmin = require('gulp-htmlmin');
 3  
 4 gulp.task('testHtmlmin', function () {
 5     var options = {
 6         removeComments: true,//清除HTML註釋
 7         collapseWhitespace: true,//壓縮HTML
 8         collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
 9         removeEmptyAttributes: true,//刪除全部空格做屬性值 <input id="" /> ==> <input />
10         removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
11         removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
12         minifyJS: true,//壓縮頁面JS
13         minifyCSS: true//壓縮頁面CSS
14     };
15     gulp.src('src/html/*.html')
16         .pipe(htmlmin(options))
17         .pipe(gulp.dest('dist/html'));
18 });