javascript - gruntjs minify/uglify の後に html のリンクまたはスクリプト ファイル名を変更する

Question

css/js ファイルに標準の minify/uglify を使用しており、複数のファイルを main.min.css または app.min.js に結合しています<link>。<script>

これを自動化する方法はありますか？または、.html ファイルを自動的に変更して、そこにあるファイル名の名前を変更する方法を教えてgruntjsください。

Answer 1

これは grunt-processhtml で簡単に自動化できます。ドキュメントの例を次に示します。

<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script src="app.min.js"></script>

詳細については、https://www.npmjs.org/package/grunt-processhtmlをご覧ください。

Answer 2

これに非常に適した grunt タスクはgrunt-html-buildです

HTML の一部を開発版から製品版に置き換えることができます。そこにある例を参照してください。セットアップは簡単です。

ここで、 grunt-html-buildに提示された標準構成を使用して、ビルドプロセス中に縮小されたファイルが次のように動的に命名される場合:

some-file.js->another-name.min.js

grunt-html-buildを次のように構成できます。

[...]
scripts: {
   bundle: [
            '<%= fixturesPath %>/scripts/*.min.js'
   ]
},
[...]

次のような HTML セクション:

<!-- build:script bundle -->
<script type="text/javascript" src="/path/to/js/libs/jquery.js"></script>
<script type="text/javascript" src="/path/to/js/libs/knockout.js"></script>
<script type="text/javascript" src="/path/to/js/libs/underscore.js"></script>
<script type="text/javascript" src="/path/to/js/app/module1.js"></script>
<script type="text/javascript" src="/path/to/js/app/module2.js"></script>
<!-- /build -->

次のような結果になります:

<script type="text/javascript" src="scripts/other-name.min.js"></script>
<script type="text/javascript" src="scripts/another-other-name.min.js"></script>

それが、@hyprstack がコメントで求めていることです。

Answer 3

私は Middleman App を使用していますが、html または haml ファイルで dev と build を区別しています:

- if development?

と

- if build?