SeaJS在2.0之前,是采用SPM作为压缩合并工具的,到了2.0,改为Grunt.js,SPM变为包管理工具,类似NPM(不知道NPM?Google一下吧)
自动化不仅是科技带给社会的便利,也是Grunt带给前端的瑞士军刀。使用Grunt,可以很方便的定制各种任务,如压缩、合并等。使用Grunt之前,需要安装node环境和grunt工具,Google一下,十分钟后回来。
……
Grunt最核心的就两个部分,package.json、Gruntfile.js。
a. package.json
Grunt把一个项目/目录视为一个npm模块,package.json就是用来描述这个模块的信息,包括name、version、author等等。
这里强调一下,Grunt既然将该目录视为一个模块,那么该模块当然可以依赖其他模块。
我们看本示例的:
1
2
3
4
5
6
7
8
9
10
11
12
|
{
"name" : "HelloSeaJS",
"version" : "1.0.0",
"author" : "Qifeng Liu",
"devDependencies" : {
"grunt" : "0.4.1",
"grunt-cmd-transport" : "0.1.1",
"grunt-cmd-concat" : "0.1.0",
"grunt-contrib-uglify" : "0.2.0",
"grunt-contrib-clean" : "0.4.0"
}
}
|
devDependencies就是用来描述自身所依赖的模块
其中:
grunt模块用来跑Gruntfile.js中定义的任务
grunt-cmd-transport模块用来对SeaJS定义的模块进行依赖提取等任务
grunt-cmd-concat模块用来对文件进行合并
grunt-contrib-uglify模块用来压缩JavaScript
grunt-contrib-clean模块用来清除临时目录
b. Gruntfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
module.exports = function(grunt){
grunt.initConfig({
transport : {
options : {
format : 'application/dist/{{filename}}' //生成的id的格式
},
application : {
files : {
'.build' : ['application.js','util.js'] //将application.js、util.js合并且提取依赖,生成id,之后放在.build目录下
}
}
},
concat : {
main : {
options : {
relative : true
},
files : {
'dist/application.js' : ['.build/application.js'], // 合并.build/application.js文件到dist/application.js中
'dist/application-debug.js' : ['.build/application-debug.js']
}
}
},
uglify : {
main : {
files : {
'dist/application.js' : ['dist/application.js'] //对dist/application.js进行压缩,之后存入dist/application.js文件
}
}
},
clean : {
build : ['.build'] //清除.build文件
}
});
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('build',['transport','concat','uglify','clean'])
};
|
定义好两个文件之后,就可以进入到application目录下,首先运行:
npm install
该命令会下载好package.json中依赖的模块
然后运行
grunt build
该命令会运行grunt.registerTask方法中指定的任务
不出差错的话,会在application目录下生成一个dist目录,里面包含了合并但没压缩的application-debug.js和合并且压缩好的application.js。
修改index.html的
<script src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/application"></script>
为
<script src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/dist/application"></script>
大功告成!
http://www.k68.org/?p=1232
http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml