前端js和css的压缩合并之YUI-Compressor_html/css

前端js和css的压缩合并之YUI-Compressor_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:21:55

原创

1597人浏览过

me：注：早已经迁往github上了。

地址：https://github.com/yui/yuicompressor/blob/master/README.md

From： http://www.everycoding.com/coding/80.html

YUI Compressor Maven插件压缩 js、css并输出war包

YUI Compressor是一款非常强大JS混淆和压缩工具。目前很多Javascript框架都使用YUI Compressor进行了代码压缩。据说鼎鼎有名的Jquery框架也是使用YUI Compressor进行压缩。YUI Compressor压缩的好处是不仅大大减少js、css的体积，同时在对javascript代码的混淆压缩中对属性命名的替换，使得压缩过的js不易阅读，能起到源码的保护作用。本文主要介绍YUI Compressor的使用方法和技巧。

一、在Maven pom.xml文件中，添加YUI Compressor 插件。代码如下：

立即学习“前端免费学习笔记（深入）”；

<plugin>    <groupId>net.alchim31.maven</groupId>    <artifactId>yuicompressor-maven-plugin</artifactId>    <version>1.3.0</version>    <executions>        <execution>            <goals>                <goal>compress</goal>            </goals>        </execution>    </executions>    <configuration>        <skip>false</skip>        <!-- 读取js,css文件采用UTF-8编码 -->        <encoding>UTF-8</encoding>        <jswarn>false</jswarn>        <!-- 若存在已压缩的文件，会先对比源文件是否有改动。有改动便压缩，无改动就不压缩 -->        <force>false</force>        <!-- <suffix>.min</suffix> -->        <nosuffix>true</nosuffix>        <!-- 在指定的列号后插入新行 -->        <linebreakpos>-1</linebreakpos>        <!-- 压缩之前先执行聚合文件操作 -->        <pre class="brush:php;toolbar:false;"ProcessAggregates>true</preProcessAggregates>        <aggregations>            <aggregation>                <removeIncluded>true</removeIncluded>                <insertNewLine>true</insertNewLine>                <inputDir>${project.build.directory}/${project.build.finalName}/resources/static/js                </inputDir>                <output>${project.build.directory}/${project.build.finalName}/build/js/basic.min.js                </output>                <includes>                    <include>jquery-1.7.2.js</include>                    <include>everycoding.js</include>                    <include>front.js</include>                </includes>            </aggregation>            <aggregation>                <insertNewLine>true</insertNewLine>                <inputDir>${project.build.directory}/${project.build.finalName}/resources/static/css                </inputDir>                <output>${project.build.directory}/${project.build.finalName}/build/css/basic.min.css                </output>                <includes>                    <include>common.css</include>                    <include>front.css</include>                </includes>            </aggregation>        </aggregations>    </configuration></plugin>

登录后复制

aggregations：管理需要分类合并的Js、Css

二、使用Maven命令执行压缩：

ChatBA

AI幻灯片生成工具

查看详情

mvn yuicompressor:compress

登录后复制

三、打war时，如果需要排除未压缩的js、css文件，可使用如下方法：

<plugin>    <groupId>org.apache.maven.plugins</groupId>    <artifactId>maven-war-plugin</artifactId>    <version>2.4</version>    <configuration>        <warSourceExcludes>**/*.js,**/*.css</warSourceExcludes>    </configuration></plugin>

登录后复制

YUI Compressor官网： http://yui.github.io/yuicompressor/

相关配置参数说明： http://alchim31.free.fr/mvnsites/yuicompressor-maven-plugin/compress-mojo.html

——