Home >Web Front-end >HTML Tutorial >前端js和css的压缩合并之YUI-Compressor_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:21:551361browse

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>        <!-- 压缩之前先执行聚合文件操作 -->        <preProcessAggregates>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命令执行压缩:

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

++

+

+

——

+

+

+

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn