gulp API的语法说明

gulp只有五个API方法: gulp.taskgulp.srcgulp.destgulp.watch,和gulp.run

gulp.task

注册任务,语法格式如下:

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

代码示例:

gulp.task('taskname', ['array', 'of', 'task', 'names'], function() {
  return gulp.src('filename')
    .pipe(...)
    .pipe(...)
    // until the last step
    .pipe(...);
});

在上面的代码示例中,演示了Gulp任务体的基本执行模式。

可以这么理解——首先获取要处理的文件,传递给下一个环节处理,然后把返回的结果继续传递给下一个环节…直到所有环节完成。

其中pipe就是stream模块里负责传递流数据的方法而已(不是gulp的方法),至于最开始的return则是把整个任务的stream对象返回出去,以便任务和任务之间可以依次传递执行。

下面的代码示例仅在控制台中打印“Hello gulp!”:

gulp.task('hello', function(){
  console.log('Hello gulp!');
});

默认task

默认task是指——当在命令行中仅敲入glup并回车就会被默认执行的任务。该任务约定命名为“default”:

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

gulp.src

指明源文件路径,语法格式如下:

gulp.src(globs[, options])

代码示例:

gulp.task('sass',  function() {
  return gulp.src('./scss/abc/somename.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist'));  // Writes: './dist/somename.css'
});

gulp.task('sass',  function() {
  return gulp.src('./scss/abc/somename.scss', {base: ''})
    .pipe(sass())
    .pipe(gulp.dest('dist'));  // Writes: './dist/somename.css'
});

gulp.task('sass',  function() {
  return gulp.src('./scss/abc/somename.scss', {base: 'scss/'})
    .pipe(sass())
    .pipe(gulp.dest('dist'));  // Writes: './dist/abc/somename.css'
});

gulp.task('sass',  function() {
  return gulp.src('./scss/abc/somename.scss', {base: '...'})
    .pipe(sass())
    .pipe(gulp.dest('dist'));  // Writes: './scss/abc/somename.css'
});

globs参数常用字符串

!匹配符通常需要通过数组格式来组合使用,才能达到预期目的。

例如,在js目录下包含了压缩和未压缩的JavaScript文件,现在我们想要创建一个任务来压缩还没有被压缩的文件,我们需要先匹配目录下所有的JavaScript文件,然后排除后缀为.min.js的文件:

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

通配符说明

gulp.dest

指明任务处理后的目标输出路径,语法格式如下:

gulp.dest(path[, options])

关于相对路径:

代码示例:

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

gulp.watch

监视文件的变化并运行相应的任务。

语法格式(一):

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

代码示例:

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

详情请参见官方API

语法格式(二):

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

cb回调函数的event参数:

代码示例:

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

详情请参见官方API

gulp.run

运行指定的任务列表,语法格式如下:

gulp.run(task1, task2, ..., taskn)

代码示例:

gulp.run('lint', 'sass', 'scripts');