web-dev-qa-db-ja.com

Java WebアプリケーションのJavascriptミニファイを自動化するにはどうすればよいですか?

Java WebアプリのJavascriptミニファイを自動化することを好む方法を聞くことに興味があります。私が特に興味を持っているいくつかの側面があります。

  • どのようにintegrate?それはビルドツール、サーブレットフィルター、WARファイルを後処理するスタンドアロンプ​​ログラム、または何か他のものの一部ですか?
  • 有効化および無効化が簡単?縮小されたスクリプトを試してデバッグするのは非常に面白くないですが、開発者が縮小が何も壊さないことをテストできることも役立ちます。
  • 透過的で動作しますか、それとも日々の作業で考慮しなければならない副作用(縮小化に固有の副作用を除く)がありますか?
  • どのミニファイヤ使用しますか?
  • 機能がないあなたが考えることができますか?
  • あなたはそれについて何が好きですか?
  • あなたはそれについて好きな好きではない

これは主に私の将来のプロジェクトの参考になります(また、他のSOerも参考になることを願っています)。したがって、あらゆる種類のツールが興味深いものになります。

これはどのミニファイが最適かについての質問ではないことに注意してください。私たちはすでにそれらの多くを持っています。)

120
gustafc
64
gustafc

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>
13
serg

この仕事に最適なツールの1つはwro4jであると思います---チェックアウト https://github.com/wro4j/wro4j

必要なすべてを行います:

  • プロジェクトのWebリソース(jsおよびcss)を整理しておく
  • 実行時(単純なフィルターを使用)またはビルド時(mavenプラグインを使用)にそれらをマージおよび縮小します
  • 無料でオープンソース:Apache 2.0ライセンスでリリース
  • wro4jでサポートされているいくつかの縮小ツール:JsMin、Google Closureコンプレッサー、YUIなど
  • とても使いやすい。サーブレットフィルタ、プレーンJavaまたはSpring構成をサポート
  • JavascriptおよびCSSメタフレームワークのサポート:CoffeeScript、Less、Sassなど
  • 検証:JSLint、CSSLintなど

デバッグモードと実稼働モードで実行できます。処理/プリプロセスする必要があるすべてのファイルを指定するだけで、残りは処理されます。

次のように、マージ、縮小、圧縮されたリソースを単に含めることができます。

<script type="text/javascript" src="wro/all.js"></script>
12
SZ Quadri

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コンプレッサーは単一のマクロでディレクトリ内のすべてのファイルを縮小できますが、クロージャーコンパイラはできません

8
Victor

私は2つの方法を試しました:

  1. サーブレットフィルターを使用します。本番モードでは、フィルターがアクティブになり、*。cssや* .jsなどのURLにバインドされたデータを圧縮します
  2. mavenおよび yuicompressor-maven-plugin ;を使用して圧縮は無制限に実行されます(生産戦争を組み立てる場合)

もちろん、後者のソリューションは実行時にリソースを消費せず(私のwebappはgoogleアプリエンジンを使用します)、アプリケーションコードを複雑にしないため、より優れています。したがって、次の回答では、後者の場合を想定しています。

どのように統合しますか?それはあなたのビルドツール、サーブレットフィルター、WARファイルを後処理するスタンドアロンプ​​ログラム、または他の何かの一部ですか?

mavenを使用する

有効化および無効化は簡単ですか?縮小されたスクリプトを試してデバッグするのは非常に面白くないですが、開発者が縮小が何も壊さないことをテストできることも役立ちます。

最終戦争を組み立てるときにのみアクティブにします。開発モードでは、リソースの非圧縮バージョンが表示されます

それは透過的に動作しますか、それとも日々の作業で考慮する必要のある副作用(縮小化に固有の副作用を除く)がありますか?

絶対に

どのミニファイヤーを使用しますか?

YUIコンプレッサー

あなたが考えることができる機能が欠けていますか?

いいえ、非常に完全で使いやすいです

あなたはそれについて何が好きですか?

私のお気に入りのツール(maven)と統合されており、プラグインは中央リポジトリ(良いmaven市民)にあります

7
dfa

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> 
 ... 
 
4
Andy Bell

誰も言及していないことに本当に驚いています[〜#〜] 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をサポートします。

3
Amr Mostafa

私たちのプロジェクトは多くの方法でそれを処理しましたが、さまざまな反復を通じて YUI Compressor を使用し続けました。

最初に、特定のファイルに初めてアクセスしたときに、JavaScriptの圧縮を処理するサーブレットがありました。その後、キャッシュされました。カスタムプロパティファイルを処理するシステムが既に用意されていたため、構成ファイルを更新して、作業環境に応じてコンプレッサーの有効化または無効化をサポートしました。

現在、開発環境では、デバッグ目的で圧縮JavaScriptを使用することはありません。代わりに、アプリケーションをWARファイルにエクスポートするときに、ビルドプロセスで圧縮を処理します。

私たちのクライアントは圧縮に関する懸念を表明したことはなく、開発者はJavaScriptのデバッグを決定するまで圧縮に気付きません。ですから、副作用があったとしても、最小限の透明性があると思います。

2
doomspork

これは私のために働いた: 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>
1
Reverse Tarzan

hum​​pty と呼ばれるWebアセットを管理するためのフレームワークを書いています。 WebJarsとServiceLoadersを使用することにより、jawrやwro4jよりもシンプルでモダンになることを目指しています。

どのように統合しますか?それはあなたのビルドツール、サーブレットフィルター、WARファイルを後処理するスタンドアロンプ​​ログラム、または他の何かの一部ですか?

開発では、サーブレットが必要に応じてアセットを処理します。アセットは本番前にプリコンパイルされ、パブリックフォルダーに配置されるため、使用される部分はHTMLに正しいインクルードを生成することだけです。

有効化および無効化は簡単ですか?縮小されたスクリプトを試してデバッグするのは非常に面白くないですが、開発者が縮小が何も壊さないことをテストできることも役立ちます。

これは、開発モードと本番モードを切り替えることで実行できます。

それは透過的に動作しますか、それとも日々の作業で考慮する必要のある副作用(縮小化に固有の副作用を除く)がありますか?

私はそれが透明であると信じていますが、WebJarsの使用を強く支持しています。

どのミニファイヤーを使用しますか?

クラスパスに配置するプラグインが使用するもの。現在、Google Closure Compilerのプラグインの作成を検討しています。

あなたが考えることができる機能が欠けていますか?

まだプレリリースですが、本番環境で使用しています。 Mavenプラグインにはまだ多くの作業が必要です。

あなたはそれについて何が好きですか?

フレームワークを構成するために依存関係を追加するだけのシンプルさ

あなたはそれについて何が好きではありませんか?

それは私の赤ちゃんです、私はそれをすべて愛しています;)

1
Mwanji Ezana