web-dev-qa-db-ja.com

gruntjs minify / uglifyの後で、htmlのリンクまたはスクリプトファイル名を変更します

私はcss/jsファイルに標準のminify/uglifyを使用しており、複数のファイルをmain.min.cssまたはapp.min.jsに結合しています...ただし、<link>でもこれらの新しいファイル名を指すように、.htmlファイルを変更する必要があります。または<script>

これを自動化する方法はありますか？または、gruntjsを使用して.htmlファイルを自動的に変更し、そこにあるファイル名の名前を変更するにはどうすればよいですか？

javascripthtmlnode.jsgruntjsgrunt-contrib-uglify
22
HP.

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

- if development?

そして

- if build?

0
HP.

これは grunt-string-replace で実行できます。これがあなたがそれをどのように使うことができるかの例です。

私のindex.htmlには、次のインポートタグがあります。

<!--start PROD imports
<script src="assets/dist/traffic.min.js"></script>
end PROD imports-->

<!--start DEV imports-->
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script> 
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
<!--end DEV imports-->

'startimports'および 'endimports'コメントに注意してください。デフォルト（DEV内）では、PRODインポートをコメントアウトします。

次に、gruntファイルに次のタスクを追加します。

    'string-replace': {
        inline: {
            files: {
                'index.html': 'index.html'
            },
            options: {
                replacements: [
                    {
                        pattern: '<!--start PROD imports',
                        replacement: '<!--start PROD imports-->'
                    },
                    {
                        pattern: 'end PROD imports-->',
                        replacement: '<!--end PROD imports-->'
                    },
                    {
                        pattern: '<!--start DEV imports-->',
                        replacement: '<!--start DEV imports'
                    },
                    {
                        pattern: '<!--end DEV imports-->',
                        replacement: 'end DEV imports-->'
                    }
                ]
            }
        }
    }

タスク（grunt string-replace）を実行すると、次のようになります。

<!--start PROD imports-->
<script src="assets/dist/traffic.min.js"></script>
<!--end PROD imports-->

<!--start DEV imports
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
end DEV imports-->

これで、DEVインポートはコメントアウトされ、PRODインポートはコメントアウトされなくなりました。

17
David Bulté

これは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

13
jdforsythe

これに非常に適したうなり声のタスクは 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がコメントで求めていることです。

1
JrBenito

これを行うには、grunt preprocessを使用できます： https://github.com/jsoverson/grunt-preprocess

基本的には、テンプレートを設定し、前処理で関連部品を交換する必要があります。

Gruntfileの部分は次のようになります。

preprocess: {
    dev: {
            options: {
                    context: {
                            DEBUG: true,
                            Host: '<%= env.dev.Host %>'
                    }
            },
            files: {
                    'index.html': 'tpl/index.tpl'
            }
    },
    production: {
            options: {
                    context: {
                            DEBUG: false,
                            Host: '<%= env.production.Host %>
                    }
            },
            files: {
                    'index.html': 'tpl/index.tpl'
            }
    }

}、

0
imcg