Gulp-5个基本方法

2017-05-24 星期三 丁酉年 四月廿九

【鸡年】乙巳月 辛亥日

宜：祭祀 沐浴 解除 破屋 坏垣

忌：行丧 安葬

Gulp有5个基本方法：src、dest、task、run、watch

1.Gulp.src()

gulp模块的src方法，用于产生数据流。它的参数表示索要处理的文件，一般有以下几种形式：

js/app.js：指定确切的文件名
js/*.js：某个目录所有后缀为js的文件
js/**/*.js：某个目录及其所有子目录中的所有后缀为js的文件
!js/app.js：除了js/app.js以后的所有文件
*.+(js|css)：匹配项目更目录下，所有后缀为js/css的文件

src方法的参数还可以是一个数组，用来指定多个成员：

gulp.src(['js/**/*.js', '!js/**/*.min.js']);

2.Gulp.dest()

gulp模块的dest方法，可以用来传递文件，同时写入文件到指定目录。可以重复的发送传递给它的数据，因此可以讲文件传送到多个目录中：

gulp.src('app/templates/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('/dist/templates'))
    .pipe(minify())
    .pipe(gulp.dest('/dist/minified_templates'));

3.Gulp.task()

gulp模块的task方法，用于定义具体的任务。它的第一个参数是人物名，第二个参数是任务函数。

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

gulp.task('minify', function() {
    gulp.src('app/*.html')
        .pipe(htmlmin({collapseWhitespace:true}))
        .pipe(gulp.dest('dist'))
});

上述创建了一个压缩html的任务，在命令行模式中使用下列命令继续执行

gulp minify

task方法还可以指定按顺序运行的一组任务：

gulp.task('build', ['css','js','imgs']);

上述代码先指定了 build 任务，它按次序由css、js、imgs三个任务组成。
ps:由于每个任务都是异步调用，所以没有办法保证js任务开始的时间，就是css任务结束的时间。
如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块：

gulp.task('css', ['minify'], function() {
    //代码
})

上面代码表明，css任务依赖minify任务，所以css一定会在minify运行完成后再运行。
如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp
命令，就会运行该任务：

gulp.task('default', function() {
    // your default task
})

4.Gulp.run()

gulp模块的run方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。
ps:任务是尽可能多的并行执行，并且可能不会按照指定的顺序执行。

gulp.run('scripts', 'copyfiles', 'builddocs');

gulp.run('scripts', 'copyfiles', 'builddocs', function(err) {
    // 所有任务完成，或者出发错误而终止
});

可以使用gulp.run在其他任务中运行任务。也可以在默认任务（default）中使用gulp.run组织多个更小的任务为一个大任务。

5.gulp.watch()

gulp模块的watch方法，用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务：

gulp.task('watch', function() {
    gulp.watch('app/tamplates/*.jade', ['build']);
});

上面代码指定，一旦templates目录下后缀为.jade的文件发生变化，就运行build任务。
watch方法也可以用毁掉函数，代替指定的任务：

gulp.watch('app/templates/*.jade',function(event){
    console.log('Event type:' + event.type);
    console.log('Event path:' + event.path);
});

另一种写法是watch方法所监控的文件发生变化时（修改，增加，删除文件），会出发change事件，可以对change事件指定回调函数：

var watcher = gulp.watch('app/templates/*.jade', ['build']);

gulp.on('change', function(event) {
    console.log('Event type:' + event.type);
    console.log('Event path:' + event.path);
});

除了change事件，watch方法还可以触发以下事件：

end：回调函数运行完毕后触发。

error：发生错误时触发。

ready：当开始监听文件时触发。

nomatch：没有匹配的监听文件时触发。

watcher对象还包含其他一些方法：

watcher.end()：停止watcher对象，不会再调用任务或回调函数。

watcher.files()：返回watcher对象监视的文件

watcher.add(glob)：增加所要监视的文件，它还可以附件第二个参数，表示回调函数。

watcher.remove(filepath)：从watcher对象中移走一个监视的文件。