gulp 使用指南

路某人發表於2018-10-15

gulp —— 任務自動管理工具

安裝

先在全域性安裝,再在本地專案安裝。

$ npm install -g gulp
$ npm install --save-dev gulp
複製程式碼

gulpfile.js

安裝完成後，接下來就是配置 gulpfile.js 檔案，我們將會在這裡定義任務列表。

const gulp = require('gulp'); // 引入 gulp 

gulp.task('default', () => {
  return gulp.src('./scr/**/*.js')
            .pipe(gulp.dest('./dist'))
})
複製程式碼

以上就是一個最簡單的任務，我們將 src 目錄下所有的 js 檔案通過 pipe(管道) 導流到 dist 目錄中，如果當前沒有此目錄，便會新建一個。

我們只要執行 gulp命令，即可完成任務。

gulp.task

gulp.task 用於建立一個 gulp 任務，可以接受以下引數：

  • 任務名稱(必選)
  • 任務函式(可選)或任務陣列(可選)。

定義一個任務，我們需要給這個任務起一個唯一的名字，當我們想要執行這個任務時，可以輸入以下命令

$ gulp 任務名
複製程式碼

當我們不加任務名進行執行時，即只輸入 gulp 時 ，會執行名為 default 的預設任務，如果沒有定義這個任務，將什麼也不做。

gulp.task() 的第二個引數可以是一個陣列，陣列中的值是任務名的集合，當執行此任務時，會先執行陣列中的任務。

const gulp = require('gulp');

gulp.task('script', () => {
  gulp.src('./src/**/*.js')
    .pipe(gulp.dest('./dist'))
})

gulp.task('css', () => {
  gulp.src('./src/**/*.css')
    .pipe(gulp.dest('./dist'))
})

gulp.task('copy',['script'], () => {
  gulp.src(copyPath)
    .pipe(gulp.dest('./dist'))
})

gulp.task('default', ['script','css']);
複製程式碼

在上面的例子中，執行 copy 任務之前，將會首先執行 script 任務；執行 default 命令時， 將會執行 script 和 css 任務。

但是，當任務中存在非同步操作時，下一個任務並不會等到上一個任務完成後再去執行。如下：

gulp.task('default', ['copy','script'])

gulp.task('script', () => {
  console.log('script');
})


gulp.task('copy', () => {
   console.log('copy1')
   setTimeout(() => {
     console.log('copy2');
   }, 3000);
})
複製程式碼

上面的例子中會先輸入copy1 ,接著輸出 script ,三秒後輸出 copy2。

如果希望 copy 執行結束後再執行 script,有三種方式。

  • 使用回撥函式作為引數，用於標記任務執行完畢

    // 新增依賴['copy']
gulp.task('script', ['copy'], () => {
  console.log('script');
})


gulp.task('copy', (cb) => {
   console.log('copy1')
   setTimeout(() => {
     console.log('copy2');
     // 標誌非同步執行結束
     cb();   
   }, 3000);
})
複製程式碼

  • 返回一個 Stream(適用於非同步操作 gulp.src 匯出的檔案)

    // 新增依賴['copy']
gulp.task('script', ['copy'], () => {
  console.log('script');
})

gulp.task('copy', () => {
  return gulp.src('./temp/*.js')
    // 非同步操作檔案流
    .pipe()
    .pipe(gulp.dest('./dist')
})
複製程式碼

  • 返回一個 promise 物件

    const Q = require('q'); //一個著名的非同步處理的庫 https://github.com/kriskowal/

// 新增依賴['copy']
gulp.task('script', ['copy'], () => {
  console.log('script');
})

const deferred = Q.defer();
console.log('copy1')
setTimeout(() => {
    console.log('copy2');
    deferred.resolve();
}, 3000);
return deferred.promise;

複製程式碼

gulp.src

gulp.src 是一個用來讀取檔案的 API 。

可以接受一個路徑字串或陣列作為引數來選擇所要讀取的檔案，並輸出一個可以被輸入到 plugins 的 Stream （檔案流）。

gulp 使用 node-glob 方式獲取匹配的檔案，通常，有以下幾種方式。

  • js/app.js 匹配 js 目錄下的 app.js 檔案。
  • js/*.js 匹配 js 目錄下所有以 .js 結尾的檔案。
  • js/**/*.js 匹配 js 目錄及其所有子目錄下以 .js 結尾的檔案。
  • !js/app.js 匹配 js 目錄下除 app.js 外的所有檔案。
  • css/*.{css,less,sass}（逗號後不要加空格） 匹配 css 目錄下以 .css , .less , .saas 結尾的檔案。

gulp.watch

gulp.watch 是一個用於監控檔案變化的 API 。

同 gulp.src ,它接受一個路徑字串或陣列作為第一個引數用於選擇將要監控檔案，第二個引數可以是一個任務列表陣列或者回撥函式。當監控到檔案變化時將會執行它們。

// 假設你已經有一個 script 任務。
gulp.task('watch', () => {
  gulp.watch('./temp/*.html',['script'])
})

複製程式碼

此時我們在啟動 watch 任務。

$ gulp watch
複製程式碼

現在，當我們的 ./temp/*.html 檔案發生變化，將會直接執行 script 任務。

假如第二個引數是一個回撥函式,

gulp.task('watch', (event) => {
  console.log(event); // event 包含 'added', 'changed', 'deleted' 三種型別
  
  // 下面可以進行其他的操作...
  //...
})
複製程式碼

另外，gulp.watch() 會返回一個 watcher 物件，可以通過這個物件監聽其他事件。

gulp.task('watch', () => {
  // watcher 物件
  const watcher = gulp.watch('./temp/*');  
  watcher.on('change', (event) => {
    console.log(event);
    console.log('has changed')
    
  })
  watcher.on('add', (event) => {
    console.log(event);
    console.log('has added')
  });
})
複製程式碼

plougins

我們通常會使用一些 npm 模組來方便實際開發。這些模組的使用方法也很簡單——通過管道流處理檔案。

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});
複製程式碼

在使用之前，我們只需要通過 package.json 將安裝到本地專案中。

在上面的例子中，我們對 js 目錄下的 .js 檔案依次進行了 jshint()、jshint.reporter()、uglify()、concat()、gulp.dest()操作。

以上就是關於 gulp 一些基本的使用，如有異議，歡迎指證。

參考：

  1. 再學一次gulp
  2. building-with-gulp

相關文章