ビルドプロセスですべてのjsスクリプトを1つに縮小して連結するにはどうすればよいのでしょうか。私は実際の縮小作業をしていますが、今ではHTMLページ内の参照を縮小されたファイルに設定する必要があります。 devバージョンでは、連結される5つのファイルへの参照があります。私はxmlpokeやそのようなものを入れておくべきですか?よりエレガントなテクニックはありますか?ビルドプロセスでjsを統合する
0
A
答えて
3
私はusallyそれを行う方法は、一緒にすべてのファイルCONCATで、YUIを使用して縮小化:
<target name="compress-js" unless="disable.js.compression">
<java fork="true" spawn="true" jar="tools/yuicompressor-2.3.6/yuicompressor-2.3.6.jar">
<arg value="-o" />
<arg value="${js.home}/lib/lib.js" />
<arg value="${js.home}/lib/lib.js" />
</java>
</target>
してからちょうどので、圧縮されたファイルを参照するヘッダを1つ持っている、とdev内disable.js.compressionを使用あなたのファイルは圧縮されません。スクリプトファイルが含まれてあなたのファイルで
0
、(あなたが使用され、これまでサーバサイド技術を使用して)これを行う
<%
if (@[email protected]){
%>
<script src="file1"></script>
...
<script src="file5"></script>
<%
} else {
%>
<script src="@[email protected]"></script>
<%
}
%>
はその後(あなたがアリを使用すると仮定して)ビルドファイルに「置き換え」のantターゲットを使用しますあなたは、あなたのプロジェクトの中package.json
ファイルを作成しますBuildr
を使用することができます
<replace file="yourfile.jsp" token="@[email protected]" value="${IS_DEV}"/>
<replace file="yourfile.jsp" token="@[email protected]" value="${YOUR_MINIFIED_FILE_PATH}"/>
0
@ @ @ IS_DEVと@ MINIFIED_FILE_PATHを交換しますその後
{
"name": "My Project Name",
"buildr": {
"compress": {
"js": true,
"css": true,
"img": false
},
"bundle": {
"js": true,
"css": true
},
"directories": {
"out": "./scripts/compressed",
"src": "./scripts/uncompressed"
},
"files": {
"js": true,
"css": true,
"img": false
}
}
}
実行します:ルートディレクトリには、それはこのようなものに見えるよう
buildr
上記圧縮および/スクリプト/ compressed`に./scripts/uncompressed
ディレクトリ内のすべてのCSSやJSファイルをバンドルします。ディレクトリ。
更新: GitHubのBuildrのURLを修正しました。
関連する問題
- 1. ビルドプロセスにFortifyを統合する
- 2. Swagger/OpenAPI:ビルドプロセスでtypescript/angularクライアントの生成を統合する方法は?
- 3. "vue-webpack"ビルドプロセスに "google-fonts-webpack-plugin"を統合
- 4. css/jsタイプライターエフェクト、jsfiddleを統合
- 5. GWTとAngular JSの統合
- 6. TurbogearsとRequire JSの統合
- 7. ノードJSとC++の統合
- 8. 反応コンポーネント内でjsコードを統合する
- 9. リアクションjsモバイルサイトでfacebook inviteを統合する方法
- 10. play webアプリケーションでreact jsを統合するには
- 11. Reactプロジェクト(Marketo)でJS外部リソースを統合するには
- 12. infoWindow内で.jsファイルを統合する方法は?
- 13. EXT JS 4にCKEditor 4を統合
- 14. Angular JS 1とLaravel 5.2を統合
- 15. Joomla 1.5サイトにIsotope jsを統合
- 16. Angular JSプロジェクトをWeb Apiプロジェクトに統合
- 17. TeamCityでビルドプロセスをセットアップする
- 18. グラフと反応するjsコンポーネントを統合する方法
- 19. jQueryとReact jsの統合方法は?
- 20. JSサーバAPI以外のReact.jsの統合
- 21. Prebid JSとPulsepoint exchangeの統合
- 22. Ember jsとD3との統合
- 23. PayPal Express Checkout JSとの統合:プロダクションID
- 24. BlueSnapとノードjsとの統合
- 25. レールバックエンド付きAngular JSとのSAML統合
- 26. Microsoft Bot Framework - SalesforceとのJsの統合
- 27. .cssと.jsをReactJS + Reduxアーキテクチャと統合する方法は?
- 28. Twilio-jsをAngular.jsに統合するには?
- 29. GWT JSNIを使用してjsファイルと統合する
- 30. jQueryプラグインについてjsファイルを統合する方法
あなたはどのような環境を使用していますか?スプロケットはこれを助けます(http://getsprockets.org/)。 – Tom