自動構建工具Gulp

摘要：

　　 gulp與grunt同樣，都是自動構建工具。和grunt相比它更突出一個流的概念，任務是一個接一個執行的。今天就分享如何用gulp作自動化。

安裝：

　　gulp也是基於node環境，因此安裝gulp以前你須要安裝node.js。

　　 npm install -g gulp

只要在命令窗口中執行上面一行命令就完成安裝，這樣安裝的是全局安裝。在項目中通常是經過package.json中的devDependencies屬性來安裝。以下：

{
    "name": "",
    "version": "0.0.0",
    "description": "",
    "main": "gulpfile.js",
    "dependencies": {},
    "devDependencies": {
        "gulp": "~3.5.6"
    },
    "license": "ISC"
}

 

執行npm install就會將gulp安裝到當前項目中。

如何運行：

　　安裝完gulp以後，須要新建一個gulpfile.js文件，通常是在項目的根目錄，與package.json放在一塊。那gulpfile.js文件裏面到底寫什麼呢？固然是定義一些任務。以下：

var gulp = require('gulp');

gulp.task('default', function() {
  // 執行任務
});

 

而後在當前目錄中經過命令窗口執行gulp，default裏面的任務就會被執行。

配置參數：　　 

gulp.src(globs[, options])

　　加載文件，並將文件以流的方式傳到插件中，以下：

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

 

gulp首先會加載client/templates/下的全部jade文件，而後分別傳遞給jade插件、minify插件，而後輸出到build/minified_templates中。

globs

　　類型：String，Array

　　文件或者是路徑，多個文件以數組的形式。

options

　　類型：Object

　　gulp經過options將配置參數傳遞給node

options.buffer

　　類型：bool

　　默認值： false

　　是否將文件以流的方式返回，false設置文件內容以流的方式讀取，而且不緩存，對於大文件設置緩存將是很是有用的。

options.read

　　類型：bool

　　默認值：true　　

　　設置是否讀取文件，若是設置false將永遠不讀取文件

options.base

　　類型： String

　　設置輸出文件的根目錄，以下：

gulp.src('client/js/**/*.js') // Matches 'client/js/somedir/somefile.js' and resolves `base` to `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

　　輸出文件，能夠輸出到不一樣目錄下，若是目錄不存在就建立，以下：

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

path

　　類型： String，Function

　　設置輸出文件的路徑

options.cwd

　　類型： String

　　默認值： process.cwd()

　　輸出的文件夾，只有當路徑爲相對路徑時才起做用

options.mode

　　類型：String

　　默認值：0777

　　設置輸出文件的權限

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

定義一個任務，以下：

gulp.task('somename', function() {
  // Do stuff
});

name

任務名，調用任務是隻須要gulp.run(任務名)

deps

　　類型：Array

　　執行當前任務所須要依賴的任務，被依賴的任務會在當前任務執行以前執行。注意異步任務

fn

　　須要執行的任務都定義在此處

異步執行任務：

使用回調函數

// run a command in a 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
  });
});

 

返回一個文件流

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

 

使用promise

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // do async stuff
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

 

注意任務依賴關係，下面是一個例子：

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});

gulp.task('default', ['one', 'two']);

 

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

監聽文件，當文件發生變化時，定義的任務將會被執行。以下當js文件發生改變時會觸發change事件。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

 

或者：

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

 

　　

 實例：

下面是一個簡單的例子，實現js、css的壓縮合並。

package.json安裝模塊

{
    "name": "",
    "version": "0.0.0",
    "description": "",
    "main": "gulpfile.js",
    "dependencies": {},
    "devDependencies": {
        "gulp": "~3.5.6",
        "gulp-minify-css": "~0.3.0",
        "gulp-uglify": "^1.0.0",
        "gulp-concat": "~2.0.0",
        "gulp-rename": "^1.0.0"
    },
    "license": "ISC"
}

 

 gulpfile.js

var gulp = require('gulp');

// 加載模塊
var
    minifycss = require('gulp-minify-css'), // CSS壓縮
    uglify = require('gulp-uglify'),        // js壓縮
    concat = require('gulp-concat'),        // 合併文件
    rename = require('gulp-rename');        // 重命名


// 合併、壓縮、重命名css
gulp.task('min-styles', function() {
  gulp.src(['./static/css/*.css'])
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./static/build/css/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('./static/build/css'));
});

// 合併，壓縮js文件
gulp.task('min-javascripts', function() {
  gulp.src('./static/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./static/build/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('./static/build/js'));
});


// 定義develop任務發佈或者運行時使用
gulp.task('develop',function(){
  gulp.run('min-styles','min-javascripts');
});


// gulp命令默認啓動的就是default
gulp.task('default', function() {

  // 監聽.css文件,一旦有變化,馬上調用min-styles任務執行
  gulp.watch('./css/*.css', ['min-styles']);

  gulp.run('develop');
});

 在gulpfile.js文件目錄下，經過命令窗執行gulp，則default任務就會執行。