Java WebアプリケーションのJavascript圧縮をどのように自動化しますか?


122

Java WebアプリのJavascript縮小化を自動化する方法を知りたいです。ここに、私が特に興味を持っているいくつかの側面があります。

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

これは主に私の将来のプロジェクトのリファレンスとして機能します(他のSOerでも参考になると思います)。そのため、あらゆる種類のツールが興味深いものになります。

これはどの縮小版が最適であるかという問題ではないことに注意してください。すでにたくさんの縮小版があります。)


聞いたことがなかったので、これは本当に面白いようです。クイック検索で見つけたツールはすべて、一度実行する手動ツールです。antやmavenのプラグインがあると便利です。うまくいけば、誰かが良い答えを持っています。
ジェイ

そして、誰かがやった表示されます- DFAの答えをチェック:stackoverflow.com/questions/1379856/...
gustafc

回答:


65

このコメントの時点で、minify-mavenとmaven yuiコンプレッサーは、ES6機能でうまく機能しませんでした
DPM

13

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>

2
スニペット; いいね。開発script srcビルドのターゲットを変更しますか、それとも圧縮されていないファイルを圧縮/ jsディレクトリにコピーしますか?
gustafc

本番用に、public_html / jsの元のファイルに圧縮ファイルをアップロードします。良いことは、ローカルと本番の間でコーディングやパスの変更がないことです。悪いことは、手動でアップロードして上書きする必要があることです(私は自動化できると確信していますが、私たちには価値がありません。アップロードたまにいくつかのjsファイルはそれほど大きな問題ではありません)。
serg

私はあなたのコードを使用しましたが、それは私のプロジェクトのルートに縮小されたファイルを作成します、私は設定しました<fileset dir="${generatedScriptsDir}" includes="**/*.js"/>が、それは動作しません。でファイルを生成するにはどうすればよい${generatedScriptsDir}ですか?
Vadorequest 2015年

「dir」属性を「apply」タグに追加してみてください。「$ {generatedScriptsDir}」が設計された宛先を持つ「プロパティ」として作成されていることを確認します
Rajasri.J

12

この仕事に最適なツールの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>

2
確かに気の利いたツールのようです。更新してくれてありがとう!
gustafc

クライアント側で強制的に更新するために、リソースファイルにバージョン管理を追加しますか?この機能に関するドキュメントは見つかりませんでした。
Qiang

wro4jで本当に見逃している唯一のものはcssプリフィックスです。
inafalcao

wroサーバー上で生成された)静的コンテンツをapacheWebサーバーから提供することは可能ですか?
HybrisHelp 2018

8

私は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}" />

  • 2つの縮小版の選択:Google ClosureコンパイラーとYahooコンプレッサー。手動でダウンロードして、xmlファイルの近くに配置する必要があります。

  • 縮小機能は既に圧縮されたファイルをスキップします(末尾が-min*

  • 通常、スクリプトの3つのバージョンを作成します。prototype.jsデバッグ用に非圧縮(例:)、prototype-min-gc.js本番サーバー用に閉鎖コンパイラ()で圧縮prototype-min-yc.js、トラブルシューティング用にYahoo()で圧縮

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


8

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

  1. サーブレットフィルターを使用します。プロダクションモードでは、フィルターがアクティブになり、*。cssや* .jsなどのURLにバインドされたすべてのデータを圧縮します
  2. mavenとyuicompressor-maven-pluginを使用します。圧縮は無タンタルで行われます(生産戦争を組み立てるとき)

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

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

Mavenを使用

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

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

それは透過的に機能しますか、それとも日常業務で考慮しなければならない(縮小化に固有の副作用は別として)副作用がありますか?

絶対に

どのミニファイアを使用していますか?

YUIコンプレッサー

考えられる機能が不足していますか?

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

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

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


Mavenプラグイン-いいですね。私の現在のプロジェクトはすべてantを使用しているのが
残念です

YUI Antタスクを使用して、「製品版warファイル」をビルドするターゲットを作成できます
dfa

4

Granuleタグなどの圧縮ライブラリが必要だと思います。

http://code.google.com/p/granule/

それはgzipし、さまざまなメソッドを使用してg:compressタグでラップされたjavascriptを組み合わせ、Antタスクも持っています

コードサンプルは次のとおりです。

<g:compress>
  <script type = "text / javascript" src = "common.js" />
  <script type = "text / javascript" src = "closure / goog / base.js" />
  <スクリプト>
       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>
...


はい、それはかなり気の利いたように見えます。
gustafc 2011

3

私は本当に誰も言及していない驚いJAWRを - https://jawr.github.io

それはかなり成熟しており、期待されるすべての標準機能をサポートしています。これは、OPの優れた基準に対してどのように成り立つかです。

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

もともとはアプリケーションの起動時に処理/大規模な処理を行い、提供はサーブレットに基づいていました。3.xから、ビルド時の統合のサポートを追加しました

処理されたリソースをインポートするためのカスタムJSPタグライブラリを通じて、JSPおよびFaceletsのサポートが提供されます。さらに、静的HTMLページからのリソースのロードをサポートするJSリソースローダーが実装されています

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

debug=onオプションは、アプリケーションの起動前に使用が可能で、カスタムGETパラメータとリクエストの実行時に選択的にトグルデバッグモードへの生産の個々の要求で指定することができます。

どのミニファイアを使用していますか?

JSの場合はYUI CompressorとJSMinをサポートしますが、CSSの場合はわかりません。

考えられる機能が不足していますか?

SASSサポートが思い浮かびます。とは言っても、はサポートしていLESSます。


2

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

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

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

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


ビルドプロセスからYUIコンプレッサーをどのように使用しますか?Mavenプラグインか何か?
gustafc

1
現在、Antを使用しています。Antタスクの役立つリンクを次に示します。blog.gomilko.com
2007/11/29

1

これは私のために働きました: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>

私はsearch.maven.orgから$ {jar.yui.compressor}を得た:search.maven.org/...
リバースターザン

1

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

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

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

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

これは、開発モードと本番モードを切り替えることによって行われます。

それは透過的に機能しますか、それとも日常業務で考慮しなければならない(縮小化に固有の副作用は別として)副作用がありますか?

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

どのミニファイアを使用していますか?

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

考えられる機能が不足していますか?

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

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

フレームワークを構成するための依存関係を追加するだけの単純さ

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

それは私の赤ちゃんです、私はそれがすべて大好きです;)


