最后看一下手动合并的最终代码

//main.js define('dist/main',['dist/spinning'],function(require) { var Spinning = require('dist/spinning'); var s = new Spinning('#container'); s.render(); }); //spinning.js define('dist/spinning',['jquery'],function(require, exports, module) { var $ = require('jquery'); ... });

当然这还没有结束，还需要在做下压缩代码。

手动合并让我们更加清楚知道生成module_id，合并的原理，下课时我们就来看看如何使用grunt来进行文件合并。

使用 Grunt 作为 seajs的 构建工具

使用构建工具来做 进行合并、调整、压缩工作，相信大家对grunt都有所了解，不了解的话百度之。

根据上一课时说的 seajs 工作原理，我们其实想让构建工具完成的是以下的几个事情

seajs 提供以下 grunt 的插件来 构建 项目

grunt-cmd-transport（用于将匿名函数转为 具名函数） grunt-cmd-concat（根据文件中的 id 自动 拷贝对应目录文件的内容到 同一文件下）

那么我们来尝试使用grunt。

package.json：

{ "name": "hello", "version": "1.0.0", "author": "jackness Lau", "devDependencies": { "grunt": "0.4.1", "grunt-cmd-transport": "0.1.1", "grunt-cmd-concat": "0.1.0", "grunt-contrib-copy": "^0.7.0", "grunt-contrib-uglify": "0.2.0", "grunt-contrib-clean": "0.4.0" } }

使用 npm install 获取需要使用的grunt插件

Gruntfile.js:

module.exports = function(grunt) { grunt.initConfig({ /** * step 1: * 将入口文件拷贝到 产出目录 */ copy: { dev:{ files:{ "static/js/dist/main.js":["static/js/src/main.js"], "static/js/dist/spinning.js":["static/js/src/spinning.js"] } } }, /** * step 2: * 创建一个临时目录 * 将需要合并的js文件转为具名函数，并保持独立地保存在这个临时目录 */ transport: { dev: { options: { // 是否采用相对地址 relative: true, // 生成具名函数的id的格式 默认值为 {{family}}/{{name}}/{{version}}/{{filename}} format: './static/js/{{filename}}' }, files: [{ // 相对路径地址 'cwd':'static/js/', // 需要生成具名函数的文件集合 'src':['dist/main.js','dist/spinning.js'], // 生成存放的文件目录。里面的目录结构与 src 里各个文件名带有的目录结构保持一致 'dest':'.build' }] } }, /** * step 3: * 将临时目录下独立的具名函数文件 合并为 1个 js 文件 * 将这个合并的 js 文件 拷贝到 我们的输出目录 */ concat: { dev: { options: { // 是否采用相对地址 relative: true }, files: { // 合并后的文件地址 'static/js/dist/main.js': ['.build/dist/main.js'] } } }, /** * step 4: * 压缩 这个 合并后的 文件 */ uglify: { dev: { files: { 'static/js/dist/main.min.js': ['static/js/dist/main.js'] } } }, /** * step 5: * 将这个临时目录删除 */ clean: { build: ['.build'] } }); grunt.loadNpmTasks('grunt-cmd-transport'); grunt.loadNpmTasks('grunt-cmd-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('default', ['copy','transport', 'concat','uglify','clean']);

};

下来执行grunt 不出差错的话，会在static/js目录下生成一个dist目录，里面包含了合并但没压缩的spinning.js和合并且压缩好的main.min.js。

修改hello.html

seajs.use("./static/js/dist/main.min.js", function() { console.log("init"); });

这里使用的grunt-cmd-transform和grunt-cmd-concat版本上都有点老，大家可以尝试使用最新版本做下。