前端开发入门：前端构建工具gulp入门教程

1、什么是Gulp

gulp.js 是一种基于流的，代码优于配置的新一代构建工具。

Gulp

和

Grunt

类似。但相比于

Grunt

的频繁的

IO

操作，

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上找到的开源项目。

2、Gulp特性

使用方便

通过代码优于配置的策略，

Gulp

可以让简单的任务简单，复杂的任务更可管理。

构建快速

通过流式操作，减少频繁的

IO

操作，更快地构建项目，IO操作就是磁盘的IO操作。

插件高质

Gulp

有严格的插件指导策略，确保插件能简单高质的工作。

易于学习

少量的API，掌握

Gulp

可以毫不费力。构建就像流管道一样，轻松加愉快。

3、Gulp安装

Gulp

是基于

Node.js

的，故要首先安装 Node.js

npm install -g gulp
npm install —-save-dev gulp

4、Gulp使用

Gulp

的任务都是以插件的形式存在，本次示例以 gulp-jshint 为例，展示

Gulp

的常规用法。

安装 gulp-jshint

npm install gulp-jshint --save-dev

创建 gulpfile.js

gulp项目有一个

Sample
gulpfile

。直接一下就OK了。

var gulp = require('gulp');
var jshint = require('gulp-jshint');

var paths = {
scripts: 'js/**/*.js',
};

gulp.task('lint', function() {
return gulp.src(paths.scripts)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

然后执行命令行

gulp lint

即可。

5、Gulp总结

Gulp

相比于

Grunt

有很多优点，比较直观的：就是学习曲线比较平滑。比Grunt速度更快、配置更少。

Gulp

还有很多高级的特性，详见官方文档。

Gulp插件列表

http://gulpjs.com/

前面提到过，Gulp是为数不多的使用JavaScript开发的构建工具之一，也有其他不是用JavaScript开发的构建工具，比如Rake，那么我们为什么要选择Gulp呢?

目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp。Grunt在2013年非常流行，因为它彻底改变了许多人开发网站的方式，它有上千种插件可供用户使用，从linting、压缩、合并代码到使用Bower安装程序包,启动Express服务都能办到。这些和Gulp的很不一样，Gulp只有执行单个小任务来处理文件的插件，因为任务都是JavaScript（和Grunt使用的大型对象不同），根本不需要插件，你只需用传统方法启动一个Express服务就可以了。

Grunt任务拥有大量的配置，会引用大量你实际上并不需要的对象属性，但是Gulp里同样的任务也许只有几行。