借助node 使用 requirejs 打包
requirejs 打包输出单个文件
当前是 ubuntu 12.04 开发环境。
安装requirejs 模块
$:/var/www/project$ npm install requirejs
此时, project目录下面 就多了一个 node_modules 文件夹.
里面 /node_modules/requirejs/bin/r.js
是打包需要的文件,可以把这个文件 黏贴到项目根目录下
打包压缩命令行的两种表达方式
参考 http://www.cnblogs.com/snandy/archive/2012/06/06/2536969.html
初始化目录结构是:
index.html
r.js
resources(dir)
--------images(dir)
--------css(dir)
--------js(dir)
----main.js
----core(dir)
----cache.js
----event.js
- 第一种直接 输入 入口文件 ,打包属性,输出文件
node r.js -o baseUrl=resources/js name=main out=release.js
通过第一种方法来注意以下几点:
属性值:
baseUrl
: js的目录
name
: 在 baseUrl 目录下找对应文件, 即baseUrl+main去查找. 这个例子中就是 找 resources/js/main.js ,而 main.js 就是入口文件
.
out
: 打包好的文件 输出的位置,相对于 当前的r.js
但是, 常见情况是入口文件
中肯定会定义了 require.config(这样才能清晰的管理js文件),需要使用 mainConfigFile属性,建议可以使用第二种方法
- 第二种 ,写一个 打包规则的 json格式文件
参考http://tech.pro/blog/1639/using-rjs-to-optimize-your-requirejs-project
初始化目录结构是:
index.html
r.js
build.js
resources(dir)
--------images(dir)
--------css(dir)
--------js(dir)
----main.js
----core(dir)
----cache.js
----event.js
和之前的结构都一样,只是在 r.js目录下创建一个build.js 文件
node r.js -o build.js
在build.js 文件里面
({
baseUrl: "resources/js",
name: "main",
out:"release.js",
optimize:"none",
paths: {
'cacher': 'core/cache',
'eventer': 'core/event'
}
})
p.s:用上面的内容打包 ,第一次还报错了,后来调换了paths 属性放到头部,就解决了,之后没有重现该问题
注意
:里面path的路径 是相对于 入口文件 main.js而言的.
属性整理
optimize
: (none/uglify/closure) 指定是否压缩,默认为uglify
- "uglify:使用 UglifyJS 压缩代码,默认值;
- "uglify2":使用 2.1.2+ 版本进行压缩;
- "closure": 使用 Google's Closure Compiler 进行压缩合并,需要 Java 环境;
- "closure.keepLines":使用 Closure Compiler 进行压缩合并并保留换行;
- "none":不做压缩合并;
不传该参数时r.js默认以UglifyJS压缩。设置为none则不会压缩,仅合并,这在开发阶段是很用用的。
removeCombined
: 删除之前压缩合并的文件,默认值 false。