首页 > 其他好文 > 详细

gulp脚本编写方法

时间：2015-02-12 15:46:15 阅读：263 评论：0 收藏：0 [点我收藏+]

标签：

建立一个gulpfile.js文件，内容直接抄gulp-htmlmin的readme：

var gulp = require(‘gulp‘);

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

gulp.task(‘minify‘, function() {

  gulp.src(‘src/*.html‘)

    .pipe(htmlmin({collapseWhitespace: true}))

    .pipe(gulp.dest(‘dist‘))

});

然后控制台运行gulp命令，报错，说什么“ Task ‘default‘ is not in your gulpfile”。只好求助谷歌，发现这个东西

var gulp   = require(‘gulp‘);

var coffee = require(‘gulp-coffee‘);

gulp.task(‘scripts‘, function () {

  gulp.src(‘src/*.coffee‘)

    .pipe(coffee())

    .pipe(gulp.dest(‘./‘));

});

gulp.task(‘watch‘, function () {

  gulp.watch(‘src/*.coffee‘, [‘scripts‘]);

});

gulp.task(‘default‘, [‘scripts‘, ‘watch‘]);

于是将原来的代码改装一下：

var gulp = require(‘gulp‘);

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

gulp.task(‘minify‘, function() {

  gulp.src(‘src/*.html‘)

    .pipe(htmlmin({collapseWhitespace: true}))

    .pipe(gulp.dest(‘dist‘))

});

gulp.task(‘watch‘, function () {

  console.log(‘继续压死你!‘)

  gulp.watch(‘src/*.html‘, [‘minify‘]);

});

gulp.task(‘default‘, [‘minify‘, ‘watch‘]);

运行gulp命令，生成dest目录，里面的index.html已经成功被压缩。并且有了watch任务，以后我们每次修改html，都会同步到dest中去。

估计default任务应该是类似C语言的main方法那样的东西，没有它是无法带动其他任务的。

接着我们好好学一下其基础吧。

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(‘./client/templates/*.jade‘)  

    .pipe(jade())

    .pipe(gulp.dest(‘./build/templates‘))

    .pipe(minify())

    .pipe(gulp.dest(‘./build/minified_templates‘));

gulp.task()

gulp模块的task方法，用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数：

gulp.task(‘greet‘, function () {  

   console.log(‘Hello world!‘);

});

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

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

上面代码先指定build任务，它按次序由css、js、imgs三个任务所组成。注意:由于每个任务都是异步调用，所以没有办法保证js任务的开始运行的时间，正好是css任务运行结束时间。

如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块：

gulp.task(‘css‘, [‘greet‘], function () {  

   // Deal with CSS here

});

上面代码表明，css任务依赖greet任务，所以css一定会在greet运行完成后再运行。

如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务：

gulp.task(‘default‘, function () {  

   // Your default task

});

gulp.run()

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

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

gulp.run(‘scripts‘,‘copyfiles‘,‘builddocs‘, function(err) {  

    // 所有任务完成，或者触发错误而终止

});

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

gulp.watch()

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

gulp.task(‘watch‘, function () {  

   gulp.watch(‘templates/*.tmpl.html‘, [‘build‘]);

});

上面代码指定，一旦templates目录中的模板文件发生变化，就运行build任务。

watch方法也可以用回调函数，代替指定的任务：

gulp.watch(‘templates/*.tmpl.html‘, function (event) {  

   console.log(‘Event type: ‘ + event.type); 

   console.log(‘Event path: ‘ + event.path); 

});

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

var watcher = gulp.watch(‘templates/*.tmpl.html‘, [‘build‘]);

watcher.on(‘change‘, function (event) {  

   console.log(‘Event type: ‘ + event.type);

   console.log(‘Event path: ‘ + event.path);

});