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

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 选项,单击它对选中的文件压缩

111c0b6cb4bc53e4b2ab88e9b562aeb8.png

正常的压缩命令提示

2237289239940c8eceeacb8b0fe58dfa.png

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

1d62b76c4c194abf8b68bd224aa44087.png

压缩前

77d4bdfd7a4e15f41f31d4fbfa6887bf.png

压缩后

49c15d25a20430ade1816ffc24be7a40.png.

轻轻松松一键搞定!

说明:

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

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

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

4、Editplus集成YUI Compressor

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

3d3f6131f263747e52896e259b4deb44.png

其中具体参数如下:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/573009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 工具/原料 html&#xff0c;dw软件方法/步骤 1无序列表 无序列表是一个项目的列表&#xff0c;此列项目使用粗体圆点&#xff08;典型的小黑圆圈&#xff09;进行标记。 无序列表始于 <…

自然语言10_分类与标注

sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare http://www.tuicool.com/articles/feAfi2 NLTK读书笔记 — …

git中Please enter a commit message to explain why this merge is necessary.

Please enter a commit message to explain why this merge is necessary. 请输入提交消息来解释为什么这种合并是必要的 git 在pull或者合并分支的时候有时会遇到这个界面。可以不管(直接下面3,4步)&#xff0c;如果要输入解释的话就需要: 1.按键盘字母 i 进入insert模式 2.修…

abp框架mysql连接配置,abp框架连接数据库

ABP框架搭建项目系列教程基础版完结篇经过前面十二篇的基础教程&#xff0c;现在终于该做个总结了。回顾第一篇&#xff0c;我们建议新手朋友们先通过ABP官网的启动模板生成解决方案&#xff0c;因为这样既快速又准确&#xff0c;不会因为项目的搭建&#xff0c;而让新手畏而却…

【分布式】Zookeeper在大型分布式系统中的应用

一、前言 上一篇博文讲解了Zookeeper的典型应用场景&#xff0c;在大数据时代&#xff0c;各种分布式系统层出不穷&#xff0c;其中&#xff0c;有很多系统都直接或间接使用了Zookeeper&#xff0c;用来解决诸如配置管理、分布式通知/协调、集群管理和Master选举等一系列分布式…

Egret资源管理解决方案

关于egret开发H5页游&#xff0c;资源管理和加载的一点看法。 一 多json文件管理 二 资源归类和命名 三 exml文件编写规范 四 资源预加载、分步加载、偷载 五 资源文件group分组 六 ResUtils&#xff0c;多json文件管理类 七 ResUtils&#xff0c;资源组加载管理类 八 开发中遇…

java 等待唤醒机制,Java线程等待唤醒机制

记录面试过程中被问到的几个需要手写代码的小案例1.请手写出线程的等待唤醒机制案例中两个线程&#xff1a;SyncSetThread设置学生信息&#xff0c;SyncGetThread用来获取学生信息&#xff0c;在Student实体中提供一个标记属性flag&#xff0c;记录当前是否有数据。等待唤醒机制…

Xshell实现Windows上传文件到Linux主机

经常有这样的需求&#xff0c;我们在Windows下载的软件包&#xff0c;如何上传到远程Linux主机上&#xff1f;还有如何从Linux主机下载软件包到Windows下&#xff1b;之前我的做法现在看来好笨好繁琐&#xff0c;不过也达到了目的&#xff0c;笨人有本方法嘛&#xff1b; 我是怎…

织梦自适应php源码,DEDE织梦PHP源码响应式建筑设计类网站织梦模板(自适应手机端)...

模板名称&#xff1a;响应式建筑设计类网站织梦模板(自适应移动端) 利于SEO优化模板详情&#xff1a;织梦最新内核开发的模板&#xff0c;该模板属于企业通用、HTML5响应式、建筑设计类企业使用&#xff0c;一款适用性很强的模板&#xff0c;基本可以适合各行业的企业网站&…

mac本用WTG(Windows To Go)安装Win10到移动硬盘

