不建议用命令行,还是用配置文件比较方便--build.js。
我的build.js文件内容大概如下:
( { appDir : './', baseUrl : './scripts', dir : './dist', modules : [{ name : 'main' }],
//忽略的文件--不用管目录结构,只需把需要忽略的文件名写出来就行 fileExclusionRegExp : /^(r|build).js|(test.html)$/, optimizeCss : 'standard', removeCombined : true, paths : { jquery : 'jquery-1.10.1.min', config : 'config', //其他的JS文件 otherjs : 'otherjs' }, shim : { otherjs : { exports : 'otherjs', deps : ['jquery'] } } })
注意事项:
1 这里面的paths和shim,其实和main.js中的几乎一样。
2 如果有在线引用的js文件,那可通过在其对应的值改为'empty:'就行。所以,第1点说的几乎一样,就是除了':empty'不一样之外,其他是一样的。
比如jquery.js是在线引用的,那就需要写成:jquery:'empty:'。
【但是,如果其他本地文件引用了jquery,那这时候就会出错了。解决方法就是把所依赖的jquery也放在本地。】
build.js文件写好之后,就可以开始用命令来打包了。
cd到当前目录,然后,输入:node r.js -o build.js 【r.js是依赖node的,[npm install requirejs],具体请查看:http://requirejs.org/docs/node.html】
最后,就会根据build.js配置文件来打包。
r.js的不好的地方就是打包js和css是分开的。
下面是打包css文件的方式。
1 在一个css文件【在上面已经打包好的dist目录下的css文件】的头部,通过@import的方式引入其他需要打包的css文件。比如在main.css文件的头部引入其他文件:
@import url('css/test1.css');
@import url('css/test2.css');
2 在命令行输入:node r.js -o cssIn=dist/styles/main.css out=dist/styles/main.min.css
这样就会把main.css文件以及@import进来的css文件都打包压缩好。
3 这时候,还需要手动把多余的文件或文件目录删掉
这样就大功告成了。
//==============================================//
build.js文件详情如下:
https://github.com/jrburke/r.js/edit/master/build/example.build.js
中文可参考:
http://www.cnblogs.com/didi/p/4146656.html
其他相关文章:
http://stackoverflow.com/questions/23978361/using-gulp-to-build-requirejs-project-gulp-requirejs
http://www.cnblogs.com/snandy/archive/2012/06/07/2537477.html
http://www.oschina.net/translate/optimize-requirejs-projects