如何将Grunt任务中的Seajs模块打包成？

grunt与seajs grunt是前端流行的自定义任务的脚手架工具，我们可以使用grunt来为我们做一些重复度很高的事情，如压缩，合并，js语法检查等。通过定义grunt的配置文件Gruntfile.js，配置并注册grunt的任务，最终我们可以通过命令行来执行任务。 seajs主要用于模块化，通过define定义一个模块，可以通过require加载模块，exports导出模块。具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解。 在实际生产中，如果紧紧定义一系列seajs模块而并不进行合并压缩的话，加载性能很低，原因大家都懂的，seajs在浏览器端处理依赖模块，并进行异步加载，这个过程中会有多个http请求，大大降低页面的加载速度。所以结合grunt构建工具，我们可以将模块的依赖处理放到服务端进行，并将所有模块合并压缩，完成生产所需的最终文件。 在seajs社区中，已经提供了一款npm模块，即grunt-cmd-transport。我们通过该模块给seajs模块命名，并处理各模块之间的依赖。这项工作听起来很简单，但是在笔者的实践过程中出现的问题却不少，因此本文着重讲解transport任务的相关配置。 grunt的相关文件 grunt相关文件包括了2个，首先是Gruntfile.js，另一个是package.json文件。Gruntfile进行grunt任务的配置及注册，package.json用于向Gruntfile提供参数，并设置依赖的npm模块。 在下面package.json中，定义spm键，设置模块的别名，在Gruntfile中，通过pkg = grunt.file.readJSON()来读取package配置文件，并通过<%= pkg.spm.alias %>获取模块别名。 package.json { "name" : "HelloSeaJS", "version" : "1.0.0", "author" : "yang li", "spm": { "alias": { "jquery": "jquery" } }, "devDependencies" : { "grunt" : "0.4.1", "grunt-cmd-transport": "~0.2.0", "grunt-cmd-concat": "~0.2.0", "grunt-contrib-uglify" : "0.2.0", "grunt-contrib-clean" : "0.4.0" } } 接下来我们进行设置grunt。Gruntfile.js其实就是一个node模块，依然使用闭包将所有的逻辑进行包裹，并提供了grunt参数，通过grunt.initConfig进行任务的配置。 对于seajs模块而言，首先需要处理各模块之间的依赖，我们通过设置transport任务来完成。seajs遵循的是CMD规范，在定义模块时不需要制定模块名和模块的依赖组，只需设置工厂函数即可。其实在未使用grunt进行合并seajs时（即在浏览器端处理模块依赖），seajs设置模块id和uri相同，为绝对路径。在这个过程中有些小技巧，在Seajs源码解析系列中并未提到，现在在这里着重分析下： <script src="../sea-debug.js"></script> <script> seajs.config({ base: "../gallery/", alias:{ jquery: 'jquery/jquery-1.11.1' } }) seajs.use("../application.js") </script> 对于上述代码，application.js并没有合并seajs模块，我们通过seajs.use创建了一个匿名use模块，通过 var mod = Module.get(uri, isArray(ids) ? ids : [ids]) 来实现，并设置依赖。在此处，依赖为[‘../application.js’]；然后设置use模块的callback，并调用load函数加载依赖模块。