1

ここのパーティーには本当に遅れましたが、これはまだ別の答えを探している人に役立つかもしれないと考えました:

YUI Compressorを使用しようとした後、jQueryおよびPrism(プロジェクトに必要な2つの主要なサードパーティJSライブラリの1つのファイルに圧縮したい)と互換性がないことにがっかりしました。私が使用することを決めたのでTerser ES6 +をサポートしていますUglify-JSのフォークです。<exec>タスクを使用して直接実行することはできませんでしたが、Windowsコマンドラインメソッドを使用すると、少なくともWindows 10で機能します(他の方法では機能しないとは言いませんが、これは非常に簡単な回避策でした)。Pathシステム変数に他のものを追加する必要はありません(Node.JSは通常、インストール中に追加されるため)。まず、ANT <concat>タスクを使用して、圧縮されていない大きなファイルを作成します。<fileset>順序を維持するために使用します(とにかくそれが重要な場合)。

<concat destfile="${js-big-file}" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true">
   <filelist refid="js-input-filelist"/>
</concat>

次に、<exec>タスクを使用して、TerserなどのNPMプログラムを実行します。このタスクApacheマニュアルページは、これが.batファイルを実行するためのWindowsの回避策であることを示しましたが、実際にはほぼすべてのコマンドラインアプリケーションを実行できます(<exec>不思議なことに他に見つけることができないものも含みます)。

<exec executable="cmd">
   <arg value="/c"/>
   <arg value="terser"/>
   <arg value="${js-big-file}" />
   <arg value="-o" />
   <arg value="${smaller-js-file}"/>  
</exec>

統合しますか?これはANTビルドスクリプト(特にカスタムJavascriptをサポートするDITA Open Toolkitプラグイン-Java Webアプリケーション自体ではなく、Javaを使用してHTML5出力をビルドする)の一部であるため、統合はそれらを追加する以上のことはありません新しいターゲットへのタスク(デフォルトの設定と入力パラメーターのチェックに関する追加のコードがあります!)。

有効化/無効化は簡単ですか?私の場合、JSファイルのビルドと縮小を含めるために、ANTビルドに渡すパラメーターがあります。したがって、はい、パラメーターを「はい」に設定した場合にのみ、このターゲットが実行されます。これは、ANTビルドで設定するのが非常に簡単です。

透明なこれまでのところ、私が含めていますいくつかのJSファイルのいずれかに影響を与えないように見えます。それらのいくつかは私自身のものであり(そして私は決してJSの専門家ではありません)、いくつかは、私が述べたように、一般的なJSライブラリです。

Minifier Terserができますが、この方法では、コマンドライン入力で縮小さどんなについてだけで使用することができます。

機能が不足していますか?Terser はJavaScriptでのみ機能します。CSSファイルに対しても同じようにしたい場合は(そうします)、YUI Compressorを使用します。

同じようにそれそれは、現在アクティブなプロジェクトであり、良好なサポートしています。さらに、現在の実装(ANT <exec>ターゲット経由でのみ呼び出す)では、将来、何か他のものを使用する必要がある場合に、ミニファイアを交換できます。

Node.JSを必要とすることは好きではありません。Node.JSに対しては何もありません。この特定のプロジェクトでは、それ以外の場合は必要ありません。これにはYUI CompressorのようなJava .jarファイルを使用したいと思います(必要に応じて、プラグインを使用して簡単に配布できます)。


後期の方も大歓迎です!プロジェクトを2つの異なるプログラミング環境(Java +ノード)に依存させるのは面倒です。それでも、ほとんどのJavascript作業がNodeコミュニティで行われるのは当然のことです。そのため、それについて行うことはほとんどなく、Terserは最近、勢いを増しているようです。あなたの貢献をありがとう!
gustafc
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.