之前的项目一直采用grunt来构建，然后用requirejs做模块化，requirejs官方有提供grunt的插件来做压缩合并。现在的项目切到了gulp，模块化用起了seajs，自然而然地也想到了模块合并压缩的问题。

然后一开始在解决这个问题的时候，并不是很顺利，在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件，虽然在seajs的github上也看了不少的issue，但是大多数都是只能将所有的模块文件合并成一个总的文件，这对于单页面的应用来说肯定没有问题，但是对于多页面的应用而言，显然就违背了模块化思想中按需加载的核心，所以我想要的是一个能够根据我每个页面各自所依赖的模块来按需合并的方法。

这个按需合并的意思，一方面是只合并一个页面所依赖的那些模块，另一方面是，还能过滤掉某些模块不参与合并，考虑这个的原因在于有些模块，比如jquery等，都属于第三方依赖的库，可能文件比较大，最重要的是你几乎不会去改动它的代码，所以这些模块不合并到页面的js中，会有助于更好地利用浏览器缓存。本文介绍一个简单可行的办法，来做基于gulp构建的中小型项目中的seajs合并压缩。

注：为了说明，seajs合并后的效果，本文提供了一个演示demo，它有两个页面：login.html和regist.html，分别用来模拟多页应用中的两个独立的文件，可通过以下链接来查看：

以login.html为例，查看这个页面的源文件中，会看到它除了引用seajs以及相关的配置文件common.js外，只引用了app/login作为页面的main js，这个app/login模块其实对应的就是js/app/login.js：

但实际上，这个login.js依赖了更多的模块js，你可以通过chrome的soures来查看该页面加载的详细js资源：

在login.js合并之前，它的代码是这样的：

但是在前2个截图中，我们并没有看到mod/mod1.js,mod/mod2.js,deps/fastclick.js这三个文件，我们除了看到login.js，还看到了lib/bootstrap.js,lib/jquery.js,lib/jquery.validate.js。这就是合并的效果。一方面保持了js/lib文件夹下的模块都不会参与合并，另一方面保证了页面的main js所依赖的其它模块，都合并到页面的main js文件中来。

该demo相关的代码可通过以下链接进行查看：

这个是seajs合并工作中比较关键的一点，它不像requirejs，直接做concat即可；它必须先经过一个transport的任务处理，将匿名模块变成具名模块，同时用define的第二个参数来描述这个模块的所有依赖，就像requirejs那样。只有做完了transport，才能利用gulp-seajs-concat做合并。原因请参考：。

gulp-seajs-concat做合并的时候，就很简单了，只要告诉它一个base选项即可，这个base选项跟js/common.js中base选项保持一致。因为gulp-seajs-concat根据base和transport之后的模块，就能找到它所依赖的其它模块文件。

4）页面中使用main js时要采用这种方式：

use的参数名称，必须跟合并之后的main js的主模块ID保持一致。比如js/app/login.js合并之后是这个样子：

第一个define对应的模块就是合并后文件内的主模块，红框的内容就是该主模块的id，seajs use这个模块的时候，参数名称必须和这个id一致。否则seajs即使成功的加载到了这个文件，也不会执行任何模块内的代码。因为seajs有一个规则：，其中有点跟这个相关，就是：当seajs use到一个文件内包含多个模块时，会根据use的参数名来寻找这个文件内的主模块，只有它们完全匹配，才能找得到。

5）压缩混淆：使用gulp-uglify：

但是要注意那个mangle，必须把require exports module排除掉，否则会引发一些意外的问题。

2. 本文小结

本文内容虽然很简单，但是在刚切到gulp和seajs的时候，还是费了不少时间才把本文的问题解决，虽然在准备demo的时候进展地比我当时的情况要顺利的多…不管怎么样，希望本文的内容多多少少能帮助到一些朋友。