requirejs的打包工具r.js

不建议用命令行，还是用配置文件比较方便--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