JavaScript模块化解决方案Sea.js+Grunt（中）

上一节讲了模块化的背景，为什么会需要模块化。在讲更深入一点的Sea.js解决模块化问题之前，我想有必要了解一下模块化的发展进程。

1.模块化的发展进程

2009年Ryan Dahl这个家伙发布了第一个版本的Node.js，其实第一次我接触到这个东东的时候以为是类似于jQuery的一个JavaScript类库，事实上这个理解是错误的。Node.js是一个服务器端运行的程序，可以说Node是一个Javascript运行环境(runtime)，类似于WEB服务器这个概念。从此这个Node颠覆了我对WEB开发的认识，这个家伙在以后的发展中一定前途无量。具体点击这里。作为服务端运行的容器必须提供一系列的类库类似于Java中的JDK中的类库一样，提供http,concurrent,exception等等的功能。所以必须要有一套服务端的JavaScript规范这个时候就出现了commonJS这一套规范，使得在服务端JavaScript有了一个标准。在这之后浏览器端的JavaScript程序也相继出现了一系列的规范来对程序模块化进行规范。浏览器模块化规范有两大阵营：

1. AMD规范
   典型代表：RequireJS
   AMD 即Asynchronous Module Definition，中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范，服务器端的规范是CommonJS。模块将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。

2. CMD规范
   典型代表：Sea.js
   其实这两大阵营的规范都是借鉴commonJS规范发展而来的，这样才能推动JavaScript朝着好的方向发展，同时Node.js的出现将会冲击Java.NET\PHP等霸占的WEB份额，拭目以待。

2.Grunt构建工具用来干什么呢

经常在我们在PC上开发的时候按照一定的规范码代码，实际上在看到上线后的项目代码都是被压缩后和合并后的代码。如果从PC开发、模块合并、线上发布这一系类的流程都是手动进行的话，项目大了，说不定会发什么什么事情呢，你可以想象一下。。。这个时候就要借助于Grunt这个项目构建工具了
如何使用请看下面流程化的操作：

第一步安装Node.js

官网选择适合自己的PC版本，然后一步一步下一步，OK…最后记得将Node安装目录配置到环境变量中

第二步安装Grunt

如下图：一步步安装，如果命令不理解，先用着….

然后运行、并且如果看到版本信息，表示成功安装了…

OK,Grunt Task Runner安装大功告成。

3.合并和压缩项目中的各个模块

第一步 合并各个模块的JS文件

1.切换到项目的目录目录中例如我的项目如下图：

2.在当前项目中便写package.json文件
其中合并插件在这里找到搜索到的，package.json里面的内容可以在这里找到。

{  "name": "box",//项目名称  "version": "0.1.0",//版本号  "devDependencies": {    "grunt": "~0.4.5",//当前grunt版本    "grunt-contrib-concat": "~0.5.1"//合并插件  }}

然后CMD中切换到当前项目目录中执行如下命令：

当前文件夹中多了一个目录如下图：

3.在当前项目目录中编写项目构建文件Gruntfile.js如上图：

module.exports = function(grunt) {  //grunt的初始化配置  grunt.initConfig({    //读取配置文件    pkg: grunt.file.readJSON('package.json'),    concat: {      box:{        //将main.js drag.js bigger.js中的内容合并到dist文件夹main.js中        files:{            'dist/main.js':['main.js','drag.js','bigger.js']        }      }    }  });  //加载任务  grunt.loadNpmTasks('grunt-contrib-concat');  //注册任务  grunt.registerTask('default', ['concat']);};

然后在CMD中执行grunt命令如下图：

可以发现在项目中多了一个文件夹dist，而且种种的main.js合并了其他几个js文件中的所有内容。用同样的方法可以完成模块代码的压缩。

第二步 压缩模块中JS代码

1.在package.json中添加压缩插件的代码如下：

{  "name": "box",//项目名称  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.5",    "grunt-contrib-concat": "~0.5.1",//合并插件    "grunt-contrib-uglify": "~0.8.0"//压缩插件  }}

重新执行npm install命令下载压缩插件。
2.修改Gruntfile.js如下：

module.exports = function(grunt) {  //grunt的初始化配置  grunt.initConfig({    //读取配置文件    pkg: grunt.file.readJSON('package.json'),    concat: {      box:{        //将main.js drag.js bigger.js中的内容合并到dist文件夹main.js中        files:{            'dist/main.js':['main.js','drag.js','bigger.js']        }      }    },    uglify: {      box:{        //将main.js进行压缩        files:{            'dist/main.min.js':['dist/main.js']        }      }    }  });  //加载任务  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.loadNpmTasks('grunt-contrib-uglify');  //注册任务  grunt.registerTask('default', ['concat','uglify']);};

然后再CMD中执行 grunt 命令就可以在项目dist文件夹中发现压缩版的main.min.js文件。

到此JavaScript中模块化解决方案中的项目文件合并和压缩全部完成，下一讲将会介绍Sea.js和Grunt联合开发，深入理解Sea.js的应用。

参考文章列表：

• CommonJS规范
• AMD (中文版)
• 详解JavaScript模块化开发
• RequireJS与SeaJS模块化加载示例
• 浅谈模块化加载的实现原理

非常高兴和大家交流学习
自由转载，创意许可，请文章来源，来自这里
(http://blog.csdn.net/unikylin)