Gulp是什么?
gulp.js 是一种基于流的,代码优于配置的新一代构建工具。
Gulp
和 Grunt
类似。但相比于 Grunt
的频繁的 IO
操作,Gulp
的流操作,能更快地完成构建。
Gulp特性
- 使用方便
通过代码优于配置的策略,Gulp可以让简单的任务简单,复杂的任务更可管理。 - 构建快速
通过流式操作,减少频繁的 IO 操作,更快地构建项目。 - 插件高质
Gulp有严格的插件指导策略,确保插件能简单高质的工作。 - 易于学习
使用Gulp,你仅仅只需要记住4个命令。
Gulp安装
Gulp
是基于 Node.js
的,故要首先安装 Node.js。
切换到工作目录,执行以下命令
1 2 |
npm install -g gulp npm install —-save-dev gulp |
安装完成以后,可以用gulp -v测试安装是否成功
1 2 3 |
[xyz@xyz ~]$ gulp -v [20:29:16] CLI version 3.8.5] [20:29:16] Local version 3.8.5 |
仅仅需要知道的4个Gulp命令
- gulp.task(name, fn)
定义一个任务 - gulp.src(glob)
返回一个可读的stream - gulp.dest(glob)
返回一个可写的stream - gulp.watch(glob, fn)
当glob内容发生改变时,执行fn
开始使用Gulp
Gulp的任务应当被定义在项目根目录的gulpfile.js文件中,Gulp项目页 有一个 gulpfile 示例
。参考该示例开始使用Gulp。
- 安装项目需要的插件
1npm install gulp-jshint gulp-uglify --save-dev - 创建gulpfile(定义任务)
12345678910111213141516171819202122232425262728var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify');// lint taskgulp.task('jshint', function() {gulp.src( './**/*.js' ).pipe( jshint() ).pipe( jshint.reporter('default') );});// uglify taskgulp.task('compress', function() {gulp.src( './**/*.js' ).pipe( uglify() ).pipe( gulp.dest('./dist') );});// default taskgulp.task( 'default', ['jshint', 'compress'] );// watch taskgulp.task('default',function() {gulp.watch( './**/*.js', ['jshint'] );}); - 执行Gulp任务
12gulp // 执行默认(default)任务gulp jshint // 执行指定的任务
Gulp文档
文档地址见 https://github.com/gulpjs/gulp/blob/master/docs/README.md
总结
到目前为止,我们应该已经学会使用gulp了。
与Grunt相比,Gulp没有复杂的任务配置,基于流的操作减少IO操作,使得项目构建更加快速,学习曲线更加平滑,容易上手和深入了解高级特性,同时任务与任务配置定义更加清晰,不会有乱的感觉。