专栏首页游戏杂谈前端开发--优化工具

前端开发--优化工具

文章转自:hikejun.com/blog/?p=478

一般来讲优化前端,涉及到文件优化的有合并、压缩JS和CSS,以及对图片的优化处理,这篇文章的工具很不错,强烈推荐一下。

整理一下我现在用的命令行工具。各有优缺点,混搭着用。同时,也可以编进Ant里。

压缩:

YUICompressor 支持JS和CSS 下载:http://yuilibrary.com/downloads/#yuicompressor 文档:http://developer.yahoo.com/yui/compressor/ 快速上手: java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

Closure  Compiler 不支持CSS文件压缩 下载:compiler.jar 文档:http://code.google.com/closure/compiler/docs/overview.html 要求:JRE 1.6 快速上手: java -jar compiler.jar --js myfile.js --js_output_file myfile-min.js 相关介绍:http://hikejun.com/blog/?p=476 支持多个文件合并: java -jar compiler.jar --js myfile-1.js --js myfile-2.js --js_output_file myfile-min.js

合并:

Combiner 下载:http://github.com/nzakas/combiner/downloads 文档:http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/ 快速上手: java -jar combiner-0.0.1.jar -v -o myfile.js *.js java -jar combiner-0.0.1.jar -v -o myfile.js myfile-1.js myfile-2.js

图片无损优化:

Smusher 调用smush.it 或 punypng 接口。 文档:http://github.com/grosser/smusher 要求:ruby + rubygems 快速上手: smusher imgs/*.* smusher imgs/*.* --service PunyPng

Mac下安装: 第一次安装smusher失败,缺东西需要先装xcode(OS安装盘2上有),再装行了。 另注意punypng区分大小写 smusher macosxlogo.png --service PunyPng

dataURI:

CSSEmbed CSS中的图片转成dataURI。(我不建议所有图片全部dataURI转换) 下载:http://github.com/nzakas/cssembed/downloads/ 文档:http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/ 快速上手: java -jar cssembed-x.y.z.jar -o styles_new.css styles.css

dataURI 本地或远程的图片转成dataURI。 下载:http://github.com/nzakas/datauri/downloads/ 快速上手: java -jar datauri-x.y.z.jar -o output.txt image.png

检查工具:

WARI 扫描js/css文件中的冗余,和没用的图片。试了一下没用的css和图片找的比较准,javascript绑定的方法都算没用不准。这东西最大的好处是整站的找 RT @umutm: Web Application Resource Inspector - WARI - http://wari.konem.net/ 下载/文档:http://wari.konem.net/ 要求:JRE 1.6 快速上手:java -jar ~/Library/wari/wari.jar 弹出一个图形化界面。其实这不算命令行工具,这工具还是有点用的

Rhino +  JSLint Javascript/html代码品质检查工具。 介绍:http://www.JSLint.com/rhino/index.html 用法:java -jar rhino/js.jar rhino/fulljslint.js my_js_file.js

JRE 1.6 (Soylatte16-1.0.2 ) :  http://hikejun.com/download/soylatte16-i386-1.0.2.tar.bz2

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 多个Jar的合并操作

    同事要写Android平台下的打包工具,遇到需要将多个jar合并成一个jar的问题。这里列一下操作步骤:

    meteoric
  • 如何判断安卓模拟器的型号(品牌)

    看到这个标题,可能很多人会疑惑,为啥?判断安卓模拟器本身就不一定准确,更何况还要知道它是什么品牌?

    meteoric
  • 手机浏览器音频内核的坑

    在华为4.4的设备上,发现H5做的一款小游戏不能播放声音,用cocos2d-js的可以正常播放。手机的UA标识:

    meteoric
  • Android项目实战(二十四):项目包成jar文件,并且将工程中引用的jar一起打入新的jar文件中

    听着music睡
  • Android项目实战(二十四):项目包成jar文件,并且将工程中引用的jar一起打入新的jar文件中

    听着music睡
  • Android打包篇:Android Studio将代码打包成jar包教程

    二、编译完成后,打开model下的build——intermediates——bundles目录,目录下有两个文件夹,debug,default,在defaul...

    砸漏
  • 在Android源码中编译出指定jar包的操作

    今天想把android源码/vendor/letv/frameworks/base/java下的源码编译成 framework-letv.jar供乐乐语音客户端...

    砸漏
  • Android.mk文件中添加第三方jar文件的方法

    下面给大家介绍Android.mk文件中添加第三方jar文件的方法,具体内容详情如下所示:

    砸漏
  • 花30分钟,用Jenkins部署码云上的SpringBoot项目

    持续交付的概念,相信你们都听过,jenkins鼎鼎大名,这个工具真是太方便了,特别是配置了自动化构建和部署之后,不管是对测试,还是对运维都帮助特别大。你懂得怎么...

    架构师修炼
  • 花30分钟,用Jenkins部署码云上的SpringBoot项目

    持续交付的概念,相信你们都听过,jenkins鼎鼎大名,这个工具真是太方便了,特别是配置了自动化构建和部署之后,不管是对测试,还是对运维都帮助特别大。你懂得怎么...

    java思维导图

扫码关注云+社区

领取腾讯云代金券