准备工作&#xff1a; 一个空的 USB 3.0 移动硬盘&#xff08;在安装 WTG 时候会将这个硬盘清空重新并分区&#xff0c;注意备份好数据。USB 3.0 的优盘是不行的&#xff0c;即使安装成功&#xff0c;系统的运行速度会奇慢&#xff09; 原版Windows 10 安装镜像&#xff08;建议…

js初步简单的编程代码

简单图片切换编码demo图片地址自行替换 简单图片切换编码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml" …

安卓文本编辑器php cpp,开源的Android富文本编辑器

RichEditor基于原生EditTextspan实现的Android富文本编辑器github地址&#xff1a;https://github.com/yuruiyin/RichEditor组件描述该组件是基于原生EditTextspan的方式实现的&#xff0c;旨在提供一个功能齐全且使用方便的Android富文本编辑器。主要支持了加粗斜体等行内样式…

python gif 透明,Python3+试点批量处理简单的GIF到PNG并透明地去除背景色,python3Pillow,gif,转成,png,透明化,去掉...

1. 安装Pillow, 只用这个应该也可以&#xff0c;2. 安装 cImage下载后解压&#xff0c;拷贝image.py到你python安装目录的 Lib\site-packages 中。from PIL import Imageimport osimport imagedef get_imlist(path):"""返回目录中所有gif图像的文件名列表图像的…

matlab求半衰期,如何使用GLD和GDX价差来估计均值回归的半衰期

计算均值回归时间序列的半衰期我们可以通过例中GLD和GDX的均值回归差价来计算均值回归半衰期。MATLAB代码可以从epchan. com/book/example? _ 5. m获得。(这个程序的第一部分与example7 2. m.相同。)%在此播入example7_2. m%Insert example7 2. m in the beginning hereprevzb…

框架错误汇总

1.struts标签&#xff0c;在body中输入代码发现值栈不存在&#xff0c; 即<s:debug></s:debug>没有起作用 1 <body>2 3 4 测试url标签<br>5 <s:url value"index.jsp" var"surl"></s:url><br>6 <s:url value&…

初次进入oracle数据库,Oracle数据库的初次使用

oracle数据库的初次使用&#xff1a;oracle自带了用户 system /system管理员用户 scott/tiger用户初次使用&#xff1a;创建表空间(此处为使用默认的用户scott/tiger)在控制台&#xff1a;1.使用system/system用户登录语句&#xff1a;sqlplus system/system2.赋予用户权限&…

oracle+循环插入sql,SQL server,Oracle循环插入百万数据

SQL server&#xff0c;Oracle循环插入百万数据SQL server&#xff0c;Oracle循环插入百万数据压测时常需要往数据库插入大量数据&#xff0c;下面是我往两个数据库插入数据时用的脚本declare maxSum int,lid nvarchar(64), -- lid为表idcid int,userid nvarchar(64),oper_time…

jquery 通过submit()方法 提交表单示例

jquery 通过submit()方法 提交表单示例&#xff1a; 本示例&#xff1a;以用户注册作为例子。使用jquery中的submit()方法实现表单提交。 注&#xff1a;本示例仅提供了对表单的验证&#xff0c;本例只用选用了三个字段作为测试。 用户点击提交按钮时&#xff0c;触发点击事件&…

php background-image,css background-image属性怎么用

css background-image属性为元素设置背景图像&#xff0c;语法为&#xff1a;background-image:url(图片路径)。设置的背景图像会占据元素的全部尺寸&#xff0c;包括内边距和边框&#xff0c;但不包括外边距。css background-image属性怎么用&#xff1f;作用&#xff1a;为元…

webstorm

问题描述&#xff1a;webstorm打开文件夹&#xff0c;文件夹内的文件不能全部显示&#xff0c;如图 原因&#xff1a;配置文件xml出错 解决方法&#xff1a;删除文件夹内的idea文件&#xff0c;再用webstrom重新打开就行╮(╯▽╰)╭转载于:https://www.cnblogs.com/chenluomen…