• 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=viewindex out=viewindex.min.js optimize=uglify

    bat一键压缩打包

    运行需基于bat文件的当前所在目录

    1
    2
    cd ..projectstaticjs
    node r.js -o build.js

    css部分

    开始压缩css文件

    命令行进入文件所在文件夹,命令行运行node,找到r.js;cssIn指向待压缩的文件,out指向压缩后的文件,如压缩后的文件找不到则会自动生成

    1
    node ..js .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 ..projectstaticcss
    node ..js .js -o cssIn=index.css  out=index.min.css  optimizeCss=standard
    node ..js .js -o cssIn=login.css  out=login.min.css  optimizeCss=standard
    node ..js .js -o cssIn=detail.css out=detail.min.css optimizeCss=standard
  • 相关阅读:
    虚拟机通过nat(网络地址转换)可以联网但无法解析域名(解决)
    信息安全系统设计与实现:第三章学习笔记
    电子公文系统-规格需求说明书
    团队作业(二):需求分析
    信息安全系统设计与实现:第十一章学习笔记
    Scala --Actor通信模型概述
    Hadoop项目调优
    大数据生态组件常用服务端口
    HBase性能优化总结
    Hbase架构,组件分析 ,Hbase集群搭建
  • 原文地址:https://www.cnblogs.com/catgatp/p/9545274.html
Copyright © 2020-2023  润新知