设为首页 收藏本站
查看: 455|回复: 0

[经验分享] r.js压缩打包(require + backbone)项目开发文件

[复制链接]
累计签到:1 天
连续签到:1 天
发表于 2017-2-23 12:38:20 | 显示全部楼层 |阅读模式
  最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了

AMD模块化开发中的代码压缩打包工具——r.js
  环境搭建基于nodejs;用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的

javascript部分

压缩javascript项目开发文件夹
  build.js压缩打包配置文件,文件名可随意



({
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值,即压缩方式



none:不压缩代码
uglify:使用UglifyJS,默认
closure:使用Google's Closure Compiler,简单优化
closure.keepLines:使用Closure,换行

模块配置(个人方案,欢迎讨论完善)
  我们的项目分为3大模块,入口配置模块main,控制器模块controller,视图模块view
  main合并压缩了框架、插件及入口配置模块;该文件一旦完成极少改动,保留缓存更佳,设置urlArgs后文件也不会有版本号
  controller合并压缩了公用模块及控制器模块;设置urlArgs后文件有版本号清除缓存
  view合并压缩了模型及视图模块;设置urlArgs后文件有版本号清除缓存

压缩单个javascript文件



({
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;直接处理配置文件



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

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346265-1-1.html 上篇帖子: [Tool] 使用Visual Studio Code开发TypeScript 下篇帖子: Visual Studio 2015正式发布
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表