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

  我运行的环境是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 。

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