Grunt 构建SeaJS

GitHub地址：https://github.com/MrLeo/SeaJS

目录结构

目录结构说明

web存放HTML文件

static存放所有HTML需要用到静态资源文件（css、js、img…）

• module存放HTML对应的业务模块
• common存放与业务无关的模块

Get Start

准备工作

1. 安装 Node.js 及 npm

2. 安装 grunt-cli （允许安装多版本grunt）

$ npm install -g grunt-cli

```

1. 用命令行进入到项目所在目录

$ cd /d F:\WWW\SeaJS\static

```

1. 安装 grunt 及 插件 到项目所在目录（--save-dev）

$ npm install grunt --save-dev //grunt

$ npm install grunt-cmd-transport --save-dev //提取模块ID

$ npm install grunt-cmd-concat --save-dev //合并文件

$ npm install grunt-contrib-uglify --save-dev //压缩文件

$ npm install grunt-contrib-clean --save-dev //清理临时目录

```

构建项目

1. 创建package.json

此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

```
{
  "name": "SeaJS",
  "version": "1.0.0",
  "author": "Leo",
  "spm": {
    "alias": { //同 seajs.config 中设置的别名
    	"base": "module/base/base",
    	"jquery": "libs/jquery/jquery-1.8.3.min"
    }
  },
  "devDependencies": { //grunt 构建用到的依赖包
    "grunt": "*", //"*"代表最新版本;"~0.4.1"代表指定版本
    "grunt-cmd-transport": "*",
    "grunt-cmd-concat": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-clean": "*"
  }
}
```

1. 创建Gruntfile.js

此文件用来配置或定义任务（task）并加载Grunt插件的。Gruntfile.js 是有效的 JavaScript 文件，和package.json文件在同一目录层级。

```js
module.exports = function(grunt) {
    require('time-grunt')(grunt);//Time how long tasks take
    //require('load-grunt-tasks')(grunt);//Load grunt tasks automatically

	grunt.initConfig({
		pkg: grunt.file.readJSON("package.json"), //引入package.json的JSON元数据
		/**
		 * step 1:
		 * 创建一个临时目录
		 * 将需要合并的js文件转为具名函数，并保持独立地保存在这个临时目录
		 */
		transport: {//task任务
			options: {
				paths: ['.'], //模块的路径，'.'代表相对路径，默认的是 sea-modules
				alias: '<%= pkg.spm.alias %>' //模板字符串语法来从package.json引入模块别名
			},
			common: {//target
				options: {
					idleading: 'common-dist/', //构建后的模块ID的前缀
				},
				files: [{
					expand: true, //开启处理动态的src-dest文件映射
					filter: 'isFile', //匹配过滤src文件路径
					cwd: 'common', //所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
					src: '**/*.js', //相对于cwd路径的匹配模式(**代表当前路径以及子路径)
					dest: '.build/common' //目标文件路径前缀
				}]
			},
			base: {
				options: {
					idleading: 'module/base-dist/',
				},
				files: [{
					expand: true,
					filter: 'isFile',
					cwd: 'module/base',
					src: '**/*.js',
					dest: '.build/module/base'
				}]
			},
			demo: {
				options: {
					idleading: 'module/page-dist/demo/',
				},
				files: [{
					expand: true,
					filter: 'isFile',
					cwd: 'module/page/demo',
					src: '**/*.js',
					dest: '.build/module/page/demo'
				}]
			}
		},
		/**
		 * step 2:
		 * 将临时目录下独立的具名函数文件 合并为 1个 js 文件
		 * 将这个合并的 js 文件 拷贝到 我们的输出目录
		 */
		concat: {
			options: {
				separator: ';', // 定义一个用于插入合并输出文件之间的字符
				include: 'relative' //relative（默认）只会合并相对标识的依赖；；all会合并所有依赖
			},
			common: {
				files: [{
					expand: true,
					ext: '.js',
					cwd: '.build/common/',
					src: ['**/*.js'],
					dest: 'common-dist/'
				}]
			},
			demo: {
				files: {
					'module/page-dist/demo/index.js': ['.build/module/page/demo/index.js'],
					'module/page-dist/demo/index-debug.js': ['.build/module/page/demo/index-debug.js']
				}
			}
		},
		/**
		 * step 3:
		 * 压缩 这个 合并后的 文件
		 */
		uglify: {
			common: {
				options: {
					// 此处定义的banner注释将插入到输出文件的顶部
					banner: '/*! <%= pkg.author %>  @  <%= grunt.template.today("dd-mm-yyyy") %> */\n'
				},
				files: [{
					expand: true,
					ext: '.js',
					cwd: 'common-dist/',
					src: ['**/*.js', '!**/*-debug.js'],
					dest: 'common-dist/'
				}]
			},
			main: {
				options: {
					// 此处定义的banner注释将插入到输出文件的顶部
					banner: '/*! <%= pkg.author %>  @  <%= grunt.template.today("dd-mm-yyyy") %> */\n'
				},
				files: {
					'module/page-dist/demo/index.js': ['module/page-dist/demo/index.js']
				}
			}
		},
		/**
		 * step 4:
		 * 将这个临时目录删除
		 */
		clean: {
			spm: ['.build']
		}
	});

	grunt.loadNpmTasks('grunt-cmd-transport');
	grunt.loadNpmTasks('grunt-cmd-concat');
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.registerTask('build', ['transport', 'concat', 'uglify', 'clean']);
};

```

1. 用命令行进入到 Gruntfile.js 所在目录，执行 grunt

grunt build

参考

• Grunt中文文档
• https://github.com/seajs/seajs/issues/672
• https://github.com/jixiangac/lili/tree/master/public/js
• http://www.cnblogs.com/hongchenok/p/3924633.html
• http://www.jackness.org/2015/01/02/grunt-实例之-构建-seajs-项目/