即刻等同篇来认识下打包工具的paths参数,在入门一曰镪即介绍了require.config方法的paths参数。用来布局jquery模块的文本称(jQuery作为AMD模块时id为“jquery”,但文件称而透过paths配置可以不必是“jquery.js”,而是包含版本的要“jquery-1.7.2.js”)。

 

以入门一中,jquery-1.7.2.js和main.js都于一个域中,即把jquery-1.7.2.js下充斥到本地了。但奇迹可能有JS资源不以跟一个地带。比如直接动用GoogleCDN上的jquery
1.7.2
本子。而此刻该怎么着采用打包工具r.js呢?

 

r.js自然不谋面错过载入非本地资源,即不能去把外国的js文件要下来还统一,压缩。当以paths参数后,使用r.js合并减时如不经意paths映射的公文-不统一它。让那些看作一个独立模块请求。

 

创目录和文件如下

jQuery 1

与齐同首一样,但main.js代码不同,注意目录中绝非jQuery库。

 

main.js

require.config({
    baseUrl: 'js',
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
    }
});

require(['jquery', 'event', 'selector'], function($, E, S) {
    alert($);
});

布了paths参数,即jquery模块使用Google CDN的文件。

 

万一遵照上平等首的吩咐来实施统一减,

node r.js -o
baseUrl=js name=main out=built.js

jQuery 2

察觉命令行报错了,指示“D:\work\req\r5\js\jquery.js”不设有。刚刚新建的目中审没jquery.js,因为我们以的是GoogleCDN上之jquery。

 

这收缩参数paths就散上用了,修改如下

node r.js -o
baseUrl=js name=main out=built.js paths.jquery=empty:

jQuery 3

小心藏肉色圈住的参数(empty后爆发个顶号哦),表示paths.jquery不出席联合,压缩。这时另外built.js也即便非分包它了。

 

拿目录r5置于apache或外web服务器上,访问index.html。

 

网络要如下

jQuery 4

built.js包含了main.js、event.js、cache.js,selector.js。jquery则是单独的一个要,来自ajax.googleapis.com。

 

再度看哪些拔取r.js来归并压缩css文件。在r5下新建一个css文件夹,里面有四独css文件:main.css、nav.css、form.css、grid.css。

jQuery 5

main.css是联合之主文件,或如配置文件。要联合的文本使用@import引入。如下

 

main.css

@import url("nav.css");
@import url("grid.css");
@import url("form.css");

 

除此以外四只是通常的css文件,里面定义的各样体制。那里不贴代码了。这里将使用命令行将即刻四单公文合并后生成至r5/css/built.css。

node r.js -o
cssIn=css/main.css out=css/built.css

jQuery 6

这时回到r5/css目录会发现差不多矣一个built.css文件,该文件是此外多只css文件之统一项。

 

尚可拔取optimizeCss参数设置来部署是否收缩和裁减选项。optimizeCss的取值有standard/none/standard.keepLines/standard.keepComments/standard.keepComments.keepLines。

none  不压缩,仅合并

standard  正式压缩 去换行、空格、注释

standard.keepLines  除标准压缩外,保留换行

standard.keepComments  除标准压缩外,保留注释

standard.keepComments.keepLines  除标准压缩外,保留换行和注释

 

示例:

node r.js -o
cssIn=css/main.css out=css/built.css optimizeCss=standard

减去后built.css整个为同一举行了。

 

总结:

1,对于path配置的非本地的模块文件,使用r.js合并减时用配置paths.xx=empty:。

2,cssIn和optimizeCss参数的使用来归并压缩css文件。

 

r5.zip

相关文章

网站地图xml地图