r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了
AMD模块化开发中的代码压缩打包工具——r.js
环境搭建基于nodejs;用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的
javascript部分
压缩javascript项目开发文件夹
build.js压缩打包配置文件,文件名可随意
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
({ appDir : './project', //基于build,根目录 baseUrl : './', //基于appDir,项目目录 dir : './project.min', //基于build,输出目录 locale : 'en-us', //国际化配置 optimize: 'uglify', //压缩方式 paths : { underscore: '../underscore.min', backbone : '../backbone.min', jquery : '../jquery.min', ... }, modules: [ { name: 'main' //配置 }, { name: './controller/init' //控制器 }, { name: './view/index' //首页 }, ... ]}) |
build.js里baseUrl值最好设置为与main.js里baseUrl值一样的路径,这样paths可以直接复制过来,否则需要重新为每个模块配置相对路径;另外,appDir值直接设置为项目文件夹路径,可以避免压缩到项目文件夹以外文件
modules设置合并压缩模块,配置相对路径时需基于baseUrl
所有设置的模块(即文件,下同),该模块与其所有依赖模块会被合并压缩;没有设置的模块,该模块会直接压缩,而不会与其依赖模块合并压缩
r.js提供了以下几种optimize值,即压缩方式
|
1
2
3
4
|
none:不压缩代码uglify:使用UglifyJS,默认closure:使用Google's Closure Compiler,简单优化closure.keepLines:使用Closure,换行 |
模块配置(个人方案,欢迎讨论完善)
我们的项目分为3大模块,入口配置模块main,控制器模块controller,视图模块view
main合并压缩了框架、插件及入口配置模块;该文件一旦完成极少改动,保留缓存更佳,设置urlArgs后文件也不会有版本号
controller合并压缩了公用模块及控制器模块;设置urlArgs后文件有版本号清除缓存
view合并压缩了模型及视图模块;设置urlArgs后文件有版本号清除缓存
压缩单个javascript文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
({ appDir : './project', //基于build,根目录 baseUrl : './', //基于appDir,项目目录 name : './view/index', //基于baseUrl,项目文件 out : './view/index.min', //基于baseUrl,输出文件 locale : 'en-us', //国际化配置 optimize: 'uglify', //压缩方式 paths : { underscore: '../underscore.min', backbone : '../backbone.min', jquery : '../jquery.min', ... }}) |
开始压缩javascript文件
命令行进入文件所在文件夹,命令行运行node,找到r.js;直接处理配置文件
|
1
|
node r.js -o build.js |
没有配置文件,直接压缩javascript文件
|
1
|
node r.js -o baseUrl=project name=view\index out=view\index.min.js optimize=uglify |
bat一键压缩打包
运行需基于bat文件的当前所在目录
|
1
2
|
cd ..\project\static\jsnode r.js -o build.js |
css部分
开始压缩css文件
命令行进入文件所在文件夹,命令行运行node,找到r.js;cssIn指向待压缩的文件,out指向压缩后的文件,如压缩后的文件找不到则会自动生成
|
1
|
node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard |
相对路径什么的一定要找对,不然会报错
r.js提供了以下几种optimizeCss值,即压缩方式
|
1
2
3
4
5
|
none:不压缩,仅合并standard:标准压缩 去换行、空格、注释standard.keepLines:除标准压缩外,保留换行standard.keepComments:除标准压缩外,保留注释standard.keepComments.keepLines:除标准压缩外,保留换行注释 |
bat一键压缩打包
注意情况同上
|
1
2
3
4
|
cd ..\project\static\cssnode ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standardnode ..\js\r.js -o cssIn=login.css out=login.min.css optimizeCss=standardnode ..\js\r.js -o cssIn=detail.css out=detail.min.css optimizeCss=standard |
r.js压缩打包(require + backbone)项目开发文件的更多相关文章
- r.js压缩打包
AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...
- 【实践】require.js + r.js 代码打包压缩初体验
第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...
- 使用r.js来打包模块化的javascript文件
前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器 ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题
FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题 https://fly.layui.com/jie/2120/ layer是requirejs压缩文件r.js里面的关键字 ...
- JavaScript模块化-require.js,r.js和打包发布
在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...
- mvc BundleConfig实现对Css、Js压缩打包加载
Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下: nuget包管理--程序包管理控制台--Install-Package Microsoft.AspN ...
- requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...
- require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式
require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式 时间:2017-07-03 17:18:11 阅读:210 评论:0 收藏:0 ...
随机推荐
- css3画半圆
border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...
- 九度oj 1437 To Fill or Not to Fill 2012年浙江大学计算机及软件工程研究生机试真题
题目1437:To Fill or Not to Fill 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:1488 解决:345 题目描述: With highways availabl ...
- AtCoder Regular Contest 059 F Unhappy Hacking
Description 题面 Solution 我们发现如果一个位置需要被退掉,那么是 \(0\) 或 \(1\) 都没有关系 于是我们想到把 \(0,1\) 归为一类 问题转化为每一次可以添加和删除 ...
- 网易和淘宝的rem方案剖析
以下内容到分割线前是引用前端大牛的文章,方便大家理解博主内容): 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些web app并一定很复杂,比如拉勾网,你看 ...
- 深入理解JavaScript系列(50):Function模式(下篇)
介绍 本篇我们介绍的一些模式称为初始化模式和性能模式,主要是用在初始化以及提高性能方面,一些模式之前已经提到过,这里只是做一下总结. 立即执行的函数 在本系列第4篇的<立即调用的函数表达式> ...
- PostgreSQL PARTITION 分区表
PostgreSQL 分区表,操作性相当便捷. 但只能在创建时决定是否为分区表,并决定分区条件字段,普通表创建后,不能在修改为分区表. Note:通过其他方法也可转化为分区表. 和其他数据库一样,分区 ...
- spring web.xml基本配置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...
- HttpContext在多线程异步调用中的使用方案
1.在线程调用中,有时候会碰到操作文件之类的功能.对于开发人员来说,他们并不知道网站会被部署在服务器的那个角落里面,因此根本无法确定真实的物理路径(当然可以使用配置文件来配置物理路径),他们唯一知道的 ...
- JavaScript this指向相关内容
1,默认绑定this指向windw对象 看代码: function test(C){ var a = 123 function b(){}; } 在预编译环节当中. OA{ arguments:[1] ...
- Canvas中的save方法和restore方法
初学者也许会误认为canvas中save方法是用来保存绘图状态的图形,而restore方法是用来还原之前保存的绘图状态的图形,其实不然. save():保存当前的绘图状态. restore():恢复之 ...