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 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
javascript 实现 原路返回
Jan 21 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
JS实现京东商品分类侧边栏
Dec 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
西德产收音机
2021/03/01 无线电
php自动适应范围的分页代码
2008/08/05 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Python set常用操作函数集锦
2017/11/15 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
在django模板中实现超链接配置
2019/08/21 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
工作建议书范文
2019/07/08 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang