gulp learning (2)

在上文中讲解了gulp的常规安装，本文继续讨论gulp的使用

流

在gulp中，流是个非常重要的概念，请看下面的一段代码

var gulp = require( 'gulp' ),
    uglify = require( 'gulp-uglify' );

gulp.task( 'uglify', function(){
    gulp.src( "demo.css" )
    .pipe( uglify() )
    .pipe( gulp.dest('demo.min.css' ) );
});

这里uglify任务中首先读取了demo.css文件，然后使用gulp-uglify模块提供的uglify方法进行压缩，最后导出为demo.min.css文件，中间所有步骤都没有产生中间文件，而是使用数据流，也就是说上一个操作的输出被下一个操作作为输入进行处理，依次进行，直到最后一次处理后才输出文件。

browserify

如果要在浏览器项目中使用符合commonJS规范的javascript模块，需要使用browserify。通过使用browserify，我们既可以定义符合commonJS规范的javascript模块在客户端使用，也可以直接引用nodejs模块用于浏览器。

var gulp = require( 'gulp' ),
    transform = require('vinyl-transform'),
    browserify = require( 'browserify' );

gulp.task( 'browserify' , function() {

    var browserified = transform(function(filename) {
        var b = browserify(filename);
        return b.bundle();
    });
    gulp.src( './js/*.js' )
        .pipe( browserified )
        .pipe( gulp.dest( './dist/js' ) );

});

上述代码就是将js文件夹下的所有commonJS规范的模块都分别通过browserified转换为浏览器可以执行的javascript代码，而其中普通形式的javascript代码则不做转换，最后都输出到dist文件夹下的js文件夹里

uglify

使用uglify对javascript文件进行压缩，使用方式如下面代码所示：

var gulp = require( 'gulp' ),
    uglify = require( 'gulp-uglify' );

gulp.task( 'default', function(){
    gulp.src( './js/*.js' )
        .pipe( uglify() )
        .pipe( gulp.dest( './dist/js' ) );
});

rev

gulp-rev