自制批处理使用Yui Compressor压缩并打包js或css文件
今天下午,手头上没什么事做,于是就上网查看资料,看到很多人写的YUI Compressor的使用方法,大致写的都不详细,于是自己来做个总结。
(1)首先来看下,为什么要压缩js或css文件?
JS/CSS文件大,用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢,有的甚至由于CSS的文件而造成页面初始打开很凌乱。
(2)我们怎么提高用户下载JS/CSS的速度呢?
1、我们无法改变用户的网络状况,只有自己网站使用更快的带宽或者使用更强的服务器,使用户访问我们的时候感觉很快。
2、对JS/CSS文件进行压缩,由于文件较小,用户下载的时间就很短。
解决方案1,需要花费比较多的money,方案2实现比较简单,而且效果也明显。
下面我们介绍使用YUI Compressor进行JS/CSS压缩打包的方法,网上有人做了压缩大都没有讲打包(即使YUI Compressor GUI也是一样)。在这里我是用最土的办法批处理来做的。
1)前提是你的电脑上要有java 1.4以上的的环境
如果你没有安装JAVA环境的话,还需要安装一下JDK下载地址是:http://java.sun.com/javase/downloads/index.jsp 我们选择(Java SE Development Kit (JDK) 6 Update 14)这个下载。
2)到网站上下载 YUI Compressor:http://www.julienlecomte.net/yuicompressor/
3)解压到d盘:yuicompressor-2.4.2文件夹下
4)编写批处理文件compress_js.bat (这里比如compress_js.bat文件放在桌面):(注意路径 \ )
@echo off
set /p outFile=请填写输出文件名:
set /p fList=请填写合并列表文件:
for /f %%i in (%fList%) do type %%i >> %outFile%
java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar --type js --charset utf-8 %outFile% -o %outFile%
5)编写要打包的列表文件 js.txt (如放在e:\jqTest\js.txt):(注意路径 \ )
E:\jqTest\scripts\nav.js
E:\jqTest\scripts\changeSkin.js
E:\jqTest\scripts\slide.js
E:\jqTest\scripts\scroll.js
E:\jqTest\scripts\tooltip.js
E:\jqTest\scripts\tree.js
E:\jqTest\scripts\ad.js
E:\jqTest\scripts\imgHover.js
E:\jqTest\scripts\imgSlide.js
6)双击compress_js.bat文件,根据提示输入内容,ok大功告成
输入和提示如下:(注意路径 \ )
相关文档:
body{
background-image:url(about:blank);
background-attachment:fixed;
}
.myDiv{
position:fixed !important;
position:absolute;
top:expression(eval(document.documentElement.scrollTop));
}
body元素中background-image:url(about:blank);background-attachment:fixed;可防止ie6中出现闪 ......
例子:<span style="cursor:*">文本或其它页面元素</span> <a href="#" style="cursor:*">文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种:
下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!
hand是手型
例子:CSS鼠标手型效果 <a ......
语法:
border-width : medium | thin | thick | length
参数:
medium : 默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位
说明:
如果提供全部四个参数值,将按上-右-下-左的顺 ......
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
ScrollBar
{
/*划动块图片皮肤*/
thumbDownSkin: Embed(source="scrollBar/thumb. ......