125

JavaWebアプリのJavascriptミニファイを自動化する方法を知りたいです。ここに私が特に興味を持っているいくつかの側面があります:

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

これは主に私の将来のプロジェクトのリファレンスとして役立ちます(そして、他のSOerもそれを参考にしてくれることを願っています)ので、あらゆる種類のツールが興味深いものです。

これは、どのミニファイアが最適であるかについての質問ではないことに注意してください。すでにたくさんのミニファイアがあります。)

4

11 に答える 11

13

Antタスクを使用して、本番ビルド中にYUICompressorでjsファイルを縮小し、結果を別のフォルダーに配置しています。次に、それらのファイルをWebサーバーにアップロードします。

次に例を示します。

<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>
于 2009-09-04T16:22:55.017 に答える
12

この仕事に最適で適切なツールの1つはwro4jだと思います。https: //github.com/wro4j/wro4jをチェックしてください。

それはあなたが必要とするすべてをします:

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

デバッグモードと本番モードで実行できます。処理/前処理する必要のあるすべてのファイルを指定するだけで、残りは実行されます。

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

<script type="text/javascript" src="wro/all.js"></script>
于 2013-01-01T06:18:25.880 に答える
8

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

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

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

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

Mavenを使用する

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

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

それは透過的に機能しますか、それとも(ミニファイに固有のものを除いて)日常業務で考慮しなければならない副作用がありますか?

絶対

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

YUIコンプレッサー

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

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

何が好きですか?

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

于 2009-09-04T15:25:11.503 に答える
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コンプレッサーの方が安全です。

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

于 2012-01-05T07:26:41.220 に答える
4

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" />
  <スクリプト>
       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>
..。

于 2011-04-15T23:34:18.733 に答える
3

誰もJAWRについて言及していないことに本当に驚いています-https : //jawr.github.io

それはかなり成熟していて、期待されるすべての標準機能ともう少し多くをサポートします。これがOPの優れた基準にどのように反するかです。

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

もともとはアプリケーションの起動時に処理/重労働を行い、サービスはサーブレットに基づいていました。3.x以降、ビルド時に統合するためのサポートが追加されました。

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

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

アプリケーションのdebug=on起動前に使用できるオプションがありGET、本番環境の個々のリクエストでカスタムパラメータを指定して、実行時にそのリクエストのデバッグモードを選択的に切り替えることができます。

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

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

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

SASSサポートが頭に浮かぶ。そうは言っても、それはサポートしLESSます。

于 2014-03-21T21:49:45.100 に答える
2

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

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

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

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

于 2009-09-04T15:25:27.260 に答える
2

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

YUI Compressorを使おうとした後、jQueryとPrismの最新バージョン(プロジェクトに必要な2つの主要なサードパーティJSライブラリで1つのファイルに圧縮したい)と互換性がないことに失望しました。そこで、ES6+をサポートするUglify-JSのフォークであるTerserを使用することにしました。タスクを使用して直接実行することはできませんでした<exec>が、Windowsコマンドラインメソッドを使用すると、少なくともWin 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プラグイン-JavaWebアプリケーション自体ではなく、Javaを使用してHTML5出力をビルドする)の一部であるため、統合はそれらを追加するだけでした。新しいターゲットへのタスク(デフォルトの設定と入力パラメーターのチェックに関するコードがさらにあります!)。

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

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

ミニファイアTerserですが、このメソッドを使用すると、コマンドライン入力でミニ​​ファイされたものをほぼすべて使用できます。

機能が不足していますか?TerserはJavaScriptでのみ機能します。CSSファイル(私が行う)に対して同じことをしたい場合は、YUICompressorを使用します。

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

Node.JSが必要なのは気に入らない。Node.JSに反対するものは何もありません。ただし、この特定のプロジェクトではそれ以外の方法は必要ありません。これには、YUICompressorのようなJava.jarファイルを使用する方がはるかに好きです(必要に応じて、プラグインを使用して簡単に配布できます)。

于 2019-11-06T02:49:29.107 に答える
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>
于 2013-07-05T00:50:25.650 に答える
1

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

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

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

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

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

それは透過的に機能しますか、それとも(ミニファイに固有のものを除いて)日常業務で考慮しなければならない副作用がありますか?

透過的だと思いますが、WebJarの使用を強く支持しています。

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

クラスパスに配置したプラグインのいずれかを使用します。現在、GoogleClosureCompilerのプラグインの作成を検討しています。

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

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

何が好きですか?

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

何が気に入らないの?

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

于 2014-11-25T12:51:41.757 に答える