Изменить ссылку или script имя файла в html после gruntjs minify/uglify

Я использую стандартный файл minify/uglify для файлов css/js и объединяю несколько файлов в main.min.css или app.min.js... Однако мой .html файл нужно изменить, чтобы указать на эти новые имена файлов тоже в <link> или <script>

Есть ли способ автоматизировать это? Или как изменить файлы .html автоматически, чтобы переименовать имена файлов там, используя gruntjs?

Ответ 1

Я использую приложение Middleman, чтобы различать dev vs build в моем файле html или haml:

- if development?

- if build?

Ответ 2

Вы можете сделать это с помощью 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-->

Обратите внимание на комментарии "начать импорт" и "конец импорта". По умолчанию (в 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 больше не закомментирован.

Ответ 3

Это легко автоматизируется с помощью 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

Ответ 4

Для этого подходит очень важная задача: grunt-html-build

Он может заменить некоторые части HTML с dev на производственную версию. См. Примеры там, его легко настроить.

Теперь, используя стандартную конфигурацию, представленную для 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 запрашивает в комментариях.

Ответ 5

Вы можете использовать препроцесс grunt для этого: 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'
            }
    }