前端必备的压缩工具 详述r.js的使用方法

做前端的，为了pageSpeed都会压缩一下自己的js,css,html,素材；压缩工具有很多，比如下边的：

• HTML/JS压缩
• 在线JS/CSS/HTML压缩
• Minify合并压缩 合并后一般的路径是这样表示的：（使用wordpress的应该对此不会陌生的）
  <link rel="stylesheet" type="text/css" href="
http://l.yimg.com/a/combo?/yui/2.6.0/build/
reset-fonts-grids/reset-fonts-grids.css
&/yui/2.6.0/build/menu/assets/skins/sam/menu.css
&/yui/2.6.0/build/button/assets/skins/sam/button.css
&/yui/2.6.0/build/container/assets/skins/sam/container.css
&/yui/2.6.0/build/resize/assets/skins/sam/resize.css
&/yui/2.6.0/build/tabview/assets/skins/sam/tabview.css
&/ydn/site/yui-2.6.0-treeview.css&">
• UI压缩工具 下载：yuicompressor-2.4.7.jar、closure-compiler.jar
  

  因这是本地压缩，我们可以建一个批处理文件camnpr.bat，内容如下：（请根据自己的项目路径调整）

  @echo off
  java -jar ../lib/closure-compiler/closure-compiler.jar ^
  --js ../dist/js/slickgrid/lib/jquery.event.drag-2.0.min.js ^
  --js ../dist/js/slickgrid/slick.core.js ^
  --js ../dist/js/slickgrid/slick.grid.js ^
  --js ../dist/js/slickgrid/slick.dataview.js ^
  --js ../dist/js/slickgrid/controls/slick.pager.js ^
  --js ../dist/js/slickgrid/controls/slick.columnpicker.js ^
  --js ../dist/js/slickgrid/plugins/slick.checkboxselectcolumn.js ^
  --js ../dist/js/slickgrid/plugins/slick.rowselectionmodel.js ^
  --js_output_file ../dist/js/slickgrid.min.js
  

  提示：下边介绍的使用r.js压缩与之异曲同工。

• Dean Edwards Packer
• JSMin
• UglifyJS

下边来介绍一下使用r.js压缩整个项目的JavaScript文件

准备条件：

• 请安装NodeJS下载地址（v0.8.16之后集成了npm）
• 本例中使用的r.js版本是：2.1.8 下载地址：r_2.1.8.js

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目录放置压缩后的js文件，结构同scripts，但会多生成一个build.txt文件。

build.js文件是需要我们自己配置的，r.js会根据它去找被压缩的目录和压缩后的放置目录。大概如下

({
    appDir: "scripts",
    baseUrl: "scripts",
    dir: "scripts-build"
})

以下是我测试的项目（压缩前）

可以看到，scripts-build目前是空的。好了，开始压缩了。

1，cmd进入命令行控制台，我的项目在e:/work/camnpr/myapp

2，cd到当前项目（进入e盘，cd work/camnpr/myapp）

3，执行命令：node r.js -o build.js 效果如图

这时压缩成功了，再看scripts-build目录，和scripts结构一样，且多了个build.txt。

本文例子下载地址：myapp

参考地址：http://www.cnblogs.com/snandy/archive/2012/03/05/2378105.html