前端自动化构建和发布系统的设计（一）

前言

前端的业务逻辑和交互效果越来越复杂，代码量也随之越来越大，伴随着越来越大的代码量而来的还有代码的管理和部署的问题。模块化和预处理框架大行其道，新框架的出现让前端的开发环境越来越高大上了，但是部署到线上就越来越费劲了。在开发环境中模块化会将原本的大型应用分割成很多小模块，但是在上线的时候考虑到这些静态资源对 HTTP 请求数和请求体积的开销，很多小模块都需要合并然后再进行压缩。在 node.js 火起来之前，比较常见的处理工具有 ant，但是 ant 是基于 java 的，对于前端工程师来说使用起来很费劲。

grunt vs gulp

node.js 火起来之后，出现了很多用于处理前端静态资源的优秀模块，还有专门用于前端静态资源构建的框架，如鼎鼎大名的 grunt，但是 grunt 由于其基于配置的设计模式和构建模式基于文件的限制，对于复杂一点的构建逻辑配置起来就会比较繁琐。

gulp 是后期之秀，其基于流的构建模式以及简单的配置让原本繁琐的构建越来越简单。gulp 的出现一下子就让 grunt 显得越发难用（是的，我就是有偏见），大有取而代之之势。关于 gulp 和 grunt 的对比，在 Grunt vs Gulp - Beyond the Numbers 中有介绍。

在前端的团队开发中，搭建一套构建系统来统一处理静态资源能大幅提升工作效率，跑跑简单的任务已无法满足复杂多变的需求，有点工程化的意味了。在这方面做得不错的有来自百度 FEX 团队的开源框架 FIS。但是每个公司有每个公司的业务场景和开发环境，很多情况下需要根据实际情况来定制。

当我打算搭建一套构建系统的时候，我毫不犹豫的选择了 gulp，虽然目前为止 gulp 可能并没有 grunt 那么丰富的第三方插件，但是自己开发插件也是挺简单的。

gulp 的基本原理

gulp 的底层库是使用 vinyl-fs 模块来将文件包装成一个特殊的 vinyl 文件对象（一种虚拟的文件格式），这种文件对象本身就是可读（Readable）可写（Writable）的流（stream），其可以通过管道（pipe）来传输，在传输的过程中，就可以对 stream 进行操作修改，这就是 gulp 的基本原理。

编写 gulp 插件

要在传输过程中操作 stream，可以使用 gulp 官方推荐的 through2 模块。假如要编写一个在文本文件的开始位置添加一段前缀的插件。

var through = require( 'through2' ),
        gutil = require( 'gulp-util' );

    const PLUGIN_NAME = 'gulp-prefixer';

    var prefixStream( prefixText ){
      var stream = through();
      stream.write(prefixText);
      return stream;
    };

    // gulp插件的入口函数
    function gulpPrefixer( prefixText ){
      // 检测是否有文件前缀的传参
      if (!prefixText) {
        throw new gutil.PluginError(PLUGIN_NAME, 'Missing prefix text!');
      }

      // 将字符串转换为buffer
      prefixText = new Buffer(prefixText);

      // 当任何文件对象通过管道传输过来时，
      // 无论操作结果如何，都返回一个stream以便其他的操作能衔接流畅
      return through.obj(function(file, enc, cb){
        // 如果文件对象本身为空，则直接返回一个空对象
        if (file.isNull()) {
          cb(null, file);
        }
        // 如果文件对象是buffer格式，直接拼接前缀和原内容
        if (file.isBuffer()) {
          file.contents = Buffer.concat([prefixText, file.contents]);
        }
        // 如果文件对象是stream，则将前缀写入原内容
        if (file.isStream()) {
          file.contents = file.contents.pipe(prefixStream(prefixText));
        }
        // 执行回调，和下一个操作对接
        cb(null, file);
      });
    };

    // 将插件入口函数暴露为外部接口
    module.exports = gulpPrefixer;

如果要使用上面的插件，可以这样使用。

var gulp = require( 'gulp' );

    gulp.task( 'default', function(){
        return gulp.src( 'src/*.txt' )
        .pipe( gulpPrefixer('/*Hello gulp*/') )
        .pipe( gulp.dest('build') );
    });

配置文件

