使用gulp构建SeaJS

作者:frank 发表日期:2015-09-02 11:19:29 更新日期:2016-08-15 19:56:35 分类:猿文色

摘要

使用SeaJS完成了Cvtouch商城的模块化工作,接下来一个严峻的问题是如何进行构建,因为模块化之前使用的是gulp,也为了减少切换成本,放弃了SPM,决定还是暂时使用gulp构建。

正文

使用SeaJS主要是改变了JS的文件结构,对其他静态文件CSS,IMG都没有什么影响。所以本文只针对模块化构建前后的JS部分。对JS的构建包括:合并,压缩,文件名+hash。 模块化之前的gulp file:

  gulp.task('lib-js', [], function() {
    return gulp.src([
        pathSource.libs + 'jquery.min.js',
        pathSource.libs + 'jquery.bpopup.min.js'])
      .pipe(sourcemaps.init())
      .pipe(concat('lib.min.js'))
      .pipe(uglify())
      .pipe(rev())
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(pathDist.libs))
      .pipe(rev.manifest({base:'', merge: true}))
      .pipe(gulp.dest(''));
});

模块化之后的gulp file:

  gulp.task("module-js", ['component-js'], function(){
    gulp.src([
      pathSource.modules + "cstorage.js",
      pathSource.modules + "dialog.js",
      pathSource.modules + "util.js"], {base: pathSource.root})
      .pipe(transport())
      .pipe(sourcemaps.init())
      .pipe(concat('module.min.js'))
      .pipe(uglify())
      .pipe(rev())
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(pathDist.modules))
      .pipe(rev.manifest({base:'', merge: true}))
      .pipe(gulp.dest(''));
});

可以看到,构建操作:合并,压缩,文件名+hash,模块化前后本质上没有任何区别。而模块化之后主要多了一步transport(使用gulp-seajs-transport)。关于SeaJS的transport,请看http://www.zhihu.com/question/20789867/answer/16187950,简单就是为每个模块命名ID,使SeaJS在定位模块时采用ID,而不是文件名。这里要详细了解下SeaJS模块ID的解析规则,否则可能在构建后发生无法找到模块的错误,具体可以看这里http://segmentfault.com/a/1190000000354302https://github.com/seajs/seajs/issues/930,简单来说就是尽量使用相对标识,不要使用顶级标识。

HTML中引用构建后的文件:

<!-- 公共模块 -->
<!-- build:js ${pageContext.request.contextPath}/modules/module.min.js -->
<!-- /build -->

<!-- 业务模块 -->
<!-- build:js ${pageContext.request.contextPath}/public/public.min.js -->
<!-- /build -->

<script>
  seajs.config({
    charset: 'utf-8',
    debug: false
  });
  seajs.use("public/js/main");
</script>

看起来没什么复杂的,其实最重要的是熟悉SeaJS ID的解析规则!!!