gulp基礎和經常使用插件介紹

前提：前端工程化是現在前端團隊規範化管理項目和代碼的概念，而前端工程化中每每是離不開前端自動化或打包工具這兩種工具。本文將詳細介紹其中一種經常使用的前端自動化工具---gulp.js

- 入門：

安裝方式：

全局安裝： npm install --g gulp
  局部（項目安裝）： npm install --save-dev gulp

gulp配置文件：

在項目根目錄下建立一個gulpfile.js文件，其中default任務爲主任務，其餘爲功能任務；
語法：

var gulp = require('gulp');
gulp.task('default',function(){...});

運行方式：

在命令行中直接輸入gulp運行，或者在webstorm中在對應的gulpfile.js點中，而後右鍵，選擇show gulp task方式就能運行；

- gulp的API：

一）gulp.src方法：

定義：該方法會匹配對應的文件，並以虛擬文件流（包含路徑，文件名，內容）的形式返回；

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

特色：由於返回的文件流是相似於Readable Streams的形式，因此能夠利用pipe管道的方式傳輸，處理文件流。

參數介紹：

a）globs：能夠理解成一種相似於正則表達式的匹配模式，其值能夠爲匹配形式，文件路徑，或者文件路徑數組。
*：匹配任何字符串但不識別路徑分隔符（‘/’）

eg： gulp.src('./build/*.js')   匹配build文件中全部js文件

**：匹配任何字符串包括‘/’

eg：gulp.src('**.js')  匹配任何路徑下的js文件

[...] ： 枚舉

eg:  gulp.src('[abc].js')     匹配a.js或者b.js或者c.js

[!...] : 枚舉中括號中之外的一切字符串

eg：gulp.src('[!abc].js')    匹配d.js等等js文件

? : 職匹配一個字符串

eg：gulp.src('?.js')   匹配a.js等等js文件

b）option：裏面有buffer，read，base配置項，其中base項是關於文件流保存的路徑相關（具體放在dest方式中闡述）

二）gulp.dest方法：

定義：將文件流寫入到指定的路徑文件中，並繼續輸出該文件流；
語法：gulp.dest(path [,option])
注意事項：
a)文件流寫入的文件名只能由流入的文件流定義；
b）path是路徑，不能是文件名；
c）src中base項默認是匹配符以前的字符串路徑，但也能夠人爲設置，例子闡述：

gulp.src('a/b/*/[ab].js')
    .pipe(gulp.dest('./build'))

解釋：默認base爲a/b，塞進文件流的文件名爲*/[ab].js，因此新建的文件的路徑爲./build/*/[ab].js

gulp.src('a/b/*/c/d.js',{base:'a'})
    .pipe(gulp.dest('./build'))

解釋：base現是a，塞進文件流的文件名爲b/*/c/d.js,因此新建的文件路徑爲./build/b/*/c/d.js

d）dest方法輸出的文件流也能夠被pipe傳輸；

三）gulp.task方法：

定義： 在gulp中定義一個任務，其中主任務爲default；
語法： gulp.task(name [,deps] ,fn)
參數：

name是任務名；
  deps是依賴的任務數組，是在當前任務以前執行的；
  fn：當前任務內容；

情景：
a) gulp.task('default',function(){...})：最簡單模式；
b）gulp.task('default',['A1','A2']):default是由A1,A2兩個任務組成的；
c）gulp.task('default', ['A1','A2'],function(){...}):先執行完A1,A2，再執行default任務；

question： 若任務列表A1,A2中，A1存在異步操做，則執行A2時，A1還極可能未執行完；
resolve：
A) fn任務函數能夠引進一個回調函數參數，該參數能夠告訴外界該任務是否執行完；

eg：   gulp.task('A1',function(cb){
           setTime(function(){
           console.log(1);
           cb();
           },2000);
        })
        gulp.task('A2',function(){console.log(2);})
        gulp.task('default',['A1','A2'],function(){
             console.log(3)
        })
        輸出結果爲：2 1 3

B）任務函數返回一個流對象，適用於gulp.src方法；

gulp.task('A',function(){
             return gulp.src('./a.js')
                        .pipe(插件)
          })
gulp.task('deafult',['A'],function(){...})

C)返回一個Promise對象；

gulp.task('A',function(){
            return new Promise( (res,rej) => {
            })
          })
gulp.task('default',['A']);

四）gulp.watch方法：

定義：該方法是用來監聽文件的變化；
語法一：gulp.watch(glob [,opts] , tasks)
語法二：gulp.watch(glob [,opts] , function(event){...})
event是一個事件對象；
event.type爲added（添加類型）；changed（改變類型）；deleted（刪除類型）
event.path:變化的文件路徑；

- 經常使用gulp插件：

gulp有不少插件，而本文列舉出一些經常使用的插件

• gulp-uglify插件

用途：用來壓縮js文件
用法：

var uglify = require('gulp-uglify');
gulp.task('uglifyJS',function(cb){
    gulp.src('./demo/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build'));
    cb();
});

• gulp-minify-css插件

用途：用來壓縮css文件
用法：

var minifyCss = require('gulp-minify-css');
gulp.task('minifyCss',function(cb){
    gulp.src('./demo/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('./build'));
    cb();
});

• gulp-minify-html插件

用途：合併html文件
用法：

var miniHtml = require('gulp-minify-html');
gulp.task('miniHtml',function(cb){
    gulp.src('./src/*.html')
        .pipe(miniHtml())
        .pipe(gulp.dest('./build'));
});

• gulp-connect插件

用途：自動刷新頁面
用法：

var connect = require('gulp-connect');
gulp.task('connect',function(){
    connect.server({
        root:'src',
        livereload:true,
    })
});
gulp.task('watchHtml',function(){
    gulp.watch('./src/*.html',function(){
        gulp.src('./src/*.html')
            .pipe(connect.reload());
    })
});

• gulp-jshint插件

用途：用來檢查js語法
用法：

var jshint = require('gulp-jshint');
gulp.task('checkJs',()=>{
    gulp.src('./src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter())
});

• gulp-concat插件

用途：合併多個js或者css文件
用法：

var concat = require('gulp-concat');
gulp.task('concat',()=>{
    gulp.src('./*/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./build'));
});

• gulp-rename:

定義;將文件更名；
語法：
a）rename（filename）:將文件直接改成指定文件名；
b）rename（{dirname：'A' ,basename：'B' ,prefix：'C-',suffix：'-D', extname：'.txt'}）:將文件名改成A/C-B-D.txt；
C）rename（function（path）{}）:path爲一個對象，包含B）中全部屬性；

var rename =require('gulp-rename');   
gulp.task('rename',()=>{              
    gulp.src('./demo/*.css')          
        .pipe(rename({                
            suffix:'.min',            
            extname:'.less'           
        }))                           
        .pipe(gulp.dest('./build'));  
})

參考文檔：
gulp文檔