JS/CSS的压缩已经不是什么新鲜话题了,自打YSlow推出后,这方面的优化话题是铺天盖地啊;不过当时作为后知后觉的我,甚至都没法完整地写出一份漂亮的JS/CSS的代码,何尝会去注意呢?!

时至今日,我仍然没法独立完整地写出一份专业的代码,但对能够压缩这类代码也有了应有的兴趣和需要,动手实现刻不容缓!

百度了很多这方面的教程,尝试了很多解决方案,可谓几经周折方才成功;喜悦之余,分享于此。

本秘籍宗旨只为实现在右键集成YUI Compressor和Editplus集成YUI Compressor。

1、关于YUI Compressor

YUI Compressor – The Yahoo! JavaScript and CSS Compressor

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)

对于大量使用JavaScript和CSS的AJAX应用来说,如果JavaScript和CSS大小很大,则传输到客户端的时间会很久,网站性能不佳。而压缩JavaScript和CSS是自然的事情(其中YUI Compressor的压缩率大约为20%);

要想通过YUI Compressor来实现JS/CSS压缩,还离不开JAVA环境。

JDK环境变量配置的步骤如下:

1.我的电脑–>属性–>高级–>环境变量.

2.配置用户变量:

a.新建 JAVA_HOME

C:\Program Files\Java\jdk1.7.0_11(JDK的安装路径)

b.在PATH变量后添加

%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

3.测试环境变量配置是否成功:

开始–〉运行–〉CMD

键盘敲入: JAVA

出现相应的命令,而不是出错信息,即表示配置成功!

至此,条件都准备好了。

3、右键集成YUI Compressor

右键集成的方法,我百度出一大把,其中有介绍利用Filemenu Tools工具的,操作相对简单,只要安装好这个软件,并进行相关设置即可;不过在测试时,发现压缩后的文件名不够理想。

最后发现“琼台博客”分享的“给YUI Compressor添加右键命令”最实用也最方便;

若有需要,可以移步至琼台博客查看详细教程;教程主要部分转载如下:

三、下载 compressor.cmd 放到D:\yuicompressor文件夹里

四、新建一个 compressor.reg 文件输入以下内容

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell]

[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\YUI Compressor]

[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\YUI Compressor\command]

@="D:\\yuicompressor\\compressor.cmd \"%1\""

五、使用记事本打开compressor.cmd

其中有一处”%JAVA_HOME%\bin\java.exe” -jar “%~dp0\build\yuicompressor-2.4.7.jar” –charset UTF-8 “%~nx1” -o “%RESULT_FILE%”

这里的build\yuicompressor-2.4.7.jar 意思是相对于自己当前路径的build路径下的yuicompressor-2.4.7.jar 文件,一般你下载压缩后这个文件通常放在build目录里,无需修改,需要注意的是后面的版本号对应真实文件就好。

如你下载的是2.4.2版本,那么你解压后build目录里的文件应该是yuicompressor-2.4.2.jar。

最后一处,就是 –charset UTF-8 了,这里我默认使用了UTF-8,如果使用GBK的请改成–charset GB18030就好

六、双击 compressor.reg 导入信息到注册表,安装完毕。找一个JS或CSS文件右键就会看到菜单了,只需要执行以下,即可生成压缩版。

右键js文件,弹出的菜单里,有一个 YUI Compressor 选项,单击它对选中的文件压缩

正常的压缩命令提示

压缩后生成的文件,以及大小对比。小文件压缩,大小都差别不大,如果是几百K的文件,效果就非常好。更重要的是混淆

压缩前

压缩后

.

轻轻松松一键搞定!

说明:

右键后,其实执行的就是compressor.cmd这个文件,如果执行出错或者没有生成文件,应该是配置的不对。

如果弹出找不到设备等信息,那么是 compressor.reg 文件里指定的 compressor.cmd 路径不对。

如果对生成文件名的规则需要修改,可以打开 compressor.cmd 找到生成文件名规则块下修改。

4、Editplus集成YUI Compressor

针对Editplus集成YUI Compressor来实现压缩功能的具体实现方法如下图:

其中具体参数如下:

command:java

argument:-jar $(AppDir)\filters\yuicompressor-2.4.2.jar –type $(FileExt) –charset utf-8 $(FileName)‍ -o $(FileNameNoExt)-min.$(FileExt)

initial dirctory:$(FileDir)

这里同样需要注意一下argument(参数)里的$(AppDir)\filters\yuicompressor-2.4.2.jar是相对于你yuicompressor-2.4.2.jar所处的文件路径,比如你yuicompressor-2.4.2.jar文件位于d:\soft目录下,则这里的完整文件路径应为d:\soft\yuicompressor-2.4.2.jar。

照此设置后,你就可以享受利用YUI Compressor压缩JS/CSS的便利了。

