自動化構建工具gulp

時間 2019-11-21

標籤自動化構建工具 gulp 欄目測試自動化简体版

原文原文鏈接

一、優勢

1.1 易於使用

經過代碼優於配置的策略，gulp讓簡單的任務簡單，複雜的任務可管理javascript

1.2 構建快速

利用node.js流的威力，你能夠快速構建項目並減小頻繁的IO操做css

1.3 插件高質

gulp嚴格的插件指南確保插件如你指望的那樣簡潔高質的工做html

1.4 易於學習

經過最少的API，掌握gulp絕不費力，構建工做盡在掌握：如同一系列流管道前端

二、gulp使用說明

2.1 安裝

在工程根目錄下進入cmdjava

初始化npm，在項目根目錄下新建package.json文件node

npm init

全局環境下安裝 gulp，且保存到package.json中shell

npm install gulp -g --save-dev

npm install module-name -save 自動把模塊和版本號添加到dependencies部分



npm install module-name -save-dev 自動把模塊和版本號添加到devdependencies部分

2.2 配置gulpfile.js

在項目根目錄下建立一個gulpfile.js文件，並進行相關配置npm

詳細的方法說明後面會提到json

2.2.1 引入gulp插件

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
watch = require('gulp-watch'),
clean = require('gulp-clean'),
minifycss = require('gulp-minify-css'),
prefixAndSuffix = require('gulp-prefix-suffix');

2.2.2 合併壓縮js

//合併JS文件到build/all.min.js
 gulp.task('combine', function(){
     return gulp.src(['src/**/*.js','!src/lib/**/*.js','!src/app.js','!src/main.js'])
                .pipe(jshint())
                .pipe(jshint.reporter('default'))
                .pipe(concat('all.min.js'))
                .pipe(prefixAndSuffix("define(['app'], function(app){","});"))
                .pipe(uglify())
                .pipe(gulp.dest('build'));
});

2.2.3 合併壓縮css

//合併JS文件到build/all.min.js
 gulp.task('combine', function(){
     return gulp.src(['src/**/*.js','!src/lib/**/*.js','!src/app.js','!src/main.js'])
                .pipe(jshint())
                .pipe(jshint.reporter('default'))
                .pipe(concat('all.min.js'))
                .pipe(prefixAndSuffix("define(['app'], function(app){","});"))
                .pipe(uglify())
                .pipe(gulp.dest('build'));
});

2.2.4 壓縮圖片

//合併壓縮CSS文件
 gulp.task('css', function(){
     return gulp.src(['src/**/*.css','!src/lib/**/*.css'])
                .pipe(concat('all.min.css'))
                .pipe(minifycss())
                .pipe(gulp.dest('build'));
});

2.2.4 壓縮圖片

gulp.task('images', function() {
     return gulp.src('src/images/**/*') 
                .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })) 
                .pipe(gulp.dest('dist/assets/img')) 
                .pipe(notify({ message: 'Images task complete' })); 
 
});

optimizationLevel設置爲3表示對全部來源的image進行壓縮處理，設置位5表示僅對新的或者有改動的image進行壓縮

2.2.5 清空build

//清空build
gulp.task('clean', function(){
    return gulp.src('build')
               .pipe(clean());
});

2.2.6 拷貝文件

對於沒有進行壓縮的html和lib中引用的第三方插件或庫框架和壓縮合並好的js，css，image等文件，要從開發目錄拷貝到工程運行目錄gulp

//拷貝html、圖片等到build
gulp.task('copyOther', function(){
    return gulp.src(['src/**/*','!src/**/*.js'])
               .pipe(gulp.dest('build'));
});
//拷貝lib文件夾
gulp.task('copyLib', function(){
     return gulp.src('src/lib/**/*.js')
                .pipe(gulp.dest('build/lib'));
});
//拷貝app.js和main.js
gulp.task('copyJs', function(){
    return gulp.src(['src/app.js','src/main.js'])
               .pipe(gulp.dest('build'));
});

2.2.7 文件改動監控

