Есть ли автоматическая задача [grunt] для добавления CDN к файлам CSS/JS внутри вашего index.html?

Работа с генератором yoman- angular, предполагается, что вы хотите поместить свои файлы css и скриптов на том же сервере, что и ваш файл index.html. Он генерирует файл dist/index.html, который выглядит следующим образом:

<link rel="stylesheet" href="styles/7d151330.main.css">
<script src="scripts/6f9c9a13.scripts.js"></script>
<script src="scripts/bd6ce9e3.plugins.js"></script>
<script src="scripts/ec88f033.modules.js"></script>

Тем не менее, я хотел бы разместить файлы CSS/JS на другом сервере и добавить к нему URL:

<link rel="stylesheet" href="//mycdn.com/styles/7d151330.main.css">
<script src="//mycdn.com/scripts/6f9c9a13.scripts.js"></script>
<script src="//mycdn.com/scripts/bd6ce9e3.plugins.js"></script>
<script src="//mycdn.com/scripts/ec88f033.modules.js"></script>

Я считаю, что это лучшая практика YSLOW и на самом деле используется страницей stackoverflow, на которую вы сейчас смотрите (смотрите источник, чтобы увидеть их примечание на https://cdn.sstatic.net/) Наличие разных CDN пока не представляется возможным с помощью grunt-google-cdn плагина

Моя текущая мысль - выполнить поиск и вставить:

<script src="[INSERTHERE]scripts/
<link rel="stylesheet" href="[INSERTHERE]styles/

UPDATE: есть несколько плагинов grunt, которые выполняют поиск/замену, поэтому это может быть лучший маршрут.

Любые дополнительные предложения, чтобы получить URL-адрес CDN, добавленный во время сборки grunt?

Ответ 1

Я искал ту же функциональность, и кажется, что этот пакет выполнит эту работу: https://github.com/tactivos/grunt-cdn

Ответ 2

Это делает работу https://www.npmjs.org/package/grunt-cdnify Для стандартного варианта использования просто установите базовую строку для своих URL-адресов - например, "//cdn.example.com/". Задача cdnify будет автоматически искать все локальные URL-адреса в ваших файлах и префикс их этой строкой. (Он автоматически избегает добавления двойных косых черт.)

Ответ 3

Для более общей цели, чем просто "CDNize", вы можете использовать модуль grunt-preprocess, который позволяет предварительно обрабатывать ваши исходные файлы (html и else).

С помощью этого вы можете создавать исходные файлы в зависимости от любой переменной.. например, разные URL-адреса по окружению, добавление кода DEBUG и т.д.

Дополнительная информация здесь: https://github.com/jsoverson/grunt-preprocess

ps: см. другой связанный мой ответ здесь: Как установить базовый URL-адрес AngularjJS динамически на основе выбранной переменной среды?