r.js压缩打包
AMD模块化开发中的代码压缩打包工具——r.js
环境搭建基于nodejs;用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的
javascript部分
压缩javascript项目开发文件夹
build.js压缩打包配置文件,文件名可随意
({
appDir : './', //基于build,根目录
baseUrl : './project', //基于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可以直接复制过来,否则需要重新为每个模块配置相对路径
modules设置合并压缩模块,配置相对路径时需基于baseUrl
所有设置的模块(即文件,下同),该模块与其所有依赖模块会被合并压缩;没有设置的模块,该模块会直接压缩,而不会与其依赖模块合并压缩
r.js提供了以下几种optimize值,即压缩方式
none:不压缩代码
uglify:使用UglifyJS,默认
closure:使用Google's Closure Compiler,简单优化
closure.keepLines:使用Closure,换行
模块配置(个人方案,欢迎讨论完善)
我们的项目分为3大模块,入口配置模块main,控制器模块controller,视图模块view
main合并压缩了框架、插件及入口配置模块;该文件一旦完成极少改动,保留缓存更佳,设置urlArgs后文件也不会有版本号
controller合并压缩了公用模块及控制器模块;设置urlArgs后文件有版本号清除缓存
view合并压缩了模型及视图模块;设置urlArgs后文件有版本号清除缓存
压缩单个javascript文件
({
appDir : './', //基于build,根目录
baseUrl : './project', //基于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;直接处理配置文件
node r.js -o build.js
没有配置文件,直接压缩javascript文件
node r.js -o baseUrl=project name=view\index out=view\index.min.js optimize=uglify
bat一键压缩打包
运行需基于bat文件的当前所在目录
cd ..\project\static\js
node r.js -o build.js
css部分
开始压缩css文件
命令行进入文件所在文件夹,命令行运行node,找到r.js;cssIn指向待压缩的文件,out指向压缩后的文件,如压缩后的文件找不到则会自动生成
node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard
相对路径什么的一定要找对,不然会报错
r.js提供了以下几种optimizeCss值,即压缩方式
none:不压缩,仅合并
standard:标准压缩 去换行、空格、注释
standard.keepLines:除标准压缩外,保留换行
standard.keepComments:除标准压缩外,保留注释
standard.keepComments.keepLines:除标准压缩外,保留换行注释
bat一键压缩打包
注意情况同上
cd ..\project\static\css
node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard
node ..\js\r.js -o cssIn=login.css out=login.min.css optimizeCss=standard
node ..\js\r.js -o cssIn=detail.css out=detail.min.css optimizeCss=standard
r.js压缩打包的更多相关文章
- r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...
- 【实践】require.js + r.js 代码打包压缩初体验
第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...
- 使用r.js来打包模块化的javascript文件
前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器 ...
- FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题
FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题 https://fly.layui.com/jie/2120/ layer是requirejs压缩文件r.js里面的关键字 ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- 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 ...
随机推荐
- 重写成员“MySql.Data.Entity.MySqlConnectionFactory.CreateConnection(System.String)”时违反了继承安全性规则。重写方法的安全可访问性必须与所重写方法的安全可访问性匹配。
1,程序中使用加载反射出现下面的问题: 无法加载一个或多个请求的类型.有关更多信息,请检索 LoaderExceptions 属性. 然后把代码改了一下, try { types.AddRange ...
- HDU - 5997 树状数组+set
和之前一道省选题目很像: (梦幻布丁): 我们维护的时候用树状数组维护,在断电处打上标记: 合并的时候小的合并到大的里面: #include<iostream> #include<c ...
- PHP将数据库数据批量生成word文档
<?php class word{ function start(){ ob_start(); echo '<html x ...
- 二分答案 & 洛谷 P2678 跳石头
首先让我们先学一下二分答案这个东西... 二分答案,肯定与二分有关,还与可能是答案的东西有关... 二分答案的准确定义: 二分答案是指在答案具有单调性的前提下,利用二分的思想枚举答案,将求解问题转 ...
- Navicat Premium 12破解激活
下载Navicat Premium 12并安装: 蓝奏云下载:Navicat Premium 12注册机 链接:https://pan.baidu.com/s/1mN-urlh--SX1vbq7h ...
- flask简单了解
Flask简介: Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务,在介绍Flask之前首先来聊下它和Django的联系以及区别,djang ...
- python 的内置模块 re
在 pattern 的 “” 前面需要加上一个 r 用来表示这是正则表达式, 而不是普通字符串 >>> import re >>> ptn = r"r[a ...
- ubuntu下安装和更新R语言
R官网更新说明 https://mirrors.tuna.tsinghua.edu.cn/CRAN/bin/linux/ubuntu/README.html 本文主要讲解在ubuntu下如何安装和更新 ...
- windows_study_1
描述:win8/windows server 设置用户登陆密码永不过期 解决: 第一步:打开控制面板,点击系统和安全第二部:管理工具第三步:本地安全组策略第四步:看图 第五步:把密码过期天数,改成0 ...
- (找到最大的整数k使得n! % s^k ==0) (求n!在b进制下末尾0的个数) (区间满足个数)
题目:https://codeforces.com/contest/1114/problem/C 将b分解为若干素数乘积,记录每个素数含多少次方 b = p1^y1·p2^y2·...·pm^ym. ...