requirejs的打包工具r.js
不建议用命令行,还是用配置文件比较方便--build.js。
我的build.js文件内容大概如下:
( {
appDir : './',
baseUrl : './scripts',
dir : './dist',
modules : [{
name : 'main'
}],
//忽略的文件--不用管目录结构,只需把需要忽略的文件名写出来就行
fileExclusionRegExp : /^(r|build)\.js|(test\.html)$/,
optimizeCss : 'standard',
removeCombined : true,
paths : {
jquery : 'jquery-1.10.1.min', config : 'config',
//其他的JS文件
otherjs : 'otherjs'
},
shim : {
otherjs : {
exports : 'otherjs',
deps : ['jquery']
}
}
})
注意事项:
1 这里面的paths和shim,其实和main.js中的几乎一样。
2 如果有在线引用的js文件,那可通过在其对应的值改为'empty:'就行。所以,第1点说的几乎一样,就是除了':empty'不一样之外,其他是一样的。
比如jquery.js是在线引用的,那就需要写成:jquery:'empty:'。
【但是,如果其他本地文件引用了jquery,那这时候就会出错了。解决方法就是把所依赖的jquery也放在本地。】
build.js文件写好之后,就可以开始用命令来打包了。
cd到当前目录,然后,输入:node r.js -o build.js 【r.js是依赖node的,[npm install requirejs],具体请查看:http://requirejs.org/docs/node.html】
最后,就会根据build.js配置文件来打包。
r.js的不好的地方就是打包js和css是分开的。
下面是打包css文件的方式。
1 在一个css文件【在上面已经打包好的dist目录下的css文件】的头部,通过@import的方式引入其他需要打包的css文件。比如在main.css文件的头部引入其他文件:
@import url('css/test1.css');
@import url('css/test2.css');
2 在命令行输入:node r.js -o cssIn=dist/styles/main.css out=dist/styles/main.min.css
这样就会把main.css文件以及@import进来的css文件都打包压缩好。
3 这时候,还需要手动把多余的文件或文件目录删掉
这样就大功告成了。
//==============================================//
build.js文件详情如下:
https://github.com/jrburke/r.js/edit/master/build/example.build.js
中文可参考:
http://www.cnblogs.com/didi/p/4146656.html
其他相关文章:
http://stackoverflow.com/questions/23978361/using-gulp-to-build-requirejs-project-gulp-requirejs
http://www.cnblogs.com/snandy/archive/2012/06/07/2537477.html
http://www.oschina.net/translate/optimize-requirejs-projects
requirejs的打包工具r.js的更多相关文章
- requireJS的优化工具 ---- r.js
requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...
- 转:requirejs打包压缩r.js使用示例
为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...
- requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...
- requireJS中如何用r.js对js进行合并和压缩css文件
我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...
- 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)
这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...
- r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...
- r.js压缩打包
AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...
- requirejs 使用实例r.js打包
在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...
- [转]gulp打包工具总结
与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...
随机推荐
- centos部署Python环境
在centos上部署Python之前,我们需要先配置开发环境. 1.安装Python依赖的开发工具包 gcc自然少不了,可以直接用“Development Tools”: yum grouplist ...
- java自定义before和after
package com.ada.wuliu.worker.web.cooperation.worker; public class TestOne { abstract class Father{ p ...
- 【Atheros】禁用CSMA之后pktgen发包一分钟后无法发送的问题
无线网络中各个节点不断地广播信标帧,收到某节点的信标帧之后才知道这个节点存在,知道它的网络配置是怎么样的,才能知道应该怎么和它通信. 那么问题来了,禁用了CSMA之后,发送节点全力发送,那么它会永远占 ...
- ios -- 极光推送《3》 pod 方法
iOS SDK 集成指南 SDK说明 适用版本 本文匹配的 SDK版本:r2.1.5 以后.查看最近更新了解最新的SDK更新情况.使用Xcode 6及以上版本可以使用新版Push SDK,Xcode ...
- MySQL mysqlbinlog
MySQL binlog日志记录了MySQL数据库从启用日志以来所有对当前数据库的变更.binlog日志属于二进制文件,我们可以从binlog提取出来生成可读的文本或者SQL语句来重建当前数据库以及根 ...
- zookeeper curator ( 实战一)
目录 zookeeper 的伪集群搭建 写在前面 1.1. zookeeper 安装&配置 1.1.1. 创建数据目录和日志目录: 1.1.2. 创建myid文件 1.1.3. 创建和修改配置 ...
- Bootstrap aggregating Bagging 合奏 Ensemble Neural Network
zh.wikipedia.org/wiki/Bagging算法 Bagging算法 (英语:Bootstrap aggregating,引导聚集算法),又称装袋算法,是机器学习领域的一种团体学习算法. ...
- mysql系列之9.mysql日志&存储引擎
mysqlbinlog 是什么? 数据目录下的如下文件: mysql-bin.xxxxxx 作用? 记录数据库内部增删改查对mysql数据库有更新的内容的记录 三种模式? statement leve ...
- 20179209课后作业之od命令重写
一.问题描述: 1 复习c文件处理内容 2 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 3. main与其他分开,制作静态库和动态库 4. 编写Makefi ...
- Linux就该这么学--命令集合11(配置系统相关信息)
1.配置主机名称: 查看主机名: hostname 修改主机名: vim /etc/hostname 2.配置网卡信息: 在红帽RHEL6系统中网卡配置文件的前缀为“ifcfg-eth”,第一块即为“ ...