r.js压缩代码常用的配置及命令

最近用require写了一个网站的模块,到压缩的时候,各种查资料学习,但由于时间较紧,将所有代码都压缩成一个文件,导致代码的体积很大,今天抽时间网上参考下官网的说明配置,将这次压缩代码的配置及运行命令记录下来,以后留着用.

1. js的压缩

这次只是初步应用,如果有好的方法或有误的地方,还望各位大侠们指教.

第一种配置的文件: 需要把所有依赖的文件都压缩到当前代码中.

({
   baseUrl: "./",
   paths: {
       amd_modules: "../amd_modules",
       lib : "../lib"
   },
   name: "main",
   optimizeCss: "none",
   out: "index-built.js"
})

  baseUrl: 指当前配置文件的路径

  paths: 配置一些下面配置时需要的路径

  name: 需要被压缩的文件

  optimizeCss: none不压缩, standard标准压缩

  out: 输出的文件

第二种配置的文件,去掉常用的库(单引用)

({
    mainConfigFile : "main.js",
    baseUrl: "./",
    paths : {
        amd_modules: "../amd_modules" ,
        lib: "../lib"
    },
    dir: "built",
    keepBuildDir: false,  //不复制依赖文件

    modules: [
        {
            name: "main",
            exclude: ["amd_modules/jquery/1.8.3/jquery", "lib/header/0.0.1/header"]
        }
    ]
})

  dir: 输出目录的路径

  modules: 压缩合并的模块,exclude: 筛选掉的文件,不被压缩到main的压缩文件里

  执行代码:

  

node r.js -o config.js

2. css的压缩

第一种情况,直接压缩某个文件,执行代码

node r.js -o cssIn=index.css out=built/index.css

第二种情况,压缩多个文件

需要先将要压缩的文件放到一个css中,用@import引入,如下所示:存储文件为main.css

@import url("icons.css");
@import url("window.css");
@import url("tabs.css");
@import url("index.css");

执行代码:(标准压缩)

node r.js -o cssIn=main.css out=built/main.css optimizeCss=standard

先贴到这里,其实js压缩里有很多配置项,除上述配置外,比如如果有cdn引入的js如何配置; 需要压缩成多个文件等等; 还有压缩时需要包含那些文件和排除那些文件等等.

咱们下次接着贴!!!

时间: 2024-08-05 16:34:37

r.js压缩代码常用的配置及命令的相关文章

使用r.js压缩js代码

在项目中,使用r.js搭配node环境对项目中的所有js文件进行一键压缩,首先下载r.js,放在目录中,项目目录结构如下: 其中,build.js文件是需要我们自己配置的,r.js会根据它去找被压缩的目录和压缩后的放置目录.大概如下: (function() { var re = { //js路径 baseUrl: "./js", //发布目录 dir: "./js_build", //代码内部写的require也计算在打包内 findNestedDependenc

使用r.js压缩整个项目的JavaScript文件

r.js是RequireJS的一部分(optimizer).它依赖于UglifyJS,而UglifyJS基于nodejs.r.js多数时候配合模块化(AMD)写法进行合并,压缩.如果你的代码不采用AMD方式,也可以用它来压缩.这篇讨论的是当不采用AMD方式组织代码时压缩整个项目的js文件. 假设项目中所有的js文件都在scripts目录中 项目中有css,html,scripts三个目录,分别对应css,html和js文件.下载的r.js与myapp平行放置. scripts-build目录放置

r.js压缩打包(require + backbone)项目开发文件

最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开发文件夹 build.js压缩打包配置文件,文件名可随意 ({ appDir : './', //基于build,根目录 baseUrl : './project', //基于appDir,项目目录 dir : './pro

使用requirejs的r.js压缩碰到的问题

1.require模块里,再去require模块,依赖分析不到,r.js不会合并.解决办法:还是放在require([])的这个数组里. 2. r.js也不会识别jquery.min.js.解决办法:把jquery.min.js改名成jquery.js.

requireJs和r.js压缩工具

上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令 代码目录如上: main.html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello RequireJS</title> </head

require.js+backbone 使用r.js 来压缩,本地不压缩,生产环境压缩 的实现方式

requie.js 和backbone.js 这里就不说了,可以去看官方文档,都很详细! 但是使用require.js 默认带的压缩方式感觉不是很方便,所以本文主要讲 利用r.js压缩,来实现本地不压缩,生产环境压缩 r.js 是运行在node上的,默认使用UglifyJS.UglifyJS真的很好用,那为什么说默认的方式 不是很方便呢? r.js 单独压缩一个文件也很好用的,但在实际项目中,总不能一个一个压吧!因此r.js提供了一种多文件的压缩方式 ,使用一个叫bulid.js 的配置文件来配

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

requie.js 和backbone.js 这里就不说了,能够去看官方文档,都非常具体! 可是使用require.js 默认带的压缩方式感觉不是非常方便,所以本文主要讲 利用r.js压缩,来实现本地不压缩,生产环境压缩 r.js 是执行在node上的,默认使用UglifyJS.UglifyJS真的非常好用,那为什么说默认的方式 不是非常方便呢? r.js 单独压缩一个文件也非常好用的,但在实际项目中.总不能一个一个压吧!因此r.js提供了一种多文件的压缩方式 ,使用一个叫bulid.js 的配

r.js 打包压缩文件(依赖require)

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求. 要使用r.js需下载r.js文件( 点我下载 ),将其放到你的项目根目录:还需要安装nodeJS(点我下载),以便通过命令行来执行r.js功能. 下面是我项目 幸福来敲门的目录结构.从index.html结构的data-mian可以看出模块的入口是app.js. app.js里面是这样一小段代码: 注释

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be