zoukankan      html  css  js  c++  java
  • requireJS中如何用r.js对js进行合并和压缩css文件

      我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.js了,可以到官网去下载,下载地址http://requirejs.org/docs/download.html#rjs 。我已经做好了简单的例子放到github里面,项目里面的.git相关的文件或文件夹和readme都不用管,这些属于github的文件,地址是https://github.com/subying/rjs-demo 。

      下载完整之后,把r.js放到你的项目里面。要执行r.js要需要建立一个文件build.js,这个文件就是告诉程序合并那些资源,相当于一个配置文件。我在buid.js里面有了详细的介绍各个参数的使用

    ({
        // app顶级目录,非必选项。如果指定值,baseUrl则会以此为相对路径
        appDir: './src'
    
        // 模块根目录。默认情况下所有模块资源都相对此目录。
        // 若该值未指定,模块则相对build文件所在目录。
        // 若appDir值已指定,模块根目录baseUrl则相对appDir。
        ,baseUrl: './js'
    
        // 指定输出目录,若值未指定,则相对 build 文件所在目录
        ,dir: './dist'
    
        ,modules: [
            {
                name: 'main'
            }
            ,{
                name: 'sub'
            }
        ]
    
        // 不优化某些文件
        ,fileExclusionRegExp: /^(r|build).js$/
    
        // CSS 优化方式,目前支持以下几种:
        // none: 不压缩,仅合并
        // standard: 标准压缩,移除注释、换行,以及可能导致 IE 解析出错的代码
        // standard.keepLines: 除标准压缩外,保留换行
        // standard.keepComments: 除标准压缩外,保留注释 (r.js 1.0.8+)
        // standard.keepComments.keepLines: 除标准压缩外,保留注释和换行 (r.js 1.0.8+)
        ,optimizeCss: 'standard'
    
        //是否移除已经合并的文件
        ,removeCombined: true
    
        // 设置模块别名
        // RequireJS 2.0 中可以配置数组,顺序映射,当前面模块资源未成功加载时可顺序加载后续资源
        ,paths: {
            a:'a'
            ,b:'b'
            ,c:'c'
        }
    
        //配置模块依赖
        ,shim:{
            c:{
                exports: 'yjs'
            }
        }
    })

      我这里是把所有的源文件放到了项目目录下的src文件夹中,然后编译后的文件是放到了dist文件夹中,在build.js中已经说明了这一点,从上面代码可以看出来,我要合并的模块是main和sub,如果是main模块中请求到其他的模块,运行程序的时候就会自动加载进来。如:合并前的main

    require.config({
        paths: {
            a: 'a',
            b: 'b'
        }
    });
    require(['a','b'],function(a,b){
        a();
        b();
    });

    合并后的main:

    define("a",[],function(){return function(){console.log("a")}}),define("b",[],function(){return function(){console.log("b")}}),require.config({paths:{a:"a",b:"b"}}),require(["a","b"],function(e,t){e(),t()}),define("main",function(){});

      这样可以看出来了吧,加载了,压缩了。同时还可以压缩css,只要在build.js里面设置一下。可以运行一下我的例子就知道了,那么怎么运行呢,在项目的根目录下执行命令行(cmd.exe),运行命令 ' node r.js -o build.js ',是不是很简单。

      

      里面也涉及了各种各样的配置,这个功能还是挺强大,需要更多的操作还要仔细研究,这个例子能够解决基本需求,给有需要的朋友,https://github.com/subying/rjs-demo 。

  • 相关阅读:
    一个基于JBoss5.1+EJB3.0 登陆应用
    专题开发十二:JEECG微云高速开发平台-基础用户权限
    linux监控脚本
    centos Ddos防范开源软件使用及apache ab压测 测试
    centos curl web站点监控实践
    linux Qt5开发案例实践
    CentOS 基于KVM的云计算之虚拟化libvirt shell --- virsh
    linux shell命令行下操作mysql 删除mysql指定数据库下的所有表--亲测成功百分百测试通过--绝对可靠
    C指针
    Aix5~6小机运维
  • 原文地址:https://www.cnblogs.com/subying/p/requireJs-rjs.html
Copyright © 2011-2022 走看看