フロントエンド js と css の圧縮とマージ YUI-Compressor_html/css_WEB-ITnose

me: 注: すでに github に移動されています。

アドレス: https://github.com/yui/yuicompressor/blob/master/README.md

出典: 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の使い方やテクニックを中心に紹介します。

1. 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 を管理します

2. Maven コマンドを使用して圧縮を実行します:

mvn yuicompressor:compress

3. 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 公式 Web サイト: http://yui.github.io/yuicompressor/

関連する設定パラメータの説明: http://alchim31.free.fr /mvnsites/yuicompressor-maven-plugin/compress-mojo.html

++

+

+

——

+

+

+