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

分类:网站建设| 发布:camnprbubuol| 查看: | 发表时间:2013/8/9

做前端的,为了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.jsRequireJS的一部分(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

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/the-front-end-essential-compression-tools.html