Gulp自动化构建流程-优快云博客

gulp.src(globs[,options])

globs 类型：String或Array

options 类型：Object

options.buffer 类型：Boolean，默认值：true

options.read 类型：Boolean，默认值：true

options.base 类型：String，默认值：true

// 匹配'src/js/files/file.js' 并且将‘base’解析为‘src/js’
gulp.src('src/js/*.js')
  .pipe(minify())
  .pipe(gulp.dest('build')); // 写入 ‘build/files/file.js’复制代码

// 匹配除了build,images,node_modules目录，根目录下所有的html与php文件
gulp.src(['./**/*.{html, php}', '!{build, images, node_modules}/**'])
  .pipe(minify())
  .pipe(gulp.dest('build'))复制代码

// 匹配'src/js/files/file.js' 并且将‘base’解析为‘src’
gulp.src('src/js/**/*.js', { base: 'src' })
  .pipe(minify())
  .pipe(gulp.dest('build')) // 写入 ‘/js/build/files/file.js’复制代码

gulp.dest(globs[,options])

可以通过pipe输入到当前目录，也可以通过pipe输出到目标文件。如果该文件夹不存在，将会自动创建它。

path 类型：String or Funcition

options 类型：Object

options.cwd 类型：String 默认值：process.cwd()

options.mode 类型：String 默认值：0777

gulp.src('./src/js/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build'))
  .pipe(minify())
  .pipe(gulp.dest('./build/dist'))复制代码

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

name 任务名字，不要有空格

deps 类型：Array

一个包含任务列表的数组，这些任务会在当前任务前完成。如例：taskname会在name1，task1，name2，task2完成后完成。

fn 该函数定义了task所要执行的操作

gulp.task('taskname', ['name1', 'task1', 'name2', 'task2'], function() {
    gulp.src('').pipe(someplugin()).pipe(gulp.dest('./build'));
});复制代码

异步任务支持：

支持callback

// 在shell中执行一个命令
var exec = require('child_process').exec;
gulp.task('task1', function (cb){
    // 编译task1
    exec('task1 build', function (err) {
        if (err) retrun cb(err); // 返回 error
        cb(); // 完成task1
    })
});复制代码

返回一个steam

gulp.task('sometask', function (){
    var stream = gulp.src('./js/**/*.js')
        .pipe(minify())
        .pipe(gulp.dest('build'));
    return stream;
});复制代码

返回一个promise

var Q = require('q');

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

    // 执行异步的操作
    setTimeout(function (){
        deferred.resolve();
    });
    return deferred.promise;
});复制代码

默认，task以最大的并发数执行，一次性执行所有task不做任何等待。如何创建一个序列化task队列

var gulp = require('gulp');
// 返回一个callback，系统可以知道它什么时候完成
gulp.task('one', function (cb){
    cb(err); // 如果err不是null或undefined，则会停止执行，这样代表执行失败了
});

// 定义一个依赖的task必须在这个task执行之前完成
gulp.task('two', ['one'], function (){
    // 'one'完成
});

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

复制代码

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

监听文件，并在文件改动时，返回一个EventEmitter来发射change事件。

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

glob 类型：String or Array

opts 类型：Object

tasks 类型：Array

var watcher = gulp.watch('js/**/*.js', ['uglify', 'reload']);
watcher.on('change', function (event){
    console.log(event.path + '' + event.type);
});复制代码

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

glob 类型：String or Array

opts 类型：Object

cb(event) 类型：Function

gulp.watch('js/**/*.js', function (event){
    console.log(event.path + '' + event.type);
});复制代码

event.type 类型：String 发生的变动的类型：added，changed或者deleted

event.path 类型：String 触发该事件的文件路径

常用插件：

gulp-rename 文件重命名

var rename = require('gulp-rename');
gulp.src("./src/main/text/hello.txt") 
  .pipe(rename("main/text/ciao/goodbye.md")) 
  .pipe(gulp.dest("./dist"));    // ./dist/main/text/ciao/goodbye.md
复制代码

gulp-uglify 文件压缩

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('compress', function (){
    return gulp.src('lib/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});复制代码

gulp-concat 文件合并

var concat = require('gulp-concat');
gulp.task('scripts', function (){
    return gulp.src('./lib/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/'));
});复制代码

gulp-sourcemaps 压缩代码位置标记

var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function (){
    gulp.src('src/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(plugin1())
        .pipe(plugin2())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist'));
});复制代码

gulp-sass 编译sass

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('sass', function (){
    return gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function(){
    gulp.watch('./sass/**/*.scss', ['sass']);
});复制代码