Czy jest jakieś zautomatyzowane zadanie (chrząszcz), aby dodać CDN do plików CSS/JS w pliku index.html?

Question

Praca z generatorami kątowymi, zakłada, że ​​chcesz umieścić pliki css i skrypty na tym samym serwerze, co plik index.html. To generuje plik dist/index.html który wygląda tak:

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

Jednak chciałbym obsługiwać pliki CSS/JS na innym serwerze i poprzedzany z adresem 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> 

Uważam, że jest to najlepsza praktyka YSLOW i jest w rzeczywistości używana przez stronę Stackoverflow, na którą aktualnie patrzysz (zobacz źródło, aby zobaczyć ich notatkę na https://cdn.sstatic.net/). Posiadanie różnych CDN nie wydaje się jeszcze możliwe z wtyczką grunt-google-cdn

Moja aktualna myśl jest przeprowadzenie szukanie i wstawić na:

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

UPDATE: Istnieje kilka Grunt wtyczek, które przeprowadzić wyszukiwanie/zastąpić więc to może być najlepsza droga.

Jakieś dodatkowe sugestie, jak uzyskać adres URL CDN, który został dodany podczas budowania pomruków?

Answer 1

Szukałem takiej samej funkcjonalności i wydaje się, że ten pakiet będzie wykonać zadanie: https://github.com/tactivos/grunt-cdn

Answer 2

ta spełnia swoje zadanie https://www.npmjs.org/package/grunt-cdnify Na standardowym przypadku użycia, wystarczy ustawić ciąg bazowy dla adresów URL - np. "//cdn.example.com/". Zadanie cdnify automatycznie wyszuka wszystkie lokalne adresy URL w twoich plikach i przedrostuje je tym ciągiem. (Automatycznie uniknie dodawania podwójnego ukośnika.)

Answer 3

W bardziej ogólnym celu niż po prostu "CDNize" można użyć modułu grunt-preproces, który umożliwia wstępne przetwarzanie plików źródłowych (html i innych).

Z tego można zbudować plików źródłowych w zależności od dowolnej zmiennej .. niczym innym adresem URL przez środowisko debugowania kodu dodaje, etc ...

Więcej informacji tutaj: https://github.com/jsoverson/grunt-preprocess

ps: zobaczyć inna odpowiednia odpowiedź tutaj: How to set AngularjJS base URL dynamically based on fetched environment variable?