使用Gulp構建前端自動化

阿新 • • 發佈：2019-02-02

Gulp簡介

gulp是前端開發過程中一種基於流的程式碼構建工具，是自動化專案的構建利器；她能自動化地完成 javascript、coffee、sass、less、html/image、css等檔案的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。在實現上，她借鑑了Unix作業系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。
gulp

特點：
- 易於使用：通過程式碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理。
- 構建快速：利用 Node.js 流的威力，你可以快速構建專案並減少頻繁的 IO 操作。
- 易於學習：通過最少的 API，掌握gulp毫不費力，如同一系列流管道。
- 外掛豐富：gulp 嚴格的外掛指南確保外掛如你期望的那樣簡潔高質得工作。

安裝

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

npm install -g gulp

全域性安裝gulp後，還需要在每個要使用gulp的專案中都單獨安裝一次。把目錄切換到你的專案資料夾中，然後在命令列中執行：

npm install gulp

如果想在安裝的時候把gulp寫進專案package.json檔案的依賴中，則可以加上–save-dev：

npm install --save-dev gulp

這樣就完成了gulp的安裝，接下來就可以在專案中應用gulp了。

使用

第一步：建立gulpfile.js檔案

gulp需要一個檔案作為它的主檔案，這個檔案就是gulpfile.js。新建一個檔名為gulpfile.js的檔案，然後放到你的專案目錄中。之後要做的事情就是在gulpfile.js檔案中定義任務。下面是一個最簡單的gulpfile.js檔案內容示例，它定義了一個預設的任務。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

第二步：執行gulp任務

要執行gulp任務，只需切換到存放gulpfile.js檔案的目錄，然後在命令列中執行gulp命令就行了，gulp後面可以加上要執行的任務名，例如gulp task1，如果沒有指定任務名，則會執行任務名為default的預設任務。

常用方法

src()

gulp.src()方法正是用來獲取流的，但要注意這個流裡的內容不是原始的檔案流，而是一個虛擬檔案物件流，這個虛擬檔案物件中儲存著原始檔案的路徑、檔名、內容等資訊。其語法為：

gulp.src(globs[, options]);

globs引數是檔案匹配模式(類似正則表示式)，用來匹配檔案路徑(包括檔名)，當然這裡也可以直接指定某個具體的檔案路徑。當有多個匹配模式時，該引數可以為一個數組;型別為String或 Array.

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

desk()

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()把檔案流寫入檔案後，檔案流仍然可以繼續使用。

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); //變化的檔案的路徑
});

task()

gulp.task()方法用來定義任務，內部使用的是Orchestrator(用於排序、執行任務和最大併發依賴關係的模組)，其語法為：

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

name 為任務名；

deps 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數；

fn 為任務函式，任務執行的程式碼都寫在裡面。該引數也是可選的。

當你定義一個簡單的任務時，需要傳入任務名字和執行函式兩個屬性。

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

執行gulp greet的結果就是在控制檯上打印出“Hello world”。

你也可以定義一個在gulp開始執行時候預設執行的任務，並將這個任務命名為default：

gulp.task('default', function () {
   // Your default task
});

當有多個任務時，可以通過任務依賴來控制任務的執行順序。

例如執行one,two,three這三個任務，那我們就可以定義一個空的任務，然後把那三個任務當做這個空的任務的依賴就行了：

//只要執行default任務，就相當於把one,two,three這三個任務執行了
gulp.task('default',['one','two','three']);

如果任務相互之間沒有依賴，任務就會按你書寫的順序來執行，如果有依賴的話則會先執行依賴的任務。但是如果某個任務所依賴的任務是非同步的，就要注意了，gulp並不會等待那個所依賴的非同步任務完成，而是會接著執行後續的任務。例如：

gulp.task('one',function(){
  //one是一個非同步執行的任務
  setTimeout(function(){
    console.log('one is done')
  },5000);
});

//two任務雖然依賴於one任務,但並不會等到one任務中的非同步操作完成後再執行
gulp.task('two',['one'],function(){
  console.log('two is done');
});

上面的例子中執行two任務時，會先執行one任務，但不會去等待one任務中的非同步操作完成後再執行two任務，而是緊接著執行two任務。所以two任務會在one任務中的非同步操作完成之前就執行了。

那如果我們想等待非同步任務中的非同步操作完成後再執行後續的任務，該怎麼做呢？

有三種方法可以實現：

第一：在非同步操作完成後執行一個回撥函式來通知gulp這個非同步任務已經完成,這個回撥函式就是任務函式的第一個引數。

