建立一个gulpfile.js文件，内容直接抄gulp-htmlmin的readme：
var gulp = require('gulp'); |
var htmlmin = require('gulp-htmlmin'); |
gulp.task('minify', function() { |
.pipe(htmlmin({collapseWhitespace: true})) |
然后控制台运行gulp命令，报错，说什么“ Task 'default' is not in your gulpfile”。只好求助谷歌，发现这个东西
var gulp = require('gulp'); |
var coffee = require('gulp-coffee'); |
gulp.task('scripts', function () { |
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() { |
.pipe(htmlmin({collapseWhitespace: true})) |
gulp.task('watch', function () { |
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(gulp.dest('./build/templates')) |
.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 () { |
上面代码表明，css任务依赖greet任务，所以css一定会在greet运行完成后再运行。
如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务：
gulp.task('default', function () { |
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); |
除了change事件，watch方法还可能触发以下事件：
- end：回调函数运行完毕时触发。
- error：发生错误时触发。
- ready：当开始监听文件时触发。
- nomatch：没有匹配的监听文件时触发。
watcher对象还包含其他一些方法：
watcher.end()：停止watcher对象，不会再调用任务或回调函数。watcher.files()：返回watcher对象监视的文件。watcher.add(glob)：增加所要监视的文件，它还可以附件第二个参数，表示回调函数。watcher.remove(filepath)：从watcher对象中移走一个监视的文件。
学完这些就可以到其官网上找插件了，毕竟插件才是王道。