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插件列表
前面提到过,Gulp是为数不多的使用JavaScript开发的构建工具之一,也有其他不是用JavaScript开发的构建工具,比如Rake,那么我们为什么要选择Gulp呢?
目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp。Grunt在2013年非常流行,因为它彻底改变了许多人开发网站的方式,它有上千种插件可供用户使用,从linting、压缩、合并代码到使用Bower安装程序包,启动Express服务都能办到。这些和Gulp的很不一样,Gulp只有执行单个小任务来处理文件的插件,因为任务都是JavaScript(和Grunt使用的大型对象不同),根本不需要插件,你只需用传统方法启动一个Express服务就可以了。
Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里同样的任务也许只有几行。