在团队开发中会使用版本管理软件来托管代码，无论开发环境是在本地还是在服务器上，开发人员其实都无需过多的关心构建和发布环节，所以无需在每个开发环境都部署一套构建系统。可以将构建系统部署到托管代码的服务器上。

每个项目由于业务场景的不同，其构建规则也不会相同，每个项目都有一份独立的配置文件（build.json）。开发人员需要关注的是构建的配置文件，文件的输入/输出的相对路径、语法检查的配置、合并规则，这些通通都可以写在配置文件中。

在构建的时候会动态的读取来自不同项目的不同配置文件，按照配置文件的规则来处理不同项目的构建任务。这样 gulp 的任务代码和相关的配置就完全分离了，这是很有必要的。

语法检查

语法检查是保证产出物质量很关键的一个环节，无论是新手还是牛逼大神，写代码时都不能做到完全不出错，语法检查就是保证代码不出现低级错误。JS 的语法检查有 jshint，而 CSS 的语法检查有 csslint，其检查规则都可以自己去定义配置。

如果团队间有特殊的编码约定，还可以自己去定义一些 jshint 和 csslint 中没有的语法检查规则。比如在 CSS 代码中，团队间的开发容易碰到很多团队成员胡乱定义 z-index 值，光靠口头约定不一定大家都会遵守，这时可以在代码检查时去检查这些 z-index 值是在可控的范围内。这里推荐 CSS 模块，用于解析出 CSS 的语法规则树，在解析好的语法树中再对属性值进行操作比用正则匹配要靠谱的多。

合并 JS 模块

我们的团队使用的是 seajs 来对 JS 模块进行加载，如果想将 seajs 的定义的 CMD 模块按照依赖来合并，目前 seajs 社区还找不到好用的小巧模块。于是自己动手编写了一款可以对 CMD 模块按照依赖来合并的 gulp 插件。

var gulp = require( 'gulp' ),
        seajsCombo = require( 'gulp-seajs-combo' );

    gulp.task( 'seajscombo', function(){
        return gulp.src( 'src/js/main.js' )
              .pipe( seajsCombo({
                   ignore : [ 'other' ], // 合并时忽略该依赖模块
                   // 将seajs.use中的路径做映射
                   map : {
                       "bin/index" : "./index"
                   }
               }))
              .pipe( gulp.dest('build/js') );  
    });

gulp-seajs-combo 已开源，可以在 github 或 npm 上下载和查看源码。至于普通的 js 文件处理就很简单了，这里就不多说了。

合并 CSS 模块

普通的 CSS 文件在开发阶段可以使用 @import 来加载，CSS 的模块化加载就是这么简单，我们在做构建的时候同样也需要对 CSS 文件进行按依赖合并，这里我使用开源插件 gulp-import-css 。

var gulp = require( 'gulp' ),
         importcss = require( 'gulp-import-css' );

    gulp.task( 'buildcss', function(){
        return gulp.src( 'src/css/main.css' )
            .pipe( importcss() )
            .pipe( gulp.dest('build/css') );
    });     

压缩文件

静态资源文件在上线前都会压缩，这个其实不用多说，各种类型的文件（JS、CSS、Image）都有相应的压缩模块。基本都是在输出文件前对文件进行压缩。

自定义任务

gulp 的处理文件的任务，其任务执行函数接受 stream 类型的返回值。除了处理文件的任务，可能还有其他类型的任务，对于需要被其他任务依赖的异步任务，任务执行函数接受 promise 类型的返回值，也可以使用回调函数。

// 回调函数形式的异步任务
    gulp.task( 'one', function( callback ){
        setTimeout(function(){
            callback();
        }, 1000 );
    }); 

    // promise形式的异步任务
    var Q = require( 'q' );
    gulp.task( 'two', function(){
        var deferred = Q.defer();

        setTimeout(function(){
            deferred.resove();
        }, 1000 );

        return deferred.promise;
    });

喜欢哪种形式的自定义任务看个人喜好了。

由于篇幅的原因，本篇主要讲述使用 gulp 来搭建构建系统需要注意的一些点和自认为比较好的经验，并不对完整的搭建构建系统做流水帐式的介绍。至于 gulp 的基础使用，网上应该有很多文章介绍。下一篇将着重讲述发布部分以及整体流程。