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 相关文章推荐
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
vue 中的动态传参和query传参操作
Nov 09 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字符串截取的简单方法
2013/07/04 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
vue项目实战总结篇
2018/02/11 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
token 机制和实现方式
2020/12/15 Javascript
Python性能优化技巧
2015/03/09 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python中如何写类
2020/06/29 Python
解决python3输入的坑——input()
2020/12/05 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
公司委托书范本
2014/04/04 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers