Gulp 方法

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

---

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']);

 

---

Gulp.dest()

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

 

     

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

 

---

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
})

 

---

Gulp.run()

     gulp模块的run方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。

     ps:任务是尽量多的并行执行，而且可能不会按照指定的顺序执行。

 

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

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

---

 

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对象中移走一个监视的文件。

 

学完gulp的这些方法就能够到npmjs.com中找各类插件，进行上手试验啦