Web 2.0 网站架构、优化 数据库架构
标签类目:yui

css&Js 压缩命令行工具

各有优缺点,混搭着用。同时,也可以编进Ant里。
- q% d  x0 }0 a压缩:
9 h( c; h! A) q6 _% ]$ nYUICompressor, r! f4 A: z4 L! o# {! x! b
支持JS和CSS
* `0 z5 _+ O7 s. ?8 E’ T4 L下载http://yuilibrary.com/downloads/#yuicompressor$ Q2 X! x” j0 R, _
文档:http://developer.yahoo.com/yui/compressor/
- c: e’ l) ]; I8 X7 O快速上手:
9 |; t1 `! g” c: V+ [. o, \java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js –charset utf-8


E) I' e9 F0 a4 B1 NClosure  Compiler4 d$ i5 m% ^- R  X! \( `
不支持CSS文件压缩
: m4 X. U+ H0 Q% C6 w下载:compiler.jar) M8 g+ V& ~' m2 _2 V+ ?
文档:http://code.google.com/closure/compiler/docs/overview.html& j. ?: e, T5 z& M# r0 ?
要求:JRE 1.64 l" @2 |4 N( [* Q
快速上手:
4 |( E3 t$ D8 A1 [java -jar compiler.jar –js myfile.js –js_output_file myfile-min.js2 c# H* {6 z$ z/ K5 A( ~/ P
相关介绍:http://hikejun.com/blog/?p=476支 持多个文件合并:
1 O" O$ b* c3 r. Pjava -jar compiler.jar –js myfile-1.js –js myfile-2.js –js_output_file myfile-min.js
4 A, k: b) {" \合并:( W4 q: J' y- T+ G. ?

Combiner1 x+ J. D2 b: \+ p# p
下载:http://github.com/nzakas/combiner/downloads
0 i$ e4 e: k7 w- I0 o- H文档:http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/
9 o7 u3 a) N9 U快速上手:, \( J8 U6 S0 I: {9 A
java -jar combiner-0.0.1.jar -v -o myfile.js *.js
3 ^5 u! k4 R! G: K4 Ijava -jar combiner-0.0.1.jar -v -o myfile.js myfile-1.js myfile-2.js
2 P- U& a  H% ^8 G5 [+ j图片无损优化:
) V- E; X! f% e+ i5 g

Smusher7 \6 k7 v& X) {% k
调用smush.it 或 punypng 接口。
& L/ G* A2 n7 ]) h; u+ U文档:http://github.com/grosser/smusher
% A$ y’ S$ |: H要求:ruby + rubygems* B- p$ V8 E4 I* |) i# C* E: F
快速上手:, x0 g7 T% l# I” t! B, R% }: ?) y
smusher imgs/*.*
P8 j5 z6 a; k* r) O. msmusher imgs/*.* –service PunyPng- t& F% t5 C& |5 U
Mac下安装:- r4 M9 q8 V” K: V0 X  {. ]& E
第一次安装smusher失败,缺东西需要先装xcode(OS安装盘2上有),再装行了。
. ?” ]6 |- q2 h’ }, r另注意punypng区分大小写 smusher macosxlogo.png –service PunyPng/ \9 }* J1 h’ J5 |
dataURI:
+ x$ J8 q/ _5 c7 t

CSSEmbed
/ l/ }: _’ c$ U4 r” ^4 Y’ \CSS中的图片转成 dataURI。(我不建议所有图片全部dataURI转换)9 H1 Z! v” M9 Q5 A/ I  c
下载:http://github.com/nzakas/cssembed/downloads/& |0 h  w5 P’ ~7 {
文档:http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/
C4 h, ~9 w4 U1 n& R7 s快速上手:
3 g9 S/ |  l$ _java -jar cssembed-x.y.z.jar -o styles_new.css styles.css7 L9 n# ~9 r  ]. E, y! ^

dataURI
; P0 @1 b$ [! e! Y( @+ _本地或远程的图片转成 dataURI。3 Z9 Y5 o9 m* ^- D  }/ m. O8 i
下载:http://github.com/nzakas/datauri/downloads/
8 u* l8 M. E4 t! E2 u0 i$ b快速上手:
6 }$ g8 ]. n) \! @4 T3 A& ijava -jar datauri-x.y.z.jar -o output.txt image.png/ X; T9 b2 |1 e; g2 A8 K# t! l
检查工具:
+ D’ w* |1 W6 E7 B0 c

WARI
) B6 {) v1 n; }0 @扫描js/css文件中的冗余,和没用 的图片。试了一下没用的css和图片找的比较准,javascript绑定的方法都算没用不准。这东西最大的好处是整站的找 RT @umutm: Web Application Resource Inspector – WARI – http://wari.konem.net/8 s9 G* |  R0 q( I, m# E
下载/文档:http://wari.konem.net/6 ^/ n: D7 }3 ]4 F0 N6 P; w4 h
要求:JRE 1.6
/ }# a2 R! S” w% ]0 W6 O) u% l快速上 手:java -jar ~/Library/wari/wari.jar 弹出一个图形化界面。其实这不算命令行工具,这工具还是有点用的
+ P+ F3 f9 j+ V+ W6 E

Rhino +  JSLint
$ p2 s( ~- \” [: s0 g+ E” G8 kJavascript/html代码品质检查工具。
; x+ |% H! \’ F& G; T$ g: ^介绍:http://www.JSLint.com/rhino/index.html用 法:java -jar rhino/js.jar rhino/fulljslint.js my_js_file.js4 Z# u, l# e2 W6 y
JRE 1.6 (Soylatte16-1.0.2 ) :  http://hikejun.com/download/soylatte16-i386-1.0.2.tar.bz2

如何开始使用YUI Doc工具

YUI Team实践出了一个高效易协作的前端代码开发流程:代码首先由Ant来组织管理和版本化、接着由JsLint来验证,然后由YUI Doc文档化、最后由YUI Compressor进行压缩发布。上个月初,YUI Team公布了这个新的JavaScript API文档生成工具YUI Doc,它本来专门为YUI提供API级别的文档的,现在它开源为人民服务了。

YUI Doc和JavaDoc、JSDoc和JsDoc Toolkit相似。YUI Doc是由注解驱动(comment-driven )的系统,它通过解析代码中描述结构的注解来生成文档。由于它纯粹的依赖于注解,所以并不像一些模拟系统一样需要有惯用语和代码模式。更详细的介绍可以看YUI Doc的官方文档和YUI blog上的《YUI Doc: A New Tool for Generating JavaScript API Documentation》(由于YUI blog咱们无法访问,比较好的解决方案就是在Google Reader中订阅它的Feed,直接输入 http://yuiblog.com即可。)

YUI Doc是基于Python开发,且依赖几个扩展库,加之其Getting Started写的也比较含糊,所以如何使用这个工具反而成为第一道门槛,尤其对于那些对Python不熟悉的同学来说。所以,下面的重点是介绍如何在Windows上使用YUI Doc:

  1. 下载Python2.5.2安装之。
    虽然Python3.0和Python2.6都已经出来很久了,但之所以依旧选择Python2.5.2,是因为后面要用到的安装Python扩展库的工具setuptools在Windows下的最新版本对应的是Python2.5。我不知道它是否支持2.5以上,有兴趣的可以试试。
  2. 下载setuptools-0.6c9.win32-py2.5.exe并安装之,setuptools会自动安装到Python所在安装目录的Scripts目录下。
    setuptools为Python提供了简单的包管理和发行功能。后面的扩展库的安装就是利用它的easy_install,非常方便。有兴趣的可以看看《可爱的 Python: 使用 setuptools 孵化 Python egg》
  3. 为了使用方便需要配置一下“环境变量”,即在“我的电脑 》右键 》属性 》高级 》环境变量 》系统变量 》 选中Path 》 编辑”,在弹出框中加入:
    ;D:\Program Files\python;D:\Program Files\python\Scripts

    然后应用即可。前面的两个路径分别是我的Python和setuptools的安装路径,你需要修改成你自己的。

  4. 开始 》运行 》(Win + R)输入“cmd”,输入:
    python -c "import pkg_resources"

    没有任何输出,即表示setuptools安装成功。接着依次输入运行:

    easy_install Pygments
    easy_install simplejson
    easy_install Cheetah
    

    setuptools会自动寻找并下载PygmentsSimpleJSONCheetah这三个扩展库,并安装它。

  5. 下载YUI Doc,并解压在某个目录下。复制其bin目录下的example.bat文件,重命名为test.bat,然后用记事本或其他编辑器打开并配置它:
    SET yuidoc_home="D:\yui\yuidoc"
    REM YUI Doc的路径
    parser_in="D:\yui\src"
    REM 要生成文档的JS文件路径,比如为了测试就我临时建一个,里面就放着YUI 的 dom.js
    parser_out="D:\yui\src\parser"
    REM YUI Doc会把解析的JS文件提取出来所要存放的位置
    generator_out="D:\yui\src\generator"
    REM 生成文档存放的位置
    

    保存并运行test.bat后,就会发现D:\yui\src中多了parser和generator两个目录,而generator中正是你要的文档。

学会使用工具仅仅是开始了一小步,仔细看看YUI Doc的官方文档吧,利用其来促使我们写出更高效优雅的前端代码并惠及更多的人才是一大步。

转载:http://dancewithnet.com/2008/12/30/why-start-yui-doc/

返回顶部