资料参考:

http://www.qttc.net/201210233.html

http://www.cnblogs.com/mamboer/archive/2011/07/27/editplus-yuicompressor.html

css compressor java_利用YUI Compressor压缩JS/CSS之终极秘籍相关推荐

  1. spingboot2.0以上利用YUI Compressor Maven结合压缩混淆JS/CSS

    上一章节我们说了利用allatori技术对java class 文件内容进行 混淆,防止他人巧取代码技术,这一章节我们直接进入主题,利用YUI Compressor Maven 进行对前端静态资源JS ...

  2. 使用 YUI Compressor 批量压缩JS/CSS

    官方网址:http://developer.yahoo.com/yui/compressor/ 安装包下载地址:https://github.com/yui/yuicompressor/downloa ...

  3. maven js css 压缩,maven压缩js css

    maven压缩 net.alchim31.maven yuicompressor-maven-plugin 1.3.0 prepare-package compress UTF-8 false fal ...

  4. yii2 asset.php,Yii2中使用asset压缩js,css文件的方法_php实例

    官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets. ...

  5. IDEA添加外部插件-yuicompressor压缩js/css

    前端 IntelliJ IDEA2022.3 中自动压缩js,css文件 下载文件扫描器 File Watchers 配置 File Watchers 需要下载 yuicompressor 下载文件扫 ...

  6. Asp.Net使用Yahoo.Yui.Compressor.dll压缩Js|Css

    网上压缩css和js工具很多,但在我们的系统中总有特殊的地方.也许你会觉得用第三方的压缩工具很麻烦.我就遇到了这样问题,我不想在本地压缩,只想更新到服务器上去压缩,服务器压缩也不用备份之类的操作.于是 ...

  7. java 压缩js css,java YUI压缩JS跟CSS

    项目需要压缩JS和CSS,文件和文件夹太多,一一处理又比较麻烦,写个程序吧: import java.io.File; import java.io.FileInputStream; import j ...

  8. 使用yuicompressor 压缩js, CSS

    前言 保持web页面的轻量级,提高网页工程设计提升web应用程序的性能永远是一个主要策略.但是,还是有一些其他的辅助策略提升系统系统,像压缩代码, HTTP压缩传输 和使用CSS 精灵等. 压缩代码, ...

  9. 压缩 js/css 的工具

    最近检测服务器,发现js/css文件都没有压缩过,动手解决此问题先. 本次压缩采用 yui compress (2.4.8) 压缩脚本: #!/bin/sh echo "########## ...

最新文章

  1. 博士申请 | 日内瓦大学招收机器学习和计算机视觉博士生(年薪35万)
  2. ECCV2020 oral | 基于语义流的快速而准确的场景解析
  3. LTE/NR用户接入过程笔记
  4. 开源组件DocX导出Word
  5. opencv的两个错误
  6. OSM数据的获取及格式转换
  7. 哈希表(HashTable)探究(转)
  8. 手把手教你VMware 安装 CentOS
  9. linux实现多台服务器文件同步
  10. FineReport中统计列中不同数据的个数
  11. 使用Python基于BibTeX引用格式自动生成文献的IEEE引用格式
  12. camera中文版软件 ip_摄像头监控软件|IP Camera Viewer V 3.0.4.0 官方版-完美软件下载...
  13. 加拿大计算机科学专业高中选课,加拿大高中选课攻略
  14. html弹性布局什么意思,弹性布局display:flex是什么意思
  15. android传感器type_orientation,android – 已弃用的Sensor.TYPE_ORIENTATION的等效替换
  16. sns.set_style() set_platte()
  17. 关于ubuntu上,usb设备编号
  18. [读论文]CVPR2019: Occupancy Networks: Learning 3D Reconstruction in Function Space
  19. android手机连接电脑,安卓手机连接电脑的方法
  20. tplink无线网卡的linux,Ubuntu 13.10 使用 TP-LINK TL-WN725N v2.0

热门文章

  1. java判断一个整数是不是素数(质数)
  2. accept标头 php,解决PHP中缺少“授权”请求标头的问题
  3. 【OpenCV 例程200篇】83. 频率域低通滤波:印刷文本字符修复
  4. java httpclient 异步请求_java_java实现HttpClient异步请求资源的方法,本文实例讲述了java实现HttpClien - phpStudy...
  5. docker 删除所有镜像_Docker常用命令
  6. android studio1.5 for mac,适用于Mac的Android Studio 1.5.x随机崩溃
  7. python定义三维数组不指定长度_插值/调整三维数组大小
  8. 数据结构-树2-二叉树各种函数实现
  9. opencv8-图像模糊
  10. 【TensorFlow】Win7+Anaconda+python3.6+Tensorflow1.9安装教程