基于gulp合并压缩Seajs模块的方式说明

本文将介绍一种简单可行的方法，用于在基于gulp构建的中小型项目中实现seajs的合并压缩。对于切换到gulp并使用seajs模块化的项目，模块合并压缩是一个重要的问题。

在解决这个问题的过程中，一开始并不顺利。在npm上并没有找到专门用于seajs合并压缩的流行gulp插件。在seajs的github上，虽然看到了不少的issue，但大多数方案只能将所有模块文件合并成一个总文件，这对于单页面应用来说可能没问题，但对于多页面应用而言，无法满足按需加载的需求。我们需要的解决方案是能够根据每个页面所依赖的模块进行按需合并。

按需合并意味着只合并一个页面所依赖的模块，同时能够过滤掉某些模块不参与合并。对于第三方依赖的库，如jquery等，可能文件较大且几乎不会改动其代码，因此这些模块不合并到页面的js中，有助于更好地利用浏览器缓存。

为了说明seajs合并后的效果，本文提供了一个演示demo。这个demo包含两个页面：login.html和regist.html，分别模拟多页应用中的两个独立文件。以login.html为例，查看这个页面的源文件中，只会看到它引用的seajs以及相关配置文件mon.js，以及作为页面main js的app/login模块。但实际上，login.js依赖了更多的模块js。

在进行seajs的模块组织时，可以借鉴requirejs的文件组织方式，尽量让文件组织扁平化。其中，js/app文件夹存放各个页面的main js，js/deps存放需要被合并到main js的第三方模块，js/lib存放不参与合并的第三方模块，js/mod存放项目中自己写的js模块，mon.js是seajs的配置文件。

具体的合并思路是，在mon.js中将js/lib下的模块配置到alias选项里，因为这些js不参与合并，需要使用浏览器缓存。通过配置alias，可以在修改或升级js/lib下的文件时方便地更新这些文件的加载地址。

模块开发中的gulp与seajs：从模块引入、合并到压缩混淆的完整流程

在模块开发的世界里，如何高效地管理和组织代码是一个重要的课题。当需要引入其他模块时，我的习惯是直接使用类似于“mod/mod1”这样的模块标识，避免使用相对路径，即使这些模块位于同一文件夹内。这种做法背后有一个清晰的逻辑，我将base目录设置为js文件夹，这有点类似于网站根目录的感觉。

在合并模块时，我主要依赖gulp-seajs-transport和gulp-seajs-concat这两个gulp插件。尽管它们在GitHub上并不热门，但它们却在我的项目中发挥了巨大的作用，使用起来也极其简便。

gulp-seajs-transport插件能够将seajs的模块文件从匿名模块转换为具名模块。例如，js/mod/mod1.js文件在构建前可能看起来并不起眼。经过transport处理后，它会发生变化。这是seajs合并工作中的关键步骤。与requirejs不同，seajs不能直接进行concat操作。必须先通过transport任务处理，将匿名模块转换为具名模块，并使用define的第二个参数来描述模块的所有依赖关系。只有完成transport处理后，才能使用gulp-seajs-concat进行合并。

gulp-seajs-concat插件在合并时非常简单，只需要设置一个base选项即可。这个base选项与js/mon.js中的base选项保持一致。这是因为gulp-seajs-concat可以根据base和经过transport处理后的模块，找到它所依赖的其他模块文件。

在页面中使用主js时，需要采用一种特定的方式。使用seajs加载模块时，参数的名称必须与被合并后的主js文件内的主模块ID保持一致。例如，js/app/login.js合并后会有一个特定的模块结构，其中的第一个define定义的模块就是合并后的主模块，其ID位于红框中。在seajs使用此模块时，参数名称必须与此ID完全匹配。否则，即使seajs成功加载了文件，也不会执行任何模块内的代码。这是因为seajs有一个规则，当使用多个模块的文件时，它会根据use的参数名称来寻找这个文件内的主模块，只有参数名称与主模块ID完全匹配，才能成功找到并执行相应的代码。

对于代码的压缩混淆，我使用gulp-uglify插件来处理。在处理时需要注意mangle选项，必须排除require、exports和module，否则可能会导致一些意外的问题。

本文的内容虽然看似简单，但在刚开始接触gulp和seajs时，却需要花费不少时间才能理解并解决其中的问题。尽管在准备demo的过程中进展顺利得多，但我仍然希望这篇文章能够帮助到一些朋友。通过深入了解模块开发中的gulp和seajs工作流程，我们可以更加高效地组织和管理代码，提高开发效率。