gulp.task('watch', function(){
     gulp.watch('src/**/*',['default']);
})

2.3 gulp模塊方法說明

gulp.task(name[, deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數

gulp.run(tasks...)：儘量多的並行運行多個task

gulp.watch(glob, fn)：當glob內容發生改變時，執行fn

gulp.src(glob)：置須要處理的文件的路徑，能夠是多個文件以數組的形式，也能夠是正則

gulp.dest(path[, options])：設置生成文件的路徑

glob：能夠是一個直接的文件路徑。他的含義是模式匹配。
gulp將要處理的文件經過管道（pipe()）API導向相關插件。經過插件執行文件的處理任務。

2.3.1 src()

gulp的src方法用於產生數據流，它的參數表示想要處理的文件，這些指定的文件會轉換爲數據流。參數的寫法通常有如下幾種形式。

js/app.js：指定確切的文件名。
js/*.js：某個目錄全部後綴名爲js的文件。
js/**/*.js：某個目錄及其全部子目錄中的全部後綴名爲js的文件。
!js/app.js：除了js/app.js之外的全部文件。
*.+(js|css)：匹配項目根目錄下，全部後綴名爲js或css的文件。

src方法的參數還能夠是一個數組，用來指定多個成員

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

2.3.2 dest()

dest方法將管道的輸出寫入文件，同時將這些輸出繼續輸出，因此能夠依次調用屢次dest方法，將輸出寫入多個目錄。若有目錄不存在，將會被新建

gulp.src('./client/templates/*.jade') 
    .pipe(jade()) 
    .pipe(gulp.dest('./build/templates')) 
    .pipe(minify()) 
    .pipe(gulp.dest('./build/minified_templates'));

dest方法還能夠接受第二個參數，表示配置對象

gulp.dest('build', { cwd: './app', mode: '0644' })

配置對象有兩個字段，cwd字段指定寫入路徑的基準目錄，默認是當前目錄；mode字段指定寫入目錄的權限，默認是0777.

2.3.3 task()

task方法用於定義具體的任務。它的第一個參數是任務名，第二個參數是任務函數

gulp.task('greet', function () {
   console.log('Hello world!'); 
});

task方法還能夠按指定順序執行一組任務

gulp.task('build', ['css', 'js', 'imgs']);

上面代碼先指定build任務，它由css、js、imgs三個任務所組成，task方法會併發執行這三個任務。注意，因爲每一個任務都是異步調用，因此沒有辦法保證js任務的開始運行的時間，正是css任務運行結束。

若是但願各個任務嚴格按次序運行，能夠把前一個任務寫成後一個任務的依賴模塊。

gulp.task('css', ['greet'], function () {
     // Deal with CSS here 
});

上面代碼代表，css任務依賴greet任務，因此css必定會在greet運行完成後再運行。

task方法的回調函數，還能夠接受一個函數做爲參數，這對執行異步任務很是有用。

// 執行shell命令 
var exec = require('child_process').exec; 
gulp.task('jekyll', function(cb) { 
// build Jekyll 
    exec('jekyll build', function(err) { 
        if (err) return cb(err); // return error 
        cb(); // finished task 
    }); 
});

若是一個任務的名字是default，就代表它是默認任務，在命令行直接輸入gulp命令，就會運行該任務

gulp.task('default', ['styles', 'jshint', 'watch']);

直接使用gulp，就會運行styles，jshint，watch三個任務

2.3.4 watch()

watch方法用於指定須要監控的文件，一旦這些文件發送變更，就運行指定任務

固然也能夠用回調函數代替指定任務

gulp.task('watch', function(){
    gulp.watch('src/**/*',['default']);
})
//或者
gulp.task('watch', function(){
    gulp.watch('src/**/*',function(){
        //do something
    });
})

另外一種寫法是watch方法所監控的文件發送變更時，可能會觸發一些事件，如：

change：文件發送變更時觸發

end：回調函數運行完畢時觸發

error：發生錯誤時觸發

ready：當開始監聽文件時觸發

nomatch：沒有匹配的監聽文件時觸發