r.js来合并压缩css文件的示例


Posted in Javascript onApril 26, 2018

如何使用r.js来合并压缩css文件。在r5下新建一个css文件夹,里面有四个css文件:main.css、nav.css、form.css、grid.css。

r.js来合并压缩css文件的示例 

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

main.css

@importurl("nav.css");
@importurl("grid.css");
@importurl("form.css");

另外三个是普通的css文件,里面定义的各种样式。这里不贴代码了。这里将使用命令行将这四个文件合并后生成到r5/css/built.css。

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

r.js来合并压缩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

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

总结:

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

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

总结

以上所述是小编给大家介绍的r.js来合并压缩css文件的示例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
Webpack打包字体font-awesome的方法示例
Apr 26 #Javascript
webpack配置打包后图片路径出错的解决
Apr 26 #Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
Javasript设计模式之链式调用详解
Apr 26 #Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
简述php环境搭建与配置
2016/12/05 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
带你了解python装饰器
2017/06/15 Python
Python处理文本换行符实例代码
2018/02/03 Python
python基于http下载视频或音频
2018/06/20 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
如何书写民事调解协议书?
2019/06/25 职场文书