雨夜带刀's Blog

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

前言

前端的业务逻辑和交互效果越来越复杂,代码量也随之越来越大,伴随着越来越大的代码量而来的还有代码的管理和部署的问题。模块化和预处理框架大行其道,新框架的出现让前端的开发环境越来越高大上了,但是部署到线上就越来越费劲了。在开发环境中模块化会将原本的大型应用分割成很多小模块,但是在上线的时候考虑到这些静态资源对 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 的基础使用,网上应该有很多文章介绍。下一篇将着重讲述发布部分以及整体流程。

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/static-build.html
如需转载请以链接形式注明原载或原文地址。

“前端自动化构建和发布系统的设计(一)”目前已有 8 条评论

发表评论:

  • *
  • *
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。