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 。