requireJS中如何用r.js对js进行合并和压缩css文件
我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.js了,可以到官网去下载,下载地址http://requirejs.org/docs/download.html#rjs 。我已经做好了简单的例子放到github里面,项目里面的.git相关的文件或文件夹和readme都不用管,这些属于github的文件,地址是https://github.com/subying/rjs-demo 。
下载完整之后,把r.js放到你的项目里面。要执行r.js要需要建立一个文件build.js,这个文件就是告诉程序合并那些资源,相当于一个配置文件。我在buid.js里面有了详细的介绍各个参数的使用
({
// app顶级目录,非必选项。如果指定值,baseUrl则会以此为相对路径
appDir: './src'
// 模块根目录。默认情况下所有模块资源都相对此目录。
// 若该值未指定,模块则相对build文件所在目录。
// 若appDir值已指定,模块根目录baseUrl则相对appDir。
,baseUrl: './js'
// 指定输出目录,若值未指定,则相对 build 文件所在目录
,dir: './dist'
,modules: [
{
name: 'main'
}
,{
name: 'sub'
}
]
// 不优化某些文件
,fileExclusionRegExp: /^(r|build)\.js$/
// CSS 优化方式,目前支持以下几种:
// none: 不压缩,仅合并
// standard: 标准压缩,移除注释、换行,以及可能导致 IE 解析出错的代码
// standard.keepLines: 除标准压缩外,保留换行
// standard.keepComments: 除标准压缩外,保留注释 (r.js 1.0.8+)
// standard.keepComments.keepLines: 除标准压缩外,保留注释和换行 (r.js 1.0.8+)
,optimizeCss: 'standard'
//是否移除已经合并的文件
,removeCombined: true
// 设置模块别名
// RequireJS 2.0 中可以配置数组,顺序映射,当前面模块资源未成功加载时可顺序加载后续资源
,paths: {
a:'a'
,b:'b'
,c:'c'
}
//配置模块依赖
,shim:{
c:{
exports: 'yjs'
}
}
})
我这里是把所有的源文件放到了项目目录下的src文件夹中,然后编译后的文件是放到了dist文件夹中,在build.js中已经说明了这一点,从上面代码可以看出来,我要合并的模块是main和sub,如果是main模块中请求到其他的模块,运行程序的时候就会自动加载进来。如:合并前的main
require.config({
paths: {
a: 'a',
b: 'b'
}
});
require(['a','b'],function(a,b){
a();
b();
});
合并后的main:
define("a",[],function(){return function(){console.log("a")}}),define("b",[],function(){return function(){console.log("b")}}),require.config({paths:{a:"a",b:"b"}}),require(["a","b"],function(e,t){e(),t()}),define("main",function(){});
这样可以看出来了吧,加载了,压缩了。同时还可以压缩css,只要在build.js里面设置一下。可以运行一下我的例子就知道了,那么怎么运行呢,在项目的根目录下执行命令行(cmd.exe),运行命令 ' node r.js -o build.js ',是不是很简单。
里面也涉及了各种各样的配置,这个功能还是挺强大,需要更多的操作还要仔细研究,这个例子能够解决基本需求,给有需要的朋友,https://github.com/subying/rjs-demo 。
requireJS中如何用r.js对js进行合并和压缩css文件的更多相关文章
- JDK1.8中如何用ScriptEngine动态执行JS
JDK1.8中如何用ScriptEngine动态执行JS jdk1.6开始就提供了动态脚本语言诸如JavaScript动态的支持.这无疑是一个很好的功能,毕竟Java的语法不是适合成为动态语言.而JD ...
- 配置grunt进行css、js的检查、合并和压缩
现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是 http://www.gruntjs.net 这是个中文网站,有文档 ...
- rails 里js 在production 只合并不压缩等问题,以及assets pipeline 加载js 在指定页面上
因为刚学rails,试着做了一个小系统操作微信公共帐号, 之后部署的时候遇见了一个问题,整套系统在互联网端访问,非常的慢,而在手机端访问,10s后才会有响应, 打开chrome的调试工具,发现appl ...
- js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...
- gulp压缩css文件跟js文件
越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用 ...
- js 获取手机浏览器类型,修改css文件的class的值
/*========================================= 函数功能:获取浏览器类型 =========================================*/ ...
- 【转】Ext JS 集合1713个icon图标的CSS文件
原文:http://extjs.org.cn/node/715 由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上 ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
- grunt压缩多个js文件和css文件
压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev -------->安装js压缩插件 ...
随机推荐
- ElasticSearch的概念解析
ElasticSearch是面向文档的,它不仅仅可以存储整个对象或则文档(document),还会索引(index)每个文档的内容使它可以被快速的检索.ElasticSearch和关系型数据库的对比如 ...
- jvm高级特性(5)(1)(原子性,可见性,有序性,volatile,概述)
JVM高级特性与实践(十二):高效并发时的内外存交互.三大特征(原子.可见.有序性) 与 volatile型变量特殊规则 简介: 阿姆达尔定律(Amdahl):该定律通过系统中并行化与串行化的比重来描 ...
- Advanced Debugging and the Address Sanitizer
A debug trick 在异常端点处运行 po $arg1,找出异常信息.  Address Sanitizer 概述 是一个运行时检测工具 发现内存问题 可以用于模拟器和设备 可以发现的问题 ...
- ionic的基础学习(第一篇)
1.ioinc的头部与底部 1.Header 固定在屏幕的顶端的组件,可包含标题,左右的功能按钮.(提供很多颜色的样式,及调用不同的样式名,亦可自定义) bar-light,bar-stable,ba ...
- centos7搭建kafka集群-第一篇
Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候,是否会遇到这样的一些问题: 我们想分析下用户行为(pageviews),以便我们设计出更好的广告位 我想对用户 ...
- 【poj3252】 Round Numbers (数位DP+记忆化DFS)
题目大意:给你一个区间$[l,r]$,求在该区间内有多少整数在二进制下$0$的数量$≥1$的数量.数据范围$1≤l,r≤2*10^{9}$. 第一次用记忆化dfs写数位dp,感觉神清气爽~(原谅我这个 ...
- windows下如何下载并安装Python
1.打开Python官网,点download中的windows(或者打开网址https://www.python.org/downloads/windows/) 2.下载exe后缀的可执行文件,根据自 ...
- Spring Security构建Rest服务-0300-Restful API异常处理
SpringBoot默认的错误处理机制: 一.测试需要的部分代码 (完整代码放在了github https://github.com/lhy1234/spring-security): UserCon ...
- 【Java并发编程】:生产者—消费者模型
生产者消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一存储空间,生产者向空间里生产数据,而消费者取走数据. 这里实现如下情况的生产--消费模型: 生产者不断交替地生产两组数据“姓 ...
- 【优化】Filddler用于移动端
Fiddler是一个非常强大的Web调试工具,它能捕获所有客户端和服务器的http和https请求,我们可以对请求监视.设置断点,也能修改输入输出数据,这些特性使得Fiddler成为广大web开发者的 ...