Java WebアプリのJavascriptミニファイを自動化することを好む方法を聞くことに興味があります。私が特に興味を持っているいくつかの側面があります。
これは主に私の将来のプロジェクトの参考になります(また、他のSOerも参考になることを願っています)。したがって、あらゆる種類のツールが興味深いものになります。
(これはどのミニファイが最適かについての質問ではないことに注意してください。私たちはすでにそれらの多くを持っています。)
Antタスクを使用して、実動ビルド中にYUICompressorでjsファイルを縮小し、結果を別のフォルダーに入れています。次に、これらのファイルをWebサーバーにアップロードします。 YUI + Ant統合の良い例をいくつか見つけることができます このブログで 。
以下に例を示します。
<target name="js.minify" depends="js.preprocess">
<apply executable="Java" parallel="false">
<fileset dir="." includes="foo.js, bar.js"/>
<arg line="-jar"/>
<arg path="yuicompressor.jar"/>
<srcfile/>
<arg line="-o"/>
<mapper type="glob" from="*.js" to="*-min.js"/>
<targetfile/>
</apply>
</target>
この仕事に最適なツールの1つはwro4jであると思います---チェックアウト https://github.com/wro4j/wro4j
必要なすべてを行います:
デバッグモードと実稼働モードで実行できます。処理/プリプロセスする必要があるすべてのファイルを指定するだけで、残りは処理されます。
次のように、マージ、縮小、圧縮されたリソースを単に含めることができます。
<script type="text/javascript" src="wro/all.js"></script>
Google ClosureコンパイラとYahooコンプレッサーのantマクロを作成し、このファイルをさまざまなWebプロジェクトに含めました。
<?xml version="1.0" encoding="UTF-8"?>
<!-- CSS and JS minifier. -->
<!DOCTYPE project>
<project name="minifier" basedir=".">
<property name="gc" value="compiler-r1592.jar" />
<property name="yc" value="yuicompressor-2.4.6.jar" />
<!-- Compress single js with Google Closure compiler -->
<macrodef name="gc-js">
<attribute name="dir" />
<attribute name="src" />
<sequential>
<Java jar="${gc}" fork="true">
<!--
- - compilation_level WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS
Specifies the compilation level to use. Default: SIMPLE_OPTIMIZATIONS
- - warning_level QUIET | DEFAULT | VERBOSE
Specifies the warning level to use.
-->
<arg line="--js=@{dir}/@{src}.js" />
<arg line="--js_output_file=@{dir}/@{src}-min-gc.js" />
</Java>
</sequential>
</macrodef>
<!-- Compress single js with Yahoo compressor -->
<macrodef name="yc-js">
<attribute name="dir" />
<attribute name="src" />
<sequential>
<Java jar="${yc}" fork="true">
<arg value="@{dir}/@{src}.js" />
<arg line="-o" />
<arg value="@{dir}/@{src}-min-yc.js" />
</Java>
</sequential>
</macrodef>
<!-- Compress all js in directory with Yahoo compressor -->
<macrodef name="yc-js-all">
<attribute name="dir" />
<sequential>
<apply executable="Java" parallel="false">
<fileset dir="@{dir}" includes="*.js" excludes="*-min*.js" />
<arg line="-jar" />
<arg path="${yc}" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.js" to="@{dir}/*-min-yc.js" />
<targetfile />
</apply>
</sequential>
</macrodef>
<!-- Compress all css in directory with Yahoo compressor -->
<macrodef name="yc-css-all">
<attribute name="dir" default="${build.css.dir}" />
<sequential>
<apply executable="Java" parallel="false">
<fileset dir="@{dir}" includes="*.css" excludes="*-min*.css" />
<arg line="-jar" />
<arg path="${yc}" />
<arg line="-v --line-break 0" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.css" to="@{dir}/*-min.css" />
<targetfile />
</apply>
</sequential>
</macrodef>
</project>
統合:<import file="build-minifier.xml" />
をbuild.xmlで実行し、通常のantタスクとして呼び出します:<gc-js dir="${build.js.dir}" src="prototype" />
<yc-js-all dir="${build.js.dir}" />
Google ClosureコンパイラとYahooコンプレッサーの2つのミニファイヤの選択。それらを手動でダウンロードし、xmlファイルの近くに配置する必要があります
ミニファイヤは既に圧縮されたファイルをスキップします(末尾が-min*
)
通常、スクリプトの3つのバージョンを作成します:非圧縮(例:prototype.js
)デバッグ用、クロージャーコンパイラで圧縮(prototype-min-gc.js
)実動サーバーの場合、Yahooで圧縮(prototype-min-yc.js
)クロージャコンパイラは危険な最適化を使用し、無効な圧縮ファイルを生成する場合があり、Yahooコンプレッサーの方が安全であるため、トラブルシューティング用
Yahooコンプレッサーは単一のマクロでディレクトリ内のすべてのファイルを縮小できますが、クロージャーコンパイラはできません
私は2つの方法を試しました:
もちろん、後者のソリューションは実行時にリソースを消費せず(私のwebappはgoogleアプリエンジンを使用します)、アプリケーションコードを複雑にしないため、より優れています。したがって、次の回答では、後者の場合を想定しています。
どのように統合しますか?それはあなたのビルドツール、サーブレットフィルター、WARファイルを後処理するスタンドアロンプログラム、または他の何かの一部ですか?
mavenを使用する
有効化および無効化は簡単ですか?縮小されたスクリプトを試してデバッグするのは非常に面白くないですが、開発者が縮小が何も壊さないことをテストできることも役立ちます。
最終戦争を組み立てるときにのみアクティブにします。開発モードでは、リソースの非圧縮バージョンが表示されます
それは透過的に動作しますか、それとも日々の作業で考慮する必要のある副作用(縮小化に固有の副作用を除く)がありますか?
絶対に
どのミニファイヤーを使用しますか?
YUIコンプレッサー
あなたが考えることができる機能が欠けていますか?
いいえ、非常に完全で使いやすいです
あなたはそれについて何が好きですか?
私のお気に入りのツール(maven)と統合されており、プラグインは中央リポジトリ(良いmaven市民)にあります
Granuleタグなどの圧縮ライブラリが必要だと思います。
http://code.google.com/p/granule/
異なるメソッドを使用してg:compressタグでラップされたjavascriptをgzipで結合し、Antタスクも備えています
コードサンプルは次のとおりです。
<g:compress> <script type = "text/javascript" src = "common.js" /> <script type = "text/javascript" src = " closure/goog/base.js "/> <script> goog.require( 'goog.dom'); goog.require( 'goog.date'); goog.require( 'goog.ui.DatePicker'); </ script> <script type = "text/javascript"> var dp = new goog.ui.DatePicker(); dp.render(document.getElementById( 'datepicker')); </ script> </ g:compress> ...
誰も言及していないことに本当に驚いています[〜#〜] jawr [〜#〜]- https://jawr.github。 io
かなり成熟しており、予想されるすべての標準機能をサポートしています。これがOPの優れた基準にどのように当てはまるかを示しています。
どのように統合しますか?それはあなたのビルドツール、サーブレットフィルター、WARファイルを後処理するスタンドアロンプログラム、または他の何かの一部ですか?
もともとは、アプリケーションの起動時に処理/リフティングを行い、サービスは servlet に基づいていました。 3.xからは、 ビルド時の統合 のサポートが追加されました。
JSPおよびFaceletsのサポートは、処理されたリソースをインポートするカスタムJSPタグライブラリを介して提供されます。それに加えて、 静的HTMLページからリソースをロードする をサポートするJSリソースローダーが実装されています。
有効化および無効化は簡単ですか?縮小されたスクリプトを試してデバッグするのは非常に面白くないですが、開発者が縮小が何も壊さないことをテストできることも役立ちます。
debug=on
オプションは、アプリケーションの起動前に使用できます。カスタムGET
パラメーターを実稼働環境の個々の要求で指定して、実行時に要求のデバッグモードを選択的に切り替えることができます。
どのミニファイヤーを使用しますか?
JSではYUI CompressorとJSMinをサポートしていますが、CSSではわかりません。
あなたが考えることができる機能が欠けていますか?
SASS
サポートが思い浮かびます。つまり、LESS
をサポートします。
私たちのプロジェクトは多くの方法でそれを処理しましたが、さまざまな反復を通じて YUI Compressor を使用し続けました。
最初に、特定のファイルに初めてアクセスしたときに、JavaScriptの圧縮を処理するサーブレットがありました。その後、キャッシュされました。カスタムプロパティファイルを処理するシステムが既に用意されていたため、構成ファイルを更新して、作業環境に応じてコンプレッサーの有効化または無効化をサポートしました。
現在、開発環境では、デバッグ目的で圧縮JavaScriptを使用することはありません。代わりに、アプリケーションをWARファイルにエクスポートするときに、ビルドプロセスで圧縮を処理します。
私たちのクライアントは圧縮に関する懸念を表明したことはなく、開発者はJavaScriptのデバッグを決定するまで圧縮に気付きません。ですから、副作用があったとしても、最小限の透明性があると思います。
これは私のために働いた: https://bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home
<!-- minimize all static *.css & *.js content -->
<target name="static-content-minify">
<taskdef name="yuicompressor"
classname="com.metrosix.yuicompressor.anttask.YuiCompressorTask">
<classpath>
<pathelement location="${jar.yui.compressor}"/>
<pathelement location="${jar.yui.anttask.compressor}" />
</classpath>
</taskdef>
<yuicompressor todir="${build.static.content.min}" charset="utf-8"
preserveallsemicolons="true" munge="true" >
<fileset dir="${src.static.content}">
<include name="**/*.css"/>
<include name="**/*.js"/>
</fileset>
</yuicompressor>
</target>
humpty と呼ばれるWebアセットを管理するためのフレームワークを書いています。 WebJarsとServiceLoadersを使用することにより、jawrやwro4jよりもシンプルでモダンになることを目指しています。
どのように統合しますか?それはあなたのビルドツール、サーブレットフィルター、WARファイルを後処理するスタンドアロンプログラム、または他の何かの一部ですか?
開発では、サーブレットが必要に応じてアセットを処理します。アセットは本番前にプリコンパイルされ、パブリックフォルダーに配置されるため、使用される部分はHTMLに正しいインクルードを生成することだけです。
有効化および無効化は簡単ですか?縮小されたスクリプトを試してデバッグするのは非常に面白くないですが、開発者が縮小が何も壊さないことをテストできることも役立ちます。
これは、開発モードと本番モードを切り替えることで実行できます。
それは透過的に動作しますか、それとも日々の作業で考慮する必要のある副作用(縮小化に固有の副作用を除く)がありますか?
私はそれが透明であると信じていますが、WebJarsの使用を強く支持しています。
どのミニファイヤーを使用しますか?
クラスパスに配置するプラグインが使用するもの。現在、Google Closure Compilerのプラグインの作成を検討しています。
あなたが考えることができる機能が欠けていますか?
まだプレリリースですが、本番環境で使用しています。 Mavenプラグインにはまだ多くの作業が必要です。
あなたはそれについて何が好きですか?
フレームワークを構成するために依存関係を追加するだけのシンプルさ
あなたはそれについて何が好きではありませんか?
それは私の赤ちゃんです、私はそれをすべて愛しています;)