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

如何使用r.js来合并压缩css文件。在r5下新建一个css文件夹，里面有四个css文件：main.css、nav.css、form.css、grid.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

这时回到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文件的示例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

    如何使用r.js来合并压缩css文件.在r5下新建一个css文件夹,里面有四个css文件:main.css.nav.css.form.css.grid.css. main.css是合并的主文件,或称配置文件.要合并的文件使用@import引入.如下 main.css @importurl("nav.css"); @importurl("grid.css"); @importurl("form.css"); 另外三个是普通的css文件,里面定义的各

  • 利用r.js打包模块化的javascript文件方法示例

    利用r.js打包模块化的javascript文件方法示例

    前言 r.js(本地下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.本文将详细介绍r.js的相关内容,感兴趣的朋友们下面来一起看看吧. 简单打包 [项目结构] 以一个简单的例子来说明r.js的使用.该项目名称为'demo',在js目录下包含s1.js和s2.js两个文件,使用requirejs进行模块化,内容如下 //s1.js define(funct

  • Python利用第三方模块实现压缩css文件

    目录 csscompressor 库使用 cssmin 库的用法 rcssmin 库的用法 总结 csscompressor 库使用 在 Python 中可以使用多种方法来压缩 CSS 文件.其中一种流行的方法是使用 csscompressor 库,这个库可以帮助你压缩 CSS 代码,减小文件大小.在控制台中运行 pip install csscompressor 来安装这个库. 后续的核心是使用 csscompressor.compress() 函数来压缩 CSS 文件. 接下来演示一下最基础

  • 动态加载、移除js/css文件的示例代码

    本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码. <script language="JavaScript"> //动态加载一个js/css文件 function loadjscssfile(filename, filetype){ if (filetype=="js"){ varfileref=document.createE

  • PHP实现动态压缩js与css文件的方法

    本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要在头部引入一下代码即可: <meta charset="utf-8"/> <title>demo</title> <?php //定义需要压缩的文件 $css = array( CSS_PATH . 'base.css', CSS_PATH . '

  • 多个js与css文件的合并方法详细说明

    在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件. 下面就简单介绍一个方法,十分简单.下面介绍以合并js文件为例 (1) G.js文件 复制代码 代码如下: ~function(){ window.G={}; G.Method={ add:function(){ alert(111);} ,sub:function(){

  • 小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的path

  • Asp.net MVC下使用Bundle合并、压缩js与css文件详解

    Asp.net MVC下使用Bundle合并、压缩js与css文件详解

    前言 介绍本文的正式内容之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件.但是可能相对较少的人才会知道,你的浏览器在同一个域名下并发加载的资源数量是有限的,例如IE 6和IE 7是两个,IE 8是6个,chrome各版本不大一样,一般是4-6个.Bundle是ASP.NET 4.5中的一个新特性,可 用来将js和css进行压缩(多个文件可以打包成一个文件,也可以说是合并多

  • 使用grunt合并压缩js和css文件的方法

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.js

  • require.js 加载 vue组件 r.js 合并压缩的实例

    require.js 加载 vue组件 r.js 合并压缩的实例

    准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

随机推荐