使用Gulp.js來自動化你的任務

liuoliver 8年前發布 | 27K 次閱讀 JavaScript開發 gulp

來自： http://wwsun.github.io/posts/using-gulp-to-automate-your-tasks.html

作為開發者而言，我們需要經常確保自己使用了合適的開發工具來提高我們的開發效率。對于JavaScript的項目構建而言， Chris開發了Grunt，它極大的便利了項目的構建工作。本文將會介紹一個比Grunt更優雅的項目構建工具——Gulp。

Statement

作者： 景莊，Web開發者，主要關注JavaScript、Node.js、React、Docker等。

Gulp.js

和Grunt類似，Gulp也是一個JavaScript的任務運行器（task runner）。不過，Gulp是一個流式構建系統，它完全借助了Node的流文件操縱功能，在內存中完成構建工作。整個插件都是通過 pipe() 函數來賦予。

Gulp的最大特點在于流的使用，數據流能夠同故宮一系列的小函數來傳遞數據，這些函數會對數據進行修改，然后把修改后的數據傳遞給下一個函數。和Linux中的管道概念是一個意思。流可以相互鏈接。

注意，Gulp管道中的流不是操作Strings和Buffers的常規Node.js流，而是啟用 object mode 的流。 Gulp中的流發送的是vinyl文件對象。

有關Node中流的介紹，請參考官方文檔。

安裝Gulp

安裝Gulp非常的簡單，只要遵循下面三個步驟即可：

全局安裝Gulp
安裝Gulp到項目的 devDependencies 中
在項目根目錄創建 gulpfile.js 文件

$ npm install -g gulp $ npm install –save-dev gulp

我們安裝Gulp的工具插件用于可視化任務的執行過程：

$ npm install --save-dev gulp-util

在項目根目錄創建完 gulpfile.js 后，我們加入如下基礎代碼：

// grab our gulp packages
var gulp  = require('gulp'),
    gutil = require('gulp-util');

// create a default task and just log a message
gulp.task('default', function() {
  return gutil.log('Gulp is running!')
});

現在你可以通過 gulp 命令來啟動Gulp。你可以在項目的 package.json 文件中的 scripts 屬性中加入：

"gulp": "gulp"

Gulp使用手冊

Gulp是一個流式構建系統。它的流式特性意味著開發者

Gulp API主要包括4個頂級函數。如下

gulp.task(name, deps, fn) 定義任務
gulp.src(globs, [opt]) 指向我們想要操作的源文件
gulp.dest 指向輸出文件
gulp.watch 用于監視文件的變化

其中文文檔可以參考該鏈接。

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

用于定義Gulp任務。包括三個參數

name: 任務名，字符串
deps: 一組依賴任務的數組，它是可選的
fn: 執行任務的函數

gulp.task('mytask', function() {
  //do stuff
});

gulp.task('dependenttask', ['mytask'], function() {
  //do stuff after 'mytask' is done.
});

詳細內容請參考該鏈接。

gulp.src(globs[, options]) 和 gulp.dest(path[, options])

gulp.src 指向我們想要使用的文件。它的參數是globs和可選的選項對象。它使用 .pipe() 將輸出值鏈接（chaining）到其他插件中。

詳細內容請參考該鏈接

gulp.dest 指向我們想要寫入結果文件的輸出文件夾。

假如我們想要定義一個任務 copHtml 將輸入文件復制到輸出文件夾中，代碼如下：

gulp.task('copyHtml', function() {
  // copy any html files in source/ to public/
  gulp.src('source/*.html').pipe(gulp.dest('public'));
});

gulp.watch(glob[, opts], tasks)

和 gulp.task 類似， gulp.watch 也有一個可選的中間參數。 gulp.watch 返回的是一個發射（emits） change 事件的 EventEmitter 。

gulp.watch('source/javascript/**/*.js', ['jshint']);

匹配的任意文件如果發生了變化，就會自動觸發 jshint 任務。

詳細內容請參考該鏈接

常用任務

JShint

每次我們保存一個JS文件的時候就利用JSHint進行代碼檢查。我們需要如下插件：

$ npm install --save-dev gulp-jshint jshint-stylish

任務編寫如下：

// grab our packages
var gulp   = require('gulp'),
    jshint = require('gulp-jshint');

// define the default task and add the watch task to it
gulp.task('default', ['watch']);

// configure the jshint task
gulp.task('jshint', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
});

如果你要單獨的執行 jshint 任務，你可以使用如下命令：

$ gulp jshint

編譯Sass文件

Sass 是一個常用的CSS預處理語言，它用于增強CSS。我們需要安裝 gulp-sass ：

$ npm install --save-dev gulp-sass

任務實現如下：

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


/* jshint task would be here */

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('public/assets/stylesheets'));
});


/* updated watch task to include sass */

gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
  gulp.watch('source/scss/**/*.scss', ['build-css']);
});

我們還可以加入 gulp-sourcemaps 。Sourcemap是一種用于將處理過的、最小化過的、更改過的文件映射到源文件的強大功能。支持 gulp-sourcemaps 的插件列表可以參考該鏈接。

var gulp       = require('gulp'),
    jshint     = require('gulp-jshint'),
    sass       = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init())  // Process the original sources
      .pipe(sass())
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/stylesheets'));
});

如果你使用的是Less，那么可以使用 gulp-less 插件，使用起來也非常的簡單：

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

gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

JavaScript拼接和最小化

我們經常需要將多個文件合并在一起，或者是將一個大文件進行最小化（去除其中的空格等），借助gulp我們能夠很容易的做到這些。需要安裝如下依賴：

$ npm install --save-dev gulp-concat gulp-uglify

任務實現如下:

gulp.task('build-js', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('bundle.js'))
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/assets/javascript'));
});

插件

Gulp的插件列表你可以使用這個工具進行檢索。

gulp-load-plugins

gulp-load-plugins 是一個非常有用的插件，它能夠自動的從 package.json 中加載所有的Gulp插件，然后將它們附加到一個對象上。它的用法如下：

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

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

小結

在本文中我們只淺顯的探討了Gulp的使用。Gulp還能夠執行很多復雜的任務，因為Gulp依賴于你編寫代碼來實現這些任務。例如，我們可以自動化構建項目源文件，實現文件的檢查、拼接、最小化，然后在將構建后的項目自動部署到線上。通過Gulp你能夠快速而簡單的完成這些任務。有關Gulp的高級用法，你可以參考這篇博文。

References

本文由用戶 liuoliver 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1456573664687.html

JavaScript開發 gulp