这一篇来认识下打包工具的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资源不在同一个域。比如直接使用Google CDN上的jquery 1.7.2版本。而这时应该如何使用打包工具r.js呢?

r.js自然不会去载入非本地资源,即没有办法去把外域的js文件请求下来再合并,压缩。当使用paths参数后,使用r.js合并压缩时要忽略paths映射的文件-不合并它。让其作为一个独立模块请求。

创建目录及文件如下

和上一篇一样,但main.js代码不同,注意目录中没有jQuery库。 ~~~jquery从cdn加载

main.js

1
2
3
4
5
6
7
8
9
10
require.config({
    baseUrl: 'js',
    paths: {
    }
});
 
require(['jquery', 'event', 'selector'], function($, E, S) {
    alert($);
});

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

如果按照上一篇的命令来执行合并压缩,

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

发现命令行报错了,提示“D:\work\req\r5\js\jquery.js”不存在。刚刚新建的目录中的确没有jquery.js,因为我们使用的是Google CDN上的jquery。

此时压缩参数paths就排上用处了,修改如下~~排除paths路径别名对应的某个模块不压缩 如  paths.jquery=empty:

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

注意红色圈住的参数(empty后有个冒号哦),表示paths.jquery不参与合并,压缩。这时生成的built.js也就不包含它了。

把目录r5放到apache或其它web服务器上,访问index.html。

网络请求如下

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。

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

main.css

1
2
3
@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

这时回到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

~~~通过在main.css里只 @import url('a.css'); 可以把 r.js作为单个css文件的压缩工具使用

压缩后built.css整个为一行了。

总结:

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

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

转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)的更多相关文章

  1. 转:requirejs打包压缩r.js使用示例

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  2. requirejs 使用实例r.js打包

    在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...

  3. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  4. FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题

    FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题 https://fly.layui.com/jie/2120/ layer是requirejs压缩文件r.js里面的关键字 ...

  5. r.js结合gulp等于webpack(angular为例)

    本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...

  6. requirejs原理深究以及r.js和gulp的打包【转】

    转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...

  7. 【实践】require.js + r.js 代码打包压缩初体验

    第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...

  8. requirejs的打包工具r.js

    不建议用命令行,还是用配置文件比较方便--build.js. 我的build.js文件内容大概如下: ( { appDir : './', baseUrl : './scripts', dir : ' ...

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

    我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...

随机推荐

  1. Oracle 11g RAC features

    <一,> oracle 11g r2 RAC提供了以下功能: 高可用:shared-everything 模式保证了单节点的故障不会停止服务,集群中的其他节点将快速接管 可扩展性:多节点分 ...

  2. hdu 1394 zoj 1484 求旋转序列的逆序数(并归排序)

    题意:给出一序列,你可以循环移动它(就是把后面的一段移动到前面),问可以移动的并产生的最小逆序数. 求逆序可以用并归排序,复杂度为O(nlogn),但是如果每移动一次就求一次的话肯定会超时,网上题解都 ...

  3. iOS 按钮倒计时功能

    iOS 按钮倒计时功能, 建议把按钮换成label,这样会避免读秒时闪烁 __block ; __block UIButton *verifybutton = _GetverificationBtn; ...

  4. Android 开发佳站【转】

    Android控件拖动 这里演示控件拖动的动画:     原理就是响应控件的Touch事件,在Touch事件中对移动进行处理,注意,一定要在布局文件中设置控件的 android:clickable=& ...

  5. Android实现左右滑动指引效果

    本文介绍Android中实现左右滑动的指引效果. 关于左右滑动效果,我在以前的一篇博文中提到过,有兴趣的朋友可以查看:http://www.cnblogs.com/hanyonglu/archive/ ...

  6. ios开发学习笔记(1)

    objective-c基础总结 第一二章 1.application:didiFinishLauchingWithOptions:程序启动后立即执行 2.启动界面代码格式:self.window = ...

  7. 【LINUX】SHELL syntax error:unexpected end of file

    解决思路: DOS下文件和Linux下文件格式差异问题导致的. DOS下的文本文件是以\r\n作为断行标志的,表示成十六进制就是0D 0A.而Unix下的文本文件是以\n作为断行标志的,表示成十六进制 ...

  8. 一道试题引发的血案 int *ptr2=(int *)((int)a+1);

    某日,看到一道比较恶心的C语言的试题,考了很多比较绕的知识点,嘴脸如下: int main(void) { int a[4] = {1, 2, 3, 4}; int *ptr1=(int *)(&am ...

  9. 0603 python 基础02

    作业1:ANSI和utf8的区别? ASCII是用来表示英文字符的一种编码规范,每个ASCII字符占用1个字节(8bits). 可以表示的最大字符数是256,一般只用前128个(最高位为0),其中包括 ...

  10. kafka集群配置与测试

    刚接触一些Apache Kafka的内容,用了两天时间研究了一下,仅以此文做相关记录,以供学习交流.  概念: kafka依赖的项: 1. 硬件上,kafka利用线性存储来进行硬盘直接读写. 2. k ...