最近项目稳定了一点，之前一直没空关注的开发文件压缩打包问题也有时间来解决了
AMD模块化开发中的代码压缩打包工具——r.js
环境搭建基于nodejs；用于AMD模块化开发中的项目文件压缩打包，不是AMD模式也是可以的
javascript部分
压缩javascript项目开发文件夹
build.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
|
({ appDir : './project', //基于build，根目录
baseUrl : './', //基于appDir，项目目录
dir : './project.min', //基于build，输出目录
locale : 'en-us', //国际化配置
optimize: 'uglify', //压缩方式
paths : {
underscore: '../underscore.min',
backbone : '../backbone.min',
jquery : '../jquery.min',
...
},
modules: [
{
name: 'main' //配置
},
{
name: './controller/init' //控制器
},
{
name: './view/index' //首页
},
...
]
}) |
build.js里baseUrl值最好设置为与main.js里baseUrl值一样的路径，这样paths可以直接复制过来，否则需要重新为每个模块配置相对路径；另外，appDir值直接设置为项目文件夹路径，可以避免压缩到项目文件夹以外文件
modules设置合并压缩模块，配置相对路径时需基于baseUrl
所有设置的模块（即文件，下同），该模块与其所有依赖模块会被合并压缩；没有设置的模块，该模块会直接压缩，而不会与其依赖模块合并压缩
r.js提供了以下几种optimize值，即压缩方式
|
1
2
3
4
|
none：不压缩代码uglify：使用UglifyJS，默认closure：使用Google's Closure Compiler，简单优化closure.keepLines：使用Closure，换行 |
模块配置（个人方案，欢迎讨论完善）
我们的项目分为3大模块，入口配置模块main，控制器模块controller，视图模块view
main合并压缩了框架、插件及入口配置模块；该文件一旦完成极少改动，保留缓存更佳，设置urlArgs后文件也不会有版本号
controller合并压缩了公用模块及控制器模块；设置urlArgs后文件有版本号清除缓存
view合并压缩了模型及视图模块；设置urlArgs后文件有版本号清除缓存
压缩单个javascript文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
({ appDir : './project', //基于build，根目录
baseUrl : './', //基于appDir，项目目录
name : './view/index', //基于baseUrl，项目文件
out : './view/index.min', //基于baseUrl，输出文件
locale : 'en-us', //国际化配置
optimize: 'uglify', //压缩方式
paths : {
underscore: '../underscore.min',
backbone : '../backbone.min',
jquery : '../jquery.min',
...
}
}) |
开始压缩javascript文件
命令行进入文件所在文件夹，命令行运行node，找到r.js；直接处理配置文件
|
1
|
node r.js -o build.js |
没有配置文件，直接压缩javascript文件
|
1
|
node r.js -o baseUrl=project name=view\index out=view\index.min.js optimize=uglify |
bat一键压缩打包
运行需基于bat文件的当前所在目录
|
1
2
|
cd ..\project\static\jsnode r.js -o build.js |
css部分
开始压缩css文件
命令行进入文件所在文件夹，命令行运行node，找到r.js；cssIn指向待压缩的文件，out指向压缩后的文件，如压缩后的文件找不到则会自动生成
|
1
|
node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard |
相对路径什么的一定要找对，不然会报错
r.js提供了以下几种optimizeCss值，即压缩方式
|
1
2
3
4
5
|
none：不压缩，仅合并standard：标准压缩 去换行、空格、注释standard.keepLines：除标准压缩外，保留换行standard.keepComments：除标准压缩外，保留注释standard.keepComments.keepLines：除标准压缩外，保留换行注释 |
bat一键压缩打包
注意情况同上
|
1
2
3
4
|
cd ..\project\static\cssnode ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standardnode ..\js\r.js -o cssIn=login.css out=login.min.css optimizeCss=standardnode ..\js\r.js -o cssIn=detail.css out=detail.min.css optimizeCss=standard |
最近项目稳定了一点，之前一直没空关注的开发文件压缩打包问题也有时间来解决了
AMD模块化开发中的代码压缩打包工具——r.js
环境搭建基于nodejs；用于AMD模块化开发中的项目文件压缩打包，不是AMD模式也是可以的
javascript部分
压缩javascript项目开发文件夹
build.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
|
({ appDir : './project', //基于build，根目录
baseUrl : './', //基于appDir，项目目录
dir : './project.min', //基于build，输出目录
locale : 'en-us', //国际化配置
optimize: 'uglify', //压缩方式
paths : {
underscore: '../underscore.min',
backbone : '../backbone.min',
jquery : '../jquery.min',
...
},
modules: [
{
name: 'main' //配置
},
{
name: './controller/init' //控制器
},
{
name: './view/index' //首页
},
...
]
}) |
build.js里baseUrl值最好设置为与main.js里baseUrl值一样的路径，这样paths可以直接复制过来，否则需要重新为每个模块配置相对路径；另外，appDir值直接设置为项目文件夹路径，可以避免压缩到项目文件夹以外文件
modules设置合并压缩模块，配置相对路径时需基于baseUrl
所有设置的模块（即文件，下同），该模块与其所有依赖模块会被合并压缩；没有设置的模块，该模块会直接压缩，而不会与其依赖模块合并压缩
r.js提供了以下几种optimize值，即压缩方式
|
1
2
3
4
|
none：不压缩代码uglify：使用UglifyJS，默认closure：使用Google's Closure Compiler，简单优化closure.keepLines：使用Closure，换行 |
模块配置（个人方案，欢迎讨论完善）
我们的项目分为3大模块，入口配置模块main，控制器模块controller，视图模块view
main合并压缩了框架、插件及入口配置模块；该文件一旦完成极少改动，保留缓存更佳，设置urlArgs后文件也不会有版本号
controller合并压缩了公用模块及控制器模块；设置urlArgs后文件有版本号清除缓存
view合并压缩了模型及视图模块；设置urlArgs后文件有版本号清除缓存
压缩单个javascript文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
({ appDir : './project', //基于build，根目录
baseUrl : './', //基于appDir，项目目录
name : './view/index', //基于baseUrl，项目文件
out : './view/index.min', //基于baseUrl，输出文件
locale : 'en-us', //国际化配置
optimize: 'uglify', //压缩方式
paths : {
underscore: '../underscore.min',
backbone : '../backbone.min',
jquery : '../jquery.min',
...
}
}) |
开始压缩javascript文件
命令行进入文件所在文件夹，命令行运行node，找到r.js；直接处理配置文件
|
1
|
node r.js -o build.js |
没有配置文件，直接压缩javascript文件
|
1
|
node r.js -o baseUrl=project name=view\index out=view\index.min.js optimize=uglify |
bat一键压缩打包
运行需基于bat文件的当前所在目录
|
1
2
|
cd ..\project\static\jsnode r.js -o build.js |
css部分
开始压缩css文件
命令行进入文件所在文件夹，命令行运行node，找到r.js；cssIn指向待压缩的文件，out指向压缩后的文件，如压缩后的文件找不到则会自动生成
|
1
|
node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard |
相对路径什么的一定要找对，不然会报错
r.js提供了以下几种optimizeCss值，即压缩方式
|
1
2
3
4
5
|
none：不压缩，仅合并standard：标准压缩 去换行、空格、注释standard.keepLines：除标准压缩外，保留换行standard.keepComments：除标准压缩外，保留注释standard.keepComments.keepLines：除标准压缩外，保留换行注释 |
bat一键压缩打包
注意情况同上
|
1
2
3
4
|
cd ..\project\static\cssnode ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standardnode ..\js\r.js -o cssIn=login.css out=login.min.css optimizeCss=standardnode ..\js\r.js -o cssIn=detail.css out=detail.min.css optimizeCss=standard |