web-dev-qa-db-ja.com

JavaScriptファイルを1つのファイルに連結するにはどうすればよいですか？

ウェブサイト用にコンパイルされたJavaScriptファイルを作成したい。開発では、JavaScriptを個別のファイルに保存し、自動スクリプトの一部としてファイルを1つに連結し、その上でコンプレッサーを実行することをお勧めします。

私の問題は、古いDOSのcopyコマンドを使用すると、EOFマーカーも挿入されて、コンプレッサーが不平を言うということです。

/ A * .jscompiled.js/Yをコピーします

他の人は何をしていますか？

javascriptbatch-filecompression
36
Phil Hannent

Apache AntとYUI Compressorの使用をお勧めします。

http://ant.Apache.org/

http://yui.github.com/yuicompressor/

このようなものをAntビルドxmlに入れます。 2つのファイルapplication.jsとapplication-min.jsが作成されます。

<target name="concatenate" description="Concatenate all js files">
    <concat destfile="build/application.js">
        <fileset dir="src/js" includes="*.js" />
    </concat>
</target>

<target name="compress" depends="concatenate" description="Compress application.js to application-min.js">
    <apply executable="Java" parallel="false">
        <filelist dir="build" files="application.js" />
        <arg line="-jar" />
        <arg path="path/to/yuicompressor-2.4.2.jar" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.js" to="build/*-min.js" />
        <targetfile />
    </apply>
</target>
34
David Brockman

EOFなしでコピーするには、バイナリモードを使用します。

copy /B *.js compiled.js /Y

結果のファイルにEOFがまだある場合、それは元のファイルの1つに由来する可能性があります。このバリアントによって修正できます。

copy /A *.js compiled.js /B /Y

/ Aは、元のファイルに末尾のEOFがある場合はそれを削除し、/ BはEOFが結果のファイルに追加されないようにします。EOFが最後にない場合、ソースファイルはそこで切り捨てられます。スイッチの順序は重要です。

copy /A *.js /B compiled.js /Y

-ソースファイルのEOFは削除されませんが、結果のEOFは追加されません。

自分で試してみてください。 DOSコマンドは奇妙です。

11
eugensk

Asp.net AJAXでは、「CompositeScript」タグを使用できます。これにより、すべてのスクリプトが1つの大きなjsファイルにまとめられ、http 304の数と、場合によってはhttp 401の数が減ることで帯域幅が節約されます。

サンプル：

 <asp:ScriptManager ID="ScriptManager1" runat="server">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/Script1.js" />
                <asp:ScriptReference Path="~/Scripts/Script2.js" />
                <asp:ScriptReference Path="~/Scripts/Script3.js" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>

詳細については、こちらをご覧ください： http://msdn.Microsoft.com/en-us/library/cc488552.aspx

6
Punit Vora

コンプレッサーuglifyjsをマシンにインストールします。

Sudo npm -g install uglify-js

次に、次のコマンドを使用して、すべてのjsファイルを連結および圧縮できます。

cat myAppDir/*.js | uglifyjs > build/application.js
5
Fergal

これは非常に古い質問ですが、JavaScriptを使用してJavaScriptを連結する方法もあることを述べておきたいと思います。 nodejsで明らかに...たとえば、 this のようなnpmモジュールとして公開されたツールがあり、 grunt および gulp プラグインもあります。

また、jQueryやModernizrなどの巨大なプロジェクトで使用されている非常に興味深い手法についても触れておきます。このプロジェクトは両方ともrequirejsモジュールで完全に開発されており、非常にスマートな連結子として requirejsオプティマイザー を使用しています。おもしろいことは、ご覧のとおり、jQueryもModernizrもrequirejsが機能する必要がないことです。これは、コード内のrequirejsを取り除くためにrequirejsの統治儀式を消去するために発生します。そのため、requirejsモジュールで開発されたスタンドアロンライブラリが作成されます。これのおかげで、彼らは他の利点の中でも特にライブラリのカットビルドを実行することができます。 ここ は、これらすべてをより詳細に説明するブログ投稿です。

5
Augusto Altman Quaranta

次の部分で構成されるメカニズムを作成しました。

  • minfication（jsおよびcssの場合）
  • パッケージの集約
  • キャッシュ（httpステータス304など）
  • 開発モードでの元のファイルの送信

それはあなたのニーズには多すぎるかもしれませんが、他の人が何をしているのかというあなたの質問に答えるために、これはそれがどのように機能するかです：

  1. たとえば、/ css.aspx？package = core
  2. Xml構成ファイルでパッケージ名のルックアップを行います（たとえば、パッケージ「コア」にファイル/js/mootools.jsおよび/js/swfobject.jsが含まれていることを宣言します）
  3. 縮小が有効になっているかどうかを確認します。たとえば、開発環境では、縮小されたjsコンテンツが提供されるのではなく、元のファイルを書き込みます。 jsの場合、これはスクリプトインクルードのdocument.writesによって行われ、cssの場合、インポートルールを記述します。
  4. （本番環境で）縮小が必要な場合は、リクエストのif-modified-sinceヘッダーをチェックします。このクライアントがすでに縮小されたコンテンツを持っている場合は、httpヘッダー304を送信します。クライアントがコンテンツを必要とする場合は、キャッシュに縮小されたコンテンツがあるかどうかを確認し、それを提供します。それ以外の場合は、結果を縮小して送信します。

これらはすべて、個別のサービスに分割されます。 jsminificationwriterサービスに挿入されたキャッシュサービスがあります。これは、縮小ルールのみを処理する元の縮小サービスを利用します。

このアプローチの良い点は次のとおりです。

  • これにより、開発チームはjs/cssの「パッケージ」を検討する必要があり、そのため、機能を適切に分割し、それらを必要とするページに配布します。
  • 開発中は完全にデバッグでき、適切なファイルと行番号を取得できます。
  • YUIなどの他の縮小サービスの実装をフックできます。 JsMinは私たちの最初のテイクだけでした。
  • これは、さまざまなコンテンツタイプで機能する一般的なアプローチです。

お役に立てれば。必要に応じて、いくつかのコードフラグメントを投稿して、さらに詳しく説明できます。

4
Martin Kool

あなたも行うことができます：

type *.js > compiled.js
3
PhiLho

2番目のyuicompressorですが、/ packer /を使用します

http://johannburkard.de/blog/programming/javascript/automate-javascript-compression-with-yui-compressor-and-packer.html

それは私にとって本当に素晴らしいものでした。

3
annakata

また、ビルドツール（mavenプラグイン）、ランタイムソリューション（フィルターを使用）、またはコマンドラインツールとして使用できる wro4j （Java用のWebリソースオプティマイザー）を試すこともできます。これにより、リソースを簡単に整理し、ボットタイプ（jsとcss）のリソースに数十のコンプレッサーを使用してマージを処理できます。

マージするリソースの定義は次のように簡単です：

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>

免責事項：私はこのプロジェクトのコミッターです。

0
Alex Objelean

私はこれが非常に古い質問であることを知っていますが、完全を期すために Browserify を使用するオプションについて言及します。 NPMのrequire関数を使用してプロジェクトを異なるモジュールとしてビルドし、依存関係を解決してから、それらの依存関係を解決し、プロジェクト全体を1つのファイルに連結することができます。

たとえば、プロジェクトがFooBarと呼ばれ、foobar.jsというファイルを出力するとします。プロジェクトのエントリポイントとしてmain.jsファイルを作成し、含める必要のあるすべてのモジュールを必要とします。

main.js

require("./doFoo");
require("./doBar");

次に実行します：

browserify main.js -o foobar.js

または、ソースファイルが変更されるたびに自動的にそれを行うには、 Watchify を使用することもできます。

watchify main.js -o foobar.js

Browserifyは、モジュール間の依存関係も解決します。したがって、たとえば、doBar.jsがdoQux.js...に依存している場合.

doBar.js

require("./doQux");
const doBar = ()=>{
    //Do some bar stuff.
}
exports.doBar = doBar;

次に、BrowserifyはdoQux.jsをfoobar.jsに含めて、依存関係が壊れないようにします。

0
Mig82