gulp.task('one',function(cb){ //cb為任務函式提供的回撥，用來通知任務已經完成
  //one是一個非同步執行的任務
  exec(function(){
    console.log('one is finish');
    cb();  //執行回撥，表示這個非同步任務已經完成
  },5000);
});

//這時two任務會在one任務中的非同步操作完成後再執行
gulp.task('two',['one'],function(){
  console.log('two is finish');
});

第二：定義任務時返回一個流物件。適用於任務就是操作gulp.src獲取到的流的情況。

gulp.task('one',function(cb){
  var stream = gulp.src('client/**/*.js')
      .pipe(exec()) //exec()中有某些非同步操作
      .pipe(gulp.dest('build'));
    return stream;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});

第三：返回一個promise物件，例如

var Q = require('q');
gulp.task('one', function() {
  var deferred = Q.defer();

  // 執行非同步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);
  return deferred.promise;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});

run()

gulp.run()表示要執行的任務。可能會使用單個引數的形式傳遞多個任務。如下程式碼：

gulp.task('end',function(){
    gulp.run('task1','task3','task2');
});

注意：任務是儘可能多的並行執行的，並且可能不會按照指定的順序執行。

常用外掛

自動載入

gulp-load-plugins這個外掛能自動幫你載入package.json檔案裡的gulp外掛。例如假設package.json檔案裡的依賴是這樣的:

{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}

然後我們可以在gulpfile.js中使用gulp-load-plugins來幫我們載入外掛：

var gulp = require('gulp');
//載入gulp-load-plugins外掛，並馬上執行它
var plugins = require('gulp-load-plugins')();

然後我們要使用gulp-rename和gulp-ruby-sass這兩個外掛的時候，就可以使用plugins.rename和plugins.rubySass來代替了,也就是原始外掛名去掉gulp-字首，之後再轉換為駝峰命名。

重新命名

gulp-rename外掛用來重新命名檔案流中的檔案。用gulp.dest()方法寫入檔案時，檔名使用的是檔案流中的檔名，如果要想改變檔名，那可以在之前用gulp-rename外掛來改變檔案流中的檔名。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");

gulp.task('rename', function () {
    gulp.src('src/1.js')
        .pipe(uglify())           //壓縮
        .pipe(rename('1.min.js')) //會將1.js重新命名為1.min.js
        .pipe(gulp.dest('js'));   // 壓縮後的路徑
});

js檔案壓縮

gulp-uglify外掛用來壓縮js檔案。

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

gulp.task('minify-js', function () {
    gulp.src('src/*.js')             // 要壓縮的js檔案
        .pipe(uglify())              // 使用uglify進行壓縮
        .pipe(gulp.dest('dist/js'));

css檔案壓縮

gulp-minify-css外掛用來壓縮css檔案。

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");

gulp.task('minify-css', function () {
    gulp.src('src/*.css')     // 要壓縮的css檔案
        .pipe(minifyCss())    // 壓縮css
        .pipe(gulp.dest('dist/css'));
});

html檔案壓縮

gulp-minify-html外掛用來壓縮html檔案。

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");

gulp.task('minify-html', function () {
    gulp.src('src/*.html')      // 要壓縮的html檔案
        .pipe(minifyHtml())     // 壓縮
        .pipe(gulp.dest('dist/html'));
});

js程式碼檢查

使用gulp-jshint外掛，用來檢查js程式碼。

var gulp = require('gulp'),
    jshint = require("gulp-jshint");

gulp.task('jsLint', function () {
    gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter()); // 輸出檢查結果
});

檔案合併

gulp-concat外掛，用來把多個檔案合併為一個檔案,我們可以用它來合併js或css檔案等。

var gulp = require('gulp'),
    concat = require("gulp-concat");
gulp.task('concat', function () {
    gulp.src('src/*.js')          // 要合併的檔案
        .pipe(concat('all.js'))   // 合併匹配到的js檔案並命名為 "all.js"
        .pipe(gulp.dest('dist/js'));
});

圖片壓縮

gulp-imagemin外掛來壓縮jpg、png、gif等圖片。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png圖片壓縮外掛
gulp.task('default', function () {
    return  gulp.src('src/images/*')
                .pipe(imagemin({
                    progressive: true,
                    use: [pngquant()] //使用pngquant來壓縮png圖片
                }))
                .pipe(gulp.dest('dist'));
});

自動重新整理

使用gulp-livereload外掛，當代碼變化時，它可以幫我們自動重新整理頁面。

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
gulp.task('less', function() {
    gulp.src('less/*.less')
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(livereload());
});
gulp.task('watch', function() {
  livereload.listen(); //要在這裡呼叫listen()方法
  gulp.watch('less/*.less', ['less']);
});