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压缩工具的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/673241

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Windows 上如果忘记了 MySQL 密码 重置密码的两种方法

《Windows上如果忘记了MySQL密码重置密码的两种方法》:本文主要介绍Windows上如果忘记了MySQL密码重置密码的两种方法,本文通过两种方法结合实例代码给大家介绍的非常详细,感... 目录方法 1:以跳过权限验证模式启动 mysql 并重置密码方法 2:使用 my.ini 文件的临时配置在 Wi

MySQL重复数据处理的七种高效方法

《MySQL重复数据处理的七种高效方法》你是不是也曾遇到过这样的烦恼:明明系统测试时一切正常,上线后却频频出现重复数据,大批量导数据时,总有那么几条不听话的记录导致整个事务莫名回滚,今天,我就跟大家分... 目录1. 重复数据插入问题分析1.1 问题本质1.2 常见场景图2. 基础解决方案:使用异常捕获3.

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

SQL中redo log 刷⼊磁盘的常见方法

《SQL中redolog刷⼊磁盘的常见方法》本文主要介绍了SQL中redolog刷⼊磁盘的常见方法,将redolog刷入磁盘的方法确保了数据的持久性和一致性,下面就来具体介绍一下,感兴趣的可以了解... 目录Redo Log 刷入磁盘的方法Redo Log 刷入磁盘的过程代码示例(伪代码)在数据库系统中,r

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)