it-swarm.com.ru

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

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

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

22
HP.

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

- 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-->

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

16
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 из 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 просит в комментариях.

1
JrBenito

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

},

0
imcg