需求:
在上一篇文章中,我们尝试将css进行合并
这一章我们主要讲基于seajs的模块合并
我们按照网上的教程做过一些尝试使用过gulp-seajs-concat
发现这个插件会将入口文件中的所有依赖都添加进来,导致生成后的文件过大,并且不利于利用缓存
最后决定还是自己实现一遍吧。
方案:
将公用js哪些需要合并,哪些被很多页面引用,整理一遍后配置为json文件,脚本会读取配置来进行合并
步骤:
1.将所有sea模块具名
2.使用concat将需要合并的模块文件进行合并
3.遍历所有模块,将原始文件替换为合并之后的文件

下面直接上代码:

var transport = require('gulp-seajs-transport');

//配置文件,可以写成json。因为合并需要使用具名之后的js模块,所以路径都为dest目录下
var _concatJson = {
"./dest/js/conca/comm-con.js" : ["./dest/js/local/config.js","./dest/js/local/loading.js","./dest/js/local/footer.js"]
};
//seajs模块具名
gulp.task("transportJs",function(){
  gulp.src("./src/js/**/*.js" )
    .pipe(transport())
    .pipe(gulp.dest("./dest/js/"));
});

//模块具名之后就可以直接concat了
gulp.task("concatJs2config",["transportJs"],function(){
  for(var _key in _concatJson) {
    var _resultFile = _key,
        _resultFileName = path.basename(_resultFile),//文件名
        _resultFilePath = path.dirname(_resultFile),//文件路径
        _value = _concatJson[_key]; // 来源文件原始路径获取
    gulp.src(_value)
      .pipe(concat(_resultFileName))
      .pipe(uglify())
      .pipe(gulp.dest(_resultFilePath))
      .pipe(rev())
      .pipe(gulp.dest(_resultFilePath))
      .pipe(rev.manifest())
      .pipe(gulp.dest(_resultFilePath+"/rev"))
  }   
});

//合并之后要将所有模块中的原始文件的引用替换成合并之后的文件
//这个地方我们使用了:var ast = require('cmd-util').ast;
//将模块的源码传给ast之后会返回一个对象:{id: 'id', dependencies: ['a'], factory: factoryNode}
//dependencies数组里面是该文件所有的依赖
//只需要处理这个数据,并修改源文件就可以实现替换
gulp.task("replaceJsModel",["concatJs2config"],function(){
  gulp.src('./dest/js/index.js')
    .pipe(tap(function(file,t){ //tap会遍历src的文件列表,参数file是gulpFile对象,包含了path,contents等信息
        var isHa = false;
        var regStr = '"'+(ast.parse(file.contents.toString())[0].dependencies).join('", "')+'"'; //将原数组保存下来,方便匹配替换
        var arr = ast.parse(file.contents.toString())[0].dependencies; //取出依赖数组
        for(var _key in _concatJson) {
          var _value = _concatJson[_key];
          _value.map(function(val){
            var _dep = val.substring(val.indexOf("js/")+3,val.indexOf(".js"));
            if(arr.indexOf(_dep)>-1){
              arr.splice(arr.indexOf(_dep),1);
              if(!isHa){
                arr.push(_key.substring(_key.indexOf("js/")+3,_key.indexOf(".js")));
                isHa = true;
              }
            }
          })
        }
        var str = file.contents.toString().replace(regStr,( '"'+arr.join('", "')+'"')); //将原dependencies替换为修改之后的
        file.contents = new Buffer(str);
    }))
  .pipe(gulp.dest("./dest/test/"))
});

以上就是自己整理的基于gulp的sea模块自定义合并
使用过程如有疑问或者
您有更好地实现方式,都可以以邮件形式发送给我。邮箱:xiaoqiang@isjs.cn