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 相关文章推荐
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
js canvas实现俄罗斯方块
Oct 11 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
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
JavaScript"模拟事件"的注意要点详解
2019/02/13 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
python单例设计模式实现解析
2020/01/07 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
应届生会计电算化求职信
2013/10/03 职场文书
商场促销活动总结
2014/07/10 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
工作证明英文模板
2014/10/21 职场文书
离婚财产分配协议书
2014/10/21 职场文书
教师节慰问信
2015/02/15 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
雷锋观后感
2015/06/10 职场文书
小学运动会前导词
2015/07/20 职场文书
企业宣传稿范文
2015/07/23 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
Python编写冷笑话生成器
2022/04/20 Python