对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。
Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩Javascript和刷新浏览器，来改进网站开发的过程。通过本文，我们将知道如何使用Gulp来改变开发流程，从而使开发更加快速高效。
What Is Gulp?Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Javascript（或者Coffeescript）里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint Javascript和CSS、解析模板以及在文件变动时编译LESS文件（当然这些只是一小部分例子）。
Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来执行JSHint、编译Coffeescript，执行Mocha测试，甚至更新版本号。
对比其他构建工具，比如Grunt，以及最近流行的Broccoli，我相信Gulp会更胜一筹（请看后面的”Why Gulp?”部分），同时我汇总了一个使用Javascript编写的构建工具清单，可供大家参考。
Gulp是一个可以在GitHub上找到的开源项目。
Installing Gulp安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：
npm install -g gulp
然后，在项目里面安装Gulp：
npm install --save-dev gulpUsing Gulp
现在我们创建一个Gulp任务来压缩Javascript文件。首先创建一个名为gulpfile.js的文件，这是定义Gulp任务的地方，它可以通过gulp命令来运行，接着把下面的代码放到gulpfile.js文件里面。
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('minify', function () {
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});
然后在npm里面运行npm install -–save-dev gulp-uglify来安装gulp-uglify，最后通过运行gulp minify来执行任务。假设js目录下有个app.js文件，那么一个新的app.js将被创建在编译目录下，它包含了js/app.js的压缩内容。想一想，到底发生了什么？
我们只在gulpfile.js里做了一点事情。首先，我们加载gulp和gulp-uglify模块：
var gulp = require('gulp'),
uglify = require('gulp-uglify');
然后，我们定义了一个叫minify的任务，它执行时会调用函数，这个函数会作为第二个参数：
gulp.task('minify', function () {
});
最后，也是难点所在，我们需要定义任务应该做什么：
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
如果你对数据流非常熟悉（其实大多数前端开发人员并不熟悉），上面所提供的代码对你来说就没有太大意义了。
STREAMS数据流能够通过一系列的小函数来传递数据，这些函数会对数据进行修改，然后把修改后的数据传递给下一个函数。
在上面的例子中，gulp.src()函数用字符串匹配一个文件或者文件的编号（被称为“glob”）,然后创建一个对象流来代表这些文件，接着传递给uglify()函数，它接受文件对象之后返回有新压缩源文件的文件对象，最后那些输出的文件被输入gulp.dest()函数，并保存下来。
整个数据流动过程如下图所示：
当只有一个任务的时候，函数并不会起太大的作用。然而，仔细思考下面的代码：
gulp.task('js', function () {
return gulp.src('js.js 匹配js目录及其子目录下所有后缀为.js的文件
此外，Gulp也有很多其他的特征，但并不常用。如果你想了解更多的特征，请查看Minimatch文档。
js目录下包含了压缩和未压缩的Javascript文件，现在我们想要创建一个任务来压缩还没有被压缩的文件，我们需要先匹配目录下所有的Javascript文件，然后排除后缀为.min.js的文件:
gulp.src(['js*.js', '!js*.min.js'])DEFINING TASKS
gulp.task()函数通常会被用来定义任务。当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。
gulp.task('greet', function () {
console.log('Hello world!');
});
执行gulp greet的结果就是在控制台上打印出“Hello world”.
一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。
gulp.task('build', ['css', 'js', 'imgs']);
这些任务不是同时进行的，所以你不能认为在js任务开始的时候css任务已经结束了，也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务数组结合起来指定其依赖关系。例如，定义一个css任务，在执行前需要检查greet任务是否已经执行完毕，这样做就是可行的:
gulp.task('css', ['greet'], function () {
// Deal with CSS here
});
现在，当执行css任务时，Gulp会先执行greet任务，然后在它结束后再调用你定义的函数。
DEFAULT TASKS你可以定义一个在gulp开始运行时候默认执行的任务，并将这个任务命名为“default”：
gulp.task('default', function () {
// Your default task
});
PLUGINS
Gulp上有超过600种插件供你选择，你可以在插件页面或者npm上搜索gulpplugin来浏览插件列表。有些拥有“gulpfriendly”标签的插件，他们不能算插件，但是能在Gulp上正常运行。 需要注意的是，当直接在npm里搜索时，你无法知道某一插件是否在黑名单上（你需要滚动到插件页面底部才能看到）。
大多数插件的使用都很方便，它们都配有详细的文档，而且调用方法也相同（通过传递文件对象流给它），它们通常会对这些文件进行修改（但是有一些插件例外，比如validators），最后返回新的文件给下一个插件。
让我们用前面的js任务来详细说明一下：
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js', function () {
return gulp.src('js*.html',
'app/assets/css*.css',
'app/assets/imgs*.png',
'app/assets/js*.js'
];
browserSync.init(files, {
server: {
baseDir: './app'
}
});
});
执行gulp browser-sync后会监听匹配文件的变化，同时为app目录提供文件服务。
此外BrowserSync的开发者还写了很多关于BrowserSync+Gulp仓库的其他用途。
Why Gulp?前面提到过，Gulp是为数不多的使用Javascript开发的构建工具之一，也有其他不是用Javascript开发的构建工具，比如Rake，那么我们为什么要选择Gulp呢?
目前最流行的两种使用Javascript开发的构建工具是Grunt和Gulp。Grunt在2013年非常流行，因为它彻底改变了许多人开发网站的方式，它有上千种插件可供用户使用，从linting、压缩、合并代码到使用Bower安装程序包,启动Express服务都能办到。这些和Gulp的很不一样，Gulp只有执行单个小任务来处理文件的插件，因为任务都是Javascript（和Grunt使用的大型对象不同），根本不需要插件，你只需用传统方法启动一个Express服务就可以了。
Grunt任务拥有大量的配置，会引用大量你实际上并不需要的对象属性，但是Gulp里同样的任务也许只有几行。让我们看个简单的Gruntfile.js，它规定一个将LESS转换为CSS的任务，然后执行Autoprefixer:
grunt.initConfig({
less: {
development: {
files: {
"build/tmp/app.css": "assets/app.less"
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
multiple_files: {
expand: true,
flatten: true,
src: 'build/tmp/app.css',
dest: 'build/'
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('css', ['less', 'autoprefixer']);
与Gulpfile.js文件进行对比，它们执行的任务相同：
var gulp = require('gulp'),
less = require('gulp-less'),
autoprefix = require('gulp-autoprefixer');
gulp.task('css', function () {
gulp.src('assets/app.less')
.pipe(less())
.pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
.pipe(gulp.dest('build'));
});
因为Grunt比Gulp更加频繁地操作文件系统，所以使用数据流的Gulp总是比Grunt快。对于一个小的LESS文件，gulpfile.js通常需要6ms，而gruntfile.js则需要大概50ms——慢8倍多。这只是个简单的例子，对于长的文件，这个数字会增加得更显著。
作者：Midaoi
文章源自：http://www.cnblogs.com/Midaoi/p/4969812.html
