YUI Compressor使用配置方法 JS/CSS压缩工具

2024-02-03 06:30

本文主要是介绍YUI Compressor使用配置方法 JS/CSS压缩工具,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发,东西很好用,安装也挺简单的,需要先下载安装jdk才可以,可能有些朋友不懂如何配置的,这里脚本之家为大家分享下,方便需要的朋友

YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。

使用方法:

//压缩JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//压缩CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

YUI Compressor v2.4.2

安装指南
=========

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

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

2.配置用户变量:
        a.新建 JAVA_HOME
           C:\Program Files\Java\j2sdk1.5.0 (JDK的安装路径)
        b.新建 PATH
              ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin        
                                c.新建 CLASSPATH
           %JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

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

   开始-->运行--〉CMD
   键盘敲入: JAVAC
        出现相应的命令,而不是出错信息,即表示配置成功!


以下是配置补充:

使用YUI Compressor压缩JS和Css

常用示例(在cmd中执行)

java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type js --charset UTF-8 D:\my.js -o D:\my-min.js
java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type css --charset UTF-8 D:\my.css -o D:\my-min.css

–type指定要打包的文件类型,可选的有 js和css
–charset 指定字符集
-o 指定输出的文件名,如果不指定这个参数将会把压缩后的内容输出到命令行上
最后的my.js和my.css是要打包的debug版源文件

如果没有给定charset参数,则字符集默认是系统的,此处指定了UTF-8,更加你的实际需要修改。具体语法和其他参数参考:http://www.julienlecomte.net/yuicompressor/

使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS,加上IIS的GZIP,加起来能得到85%左右的压缩率。(其中YUI Compressor的压缩率大约为50%)也可以修改参数获得更多的压缩率。

---------------------------------------------华丽分割线---------------------------------------

制作批处理工具

三个文件:
批处理文件:yuicompressor.bat
注册表文件:yuicompressor.reg
压缩jar包:yuicompressor-2.4.6.jar

文件目录:D:\server\f2etools\yuicompressor

yuicompressor.bat批处理使用方法:
对整个文件夹右键点击【YUI-Compressor JS/CSS】批量压缩操作生成-min.css或-min.js,源文件不变,项目平时开发时引用源文件,上线前引用压缩文件测试正常后再上线。

yuicompressor.bat批处理文件代码:


代码如下:

cd "%1"
for /f %%a in ('dir /b *-min.js') do call:ProcessDel: %%a
for /f %%a in ('dir /b *-min.css') do call:ProcessDel: %%a
for /f %%a in ('dir /b *.js') do call:ProcessCompress: %%a
for /f %%a in ('dir /b *.css') do call:ProcessCompress: %%a
:ProcessDel
IF NOT [%1]==[] call:DeleteMinFiles: %1
GOTO:EOF
:ProcessCompress
IF NOT [%1]==[] call:CompressFiles: %1
GOTO:EOF
:DeleteMinFiles
IF EXIST "%CD%\%1" del "%CD%\%1"
GOTO:EOF
:CompressFiles
java -jar D:\server\f2etools\yuicompressor\yuicompressor-2.4.6.jar %1 -o %~n1-min%~x1
GOTO:EOF


yuicompressor.reg注册表功能:选中文件夹后,右键,会多一个选项【YUI-Compressor JS/CSS】
yuicompressor.reg注册表文件代码:

代码如下:

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\Directory\shell\Compress JS/CSS Files]
@="YUI-Compressor JS/CSS"
[HKEY_CLASSES_ROOT\Directory\shell\Compress JS/CSS Files\command]
@="D:\\server\\f2etools\\yuicompressor\\yuicompressor.bat %1"


注意事项:请修改两个文件中的目录路径
批处理文件:yuicompressor.bat和注册表文件:yuicompressor.reg

---------------------------------------------华丽分割线---------------------------------------

打包压缩pack-all-min.js

文件如下:
批处理文件:pack-js.bat
需要打包的目录文件:pack-list.txt

pack-js.bat 代码:

代码如下:

for /f %%i in (packList.txt) do type %%i >> pack-all.js
java -jar D:\server\f2etools\yuicompressor\yuicompressor-2.4.6.jar --type js --charset utf-8 pack-all.js -o pack-all-min.js


pack-list.txt

jquery.ui.datepicker.js
jquery.ui.dialog.js
jquery.ui.draggable.js
jquery.ui.mouse.js

使用方法:
在当前js文件夹里放入这两个文件,平时开发用多个源文件,运行pack-js.bat后查看页面效果,上线前打包成一个压缩文件,测试无误后再上线。

这篇关于YUI Compressor使用配置方法 JS/CSS压缩工具的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/lianfuguo/article/details/46983769
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/673241

相关文章

C++类和对象之默认成员函数的使用解读

《C++类和对象之默认成员函数的使用解读》:本文主要介绍C++类和对象之默认成员函数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、默认成员函数有哪些二、各默认成员函数详解默认构造函数析构函数拷贝构造函数拷贝赋值运算符三、默认成员函数的注意事项总结一

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键

Windows 系统下 Nginx 的配置步骤详解

《Windows系统下Nginx的配置步骤详解》Nginx是一款功能强大的软件,在互联网领域有广泛应用,简单来说,它就像一个聪明的交通指挥员,能让网站运行得更高效、更稳定,:本文主要介绍W... 目录一、为什么要用 Nginx二、Windows 系统下 Nginx 的配置步骤1. 下载 Nginx2. 解压

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源

详解如何使用Python从零开始构建文本统计模型

《详解如何使用Python从零开始构建文本统计模型》在自然语言处理领域,词汇表构建是文本预处理的关键环节,本文通过Python代码实践,演示如何从原始文本中提取多尺度特征,并通过动态调整机制构建更精确... 目录一、项目背景与核心思想二、核心代码解析1. 数据加载与预处理2. 多尺度字符统计3. 统计结果可

Linux基础命令@grep、wc、管道符的使用详解

《Linux基础命令@grep、wc、管道符的使用详解》:本文主要介绍Linux基础命令@grep、wc、管道符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录grep概念语法作用演示一演示二演示三,带选项 -nwc概念语法作用wc,不带选项-c,统计字节数-

SpringCloud中的@FeignClient注解使用详解

《SpringCloud中的@FeignClient注解使用详解》在SpringCloud中使用Feign进行服务间的调用时,通常会使用@FeignClient注解来标记Feign客户端接口,这篇文章... 在Spring Cloud中使用Feign进行服务间的调用时,通常会使用@FeignClient注解

windows系统上如何进行maven安装和配置方式

《windows系统上如何进行maven安装和配置方式》:本文主要介绍windows系统上如何进行maven安装和配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录1. Maven 简介2. maven的下载与安装2.1 下载 Maven2.2 Maven安装2.

MySQL的ALTER TABLE命令的使用解读

《MySQL的ALTERTABLE命令的使用解读》:本文主要介绍MySQL的ALTERTABLE命令的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、查看所建表的编China编程码格式2、修改表的编码格式3、修改列队数据类型4、添加列5、修改列的位置5.1、把列

Python使用FFmpeg实现高效音频格式转换工具

《Python使用FFmpeg实现高效音频格式转换工具》在数字音频处理领域,音频格式转换是一项基础但至关重要的功能,本文主要为大家介绍了Python如何使用FFmpeg实现强大功能的图形化音频转换工具... 目录概述功能详解软件效果展示主界面布局转换过程截图完成提示开发步骤详解1. 环境准备2. 项目功能结