最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了

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\js
node 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\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压缩打包(require + backbone)项目开发文件的更多相关文章

  1. r.js压缩打包

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

  2. 【实践】require.js + r.js 代码打包压缩初体验

    第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...

  3. 使用r.js来打包模块化的javascript文件

    前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器 ...

  4. webpack配置:css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  5. FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题

    FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题 https://fly.layui.com/jie/2120/ layer是requirejs压缩文件r.js里面的关键字 ...

  6. JavaScript模块化-require.js,r.js和打包发布

    在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...

  7. mvc BundleConfig实现对Css、Js压缩打包加载

    Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下: nuget包管理--程序包管理控制台--Install-Package Microsoft.AspN ...

  8. requirejs原理深究以及r.js和gulp的打包【转】

    转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...

  9. require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式

    require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式 时间:2017-07-03 17:18:11      阅读:210      评论:0      收藏:0 ...

随机推荐

  1. CentOS6.4 安装sftp

    1.打开命令终端窗口,按以下步骤操作.使用ssh -V 命令来查看openssh的版本,版本必须大于4.8p1,低于的这个版本需要升级. [root@ecs-3c46 ~]# ssh -v OpenS ...

  2. 关于 double sort 这道题的思考

    声明 笔者最近意外的发现 笔者的个人网站http://tiankonguse.com/ 的很多文章被其它网站转载,但是转载时未声明文章来源或参考自 http://tiankonguse.com/ 网站 ...

  3. FocusBI: 总线矩阵(原创)

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...

  4. OAuth2.0 微信授权机制

    我在了解设计Restful接口的时候,发现涉及到接口验证,可以利用OAuth2.0机制来验证. 我开发的微信端Web网页通过微信授权的时候,微信端也是用OAuth2.0机制来获取用户基本信息. OAu ...

  5. 架构实战项目心得(六):后台服务nosql数据库mongodb

    一.架构介绍        mongodb有几种部署方式,这里采用的是副本集架构(Replica Set).        为了防止单点故障就需要引副本(Replication),当发生硬件故障或者其 ...

  6. 深入理解JavaScript系列(48):对象创建模式(下篇)

    介绍 本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码. 模式6:函数语法糖 函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用pro ...

  7. 创建WPF用户控件

    wpf用户自定义控件和winform创建方法类似,这里先纠正一个误区,就是有很多人也是添加,然后新建,然后是新建用户控件库,但是为什么编译好生成后Debug目录下还是只有exe文件而没有dll文件呢? ...

  8. PLC编程逻辑思路

    PLC编程逻辑思路 在整个执行过程的流程中,都是在不断地找启动条件,停止条件以及输出结果.当条件不够时,就得想办法如果添加标志位,根据已有条件去构造条件:当结果开发耦合时,就制造中间继电器去除耦合. ...

  9. 开源解决方案一:快速搭建单机版 LAMP 网站

    LAMP 通常表示 Linux + Apache + MySQL/MariaDB + Perl/PHP/Python,LAMP 的各个组件不是一成不变的,并不局限于它最初的选择.作为一个解决方案套件, ...

  10. java 并发 (四) ---- 并发容器

    Hashmap 和 Concurrenthashmap Hashmap 不适合并发,应该使用ConcurrentHashMap . 这是很多人都知道的,但是为什么呢? 可以先看一下这两篇文章. JDK ...