Gulp – 基于流的构建工具(一)

Gulp是什么?

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

Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建。

Gulp特性

  1. 使用方便
    通过代码优于配置的策略,Gulp可以让简单的任务简单,复杂的任务更可管理。
  2. 构建快速
    通过流式操作,减少频繁的 IO 操作,更快地构建项目。
  3. 插件高质
    Gulp有严格的插件指导策略,确保插件能简单高质的工作。
  4. 易于学习
    使用Gulp,你仅仅只需要记住4个命令。

Gulp安装

Gulp是基于 Node.js的,故要首先安装 Node.js

切换到工作目录,执行以下命令

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

安装完成以后,可以用gulp -v测试安装是否成功

[xyz@xyz ~]$ gulp -v
[20:29:16] CLI version 3.8.5]
[20:29:16] Local version 3.8.5

仅仅需要知道的4个Gulp命令

  1. gulp.task(name, fn)
    定义一个任务
  2. gulp.src(glob)
    返回一个可读的stream
  3. gulp.dest(glob)
    返回一个可写的stream
  4. gulp.watch(glob, fn)
    当glob内容发生改变时,执行fn

开始使用Gulp

Gulp的任务应当被定义在项目根目录的gulpfile.js文件中,Gulp项目页 有一个 gulpfile 示例。参考该示例开始使用Gulp。

  1. 安装项目需要的插件
    npm install gulp-jshint gulp-uglify --save-dev
  2. 创建gulpfile(定义任务)
    var gulp = require('gulp')
    	, jshint = require('gulp-jshint')
    	, uglify = require('gulp-uglify');
    
    // lint task
    
    gulp.task('jshint', function() {
        gulp.src( './**/*.js' )
        .pipe( jshint() )
        .pipe( jshint.reporter('default') );
    });
    
    // uglify task
    
    gulp.task('compress', function() {
        gulp.src( './**/*.js' )
        .pipe( uglify() )
        .pipe( gulp.dest('./dist') );
    });
    
    // default task
    
    gulp.task( 'default', ['jshint', 'compress'] );
    
    // watch task
    gulp.task('default',function() {
        gulp.watch( './**/*.js', ['jshint'] );
    });
  3. 执行Gulp任务
    gulp // 执行默认(default)任务
    gulp jshint // 执行指定的任务

Gulp文档

文档地址见 https://github.com/gulpjs/gulp/blob/master/docs/README.md

总结

到目前为止,我们应该已经学会使用gulp了。

与Grunt相比,Gulp没有复杂的任务配置,基于流的操作减少IO操作,使得项目构建更加快速,学习曲线更加平滑,容易上手和深入了解高级特性,同时任务与任务配置定义更加清晰,不会有乱的感觉。

发表评论