requireJS中如何用r.js对js进行合并和压缩css文件

浏览数：126 / 时间：2015年06月09日

　　我运行的环境是windows+node.js，首先是用npm安装requirejs（全局安装，即使用 ‘npm install requirejs -g‘，这样方便在各个目录调用），接着就是下载r.js了，可以到官网去下载，下载地址http://requirejs.org/docs/download.html#rjs 。我已经做好了简单的例子放到github里面，项目里面的.git相关的文件或文件夹和readme都不用管，这些属于github的文件，地址是https://github.com/subying/rjs-demo 。

　　下载完整之后，把r.js放到你的项目里面。要执行r.js要需要建立一个文件build.js，这个文件就是告诉程序合并那些资源，相当于一个配置文件。我在buid.js里面有了详细的介绍各个参数的使用

({
    // app顶级目录，非必选项。如果指定值，baseUrl则会以此为相对路径
    appDir: ‘./src‘

    // 模块根目录。默认情况下所有模块资源都相对此目录。
    // 若该值未指定，模块则相对build文件所在目录。
    // 若appDir值已指定，模块根目录baseUrl则相对appDir。
    ,baseUrl: ‘./js‘

    // 指定输出目录，若值未指定，则相对 build 文件所在目录
    ,dir: ‘./dist‘

    ,modules: [
        {
            name: ‘main‘
        }
        ,{
            name: ‘sub‘
        }
    ]

    // 不优化某些文件
    ,fileExclusionRegExp: /^(r|build)\.js$/

    // CSS 优化方式，目前支持以下几种：
    // none: 不压缩，仅合并
    // standard: 标准压缩，移除注释、换行，以及可能导致 IE 解析出错的代码
    // standard.keepLines: 除标准压缩外，保留换行
    // standard.keepComments: 除标准压缩外，保留注释 (r.js 1.0.8+)
    // standard.keepComments.keepLines: 除标准压缩外，保留注释和换行 (r.js 1.0.8+)
    ,optimizeCss: ‘standard‘

    //是否移除已经合并的文件
    ,removeCombined: true

    // 设置模块别名
    // RequireJS 2.0 中可以配置数组，顺序映射，当前面模块资源未成功加载时可顺序加载后续资源
    ,paths: {
        a:‘a‘
        ,b:‘b‘
        ,c:‘c‘
    }

    //配置模块依赖
    ,shim:{
        c:{
            exports: ‘yjs‘
        }
    }
})

　　我这里是把所有的源文件放到了项目目录下的src文件夹中，然后编译后的文件是放到了dist文件夹中，在build.js中已经说明了这一点，从上面代码可以看出来，我要合并的模块是main和sub，如果是main模块中请求到其他的模块，运行程序的时候就会自动加载进来。如：合并前的main

require.config({
    paths: {
        a: ‘a‘,
        b: ‘b‘
    }
});
require([‘a‘,‘b‘],function(a,b){
    a();
    b();
});

合并后的main：

define("a",[],function(){return function(){console.log("a")}}),define("b",[],function(){return function(){console.log("b")}}),require.config({paths:{a:"a",b:"b"}}),require(["a","b"],function(e,t){e(),t()}),define("main",function(){});

　　这样可以看出来了吧，加载了，压缩了。同时还可以压缩css，只要在build.js里面设置一下。可以运行一下我的例子就知道了，那么怎么运行呢，在项目的根目录下执行命令行（cmd.exe），运行命令 ‘ node r.js -o build.js ‘，是不是很简单。

　　里面也涉及了各种各样的配置，这个功能还是挺强大，需要更多的操作还要仔细研究，这个例子能够解决基本需求，给有需要的朋友，https://github.com/subying/rjs-demo 。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

requireJS中如何用r.js对js进行合并和压缩css文件