gulp总结

安装

npm install gulp

新建gulpfile.js

gulpfile.js是gulp项目的配置文件。

运行gulp

命令行输入gulp default或gulp。
若想要执行单个任务，输入gulp <task name>。

插件

常用的一些插件
gulp-sass
功能：把 sass 编译为 css
gulp-uglify
功能：压缩（optimize）js 文件
gulp-rename
功能：重命名文件
gulp-concat
功能：合并文件。

APIs

gulp.src(globs[, options])

globs： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；
通配符路径匹配示例：

• “src/a.js”：指定具体文件；
• “*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；
• “**”：匹配0个或多个子文件夹 例：src/*/.js(包含src的0个或多个子文件夹下的js文件)；
• “{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
• “!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

options： 类型(可选)：Object，有3个属性buffer、read、base；

• options.buffer： 类型：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；
• options.read： 类型：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；
• options.base： 类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接

gulp.dest(path[, options])

path： 类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可；
options： 类型(可选)：Object，有2个属性cwd、mode；

• options.cwd： 类型：String 默认：process.cwd()：前脚本的工作目录的路径 当文件输出路径为相对路径将会用到；
• options.mode： 类型：String 默认：0777 指定被创建文件夹的权限；

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

task定义一个gulp任务；
name： 类型(必填)：String 指定任务的名称（不应该有空格）；
deps： 类型(可选)：StringArray，是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数；
fn： 类型(必填)：Function 该任务调用的插件操作；

当有多个任务时，需要知道怎么来控制任务的执行顺序，可以通过任务依赖来实现

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');
});
gulp.task('default',['one','two','three']);

如果想等待异步任务中的异步操作完成后再执行后续的任务，有三种方法可以实现：

第一：在异步操作完成后执行一个回调函数来通知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');
});

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

watch方法是用于监听文件变化，文件一修改就会执行指定的任务；
glob： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；
opts： 类型(可选)：Object 具体参看https://github.com/shama/gaze；
tasks： 类型(必填)：StringArray 需要执行的任务的名称数组；

gulp.run()

表示要执行的任务。可能会使用单个参数的形式传递多个任务。

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

注意：任务是尽可能多的并行执行的，并且可能不会按照指定的顺序运行。

var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var cleanCSS = require( 'gulp-clean-css' );
var less = require('gulp-less');
var concat = require('gulp-concat');
 
gulp.task( 'concat-file', function(){
  gulp.src( 'src/js/*.js' )
    .pipe( concat('all.min.js') )
    .pipe( uglify() )
    .pipe( gulp.dest( 'dist/js' ) );
} );
 
gulp.task('testLess', function () {
    //gulp.src('less/test/style.less')
    gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

gulp.task('watcher', function() {
    gulp.watch("src/scss/**/*.scss", ['sass']);
    gulp.watch("src/js/*.js", ['scripts']);
});

gulp.task('css-watch', ['concat-file'], function() {
    var watcher = gulp.watch('src/css/sass/**/*.scss', ['css']);    
    watcher.on('change', function(event) {
        console.log(event);
    });
});

gulp.task('default', ['watcher', 'css-watch']);

同步运行任务

因为任务是异步运行的，Gulp 便默认将并行运行所有任务；任务中的步骤也是异步的，因此各个步骤也是并行的。
gulp-sequence

var gulp = require('gulp');
var zip = require('gulp-zip');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var sequence = require('run-sequence');

gulp.task("copy-common1", function () {
    return gulp.src(['client/**/**', '!client/dev.html', '!client/index.hbs', 'build/**/**'])
        .pipe(rename(function (path) {
            path.dirname += '';
        }))
        .pipe(gulp.dest("./dist/pages"))
})
//清空dist目录
gulp.task("clean", function () {
    console.log('清空 dist 目录下的资源')
   return gulp.src('dist/*', {
        read: false
    })
     .pipe(clean({
        force: true
    }));
})
//生成生产war包
gulp.task("package", function () {
    gulp.src(['dist/**']).pipe(zip('dist.war')).pipe(gulp.dest('./'));
    console.info('package ok!');
});
gulp.task('runsequence', function (callback) {
    sequence('clean', 'copy-common1', 'package', callback)
});