Gibt es eine automatisierte [grunt] Aufgabe, um ein CDN zu CSS/JS-Dateien innerhalb Ihrer index.html voranzustellen?

Question

Wenn Sie mit yeoman generator-angular arbeiten, wird davon ausgegangen, dass Sie Ihre css- und scripts-Dateien auf demselben Server wie Ihre index.html-Datei speichern möchten. Er erzeugt eine dist/index.html-Datei, die wie folgt aussieht:

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

Allerdings würde Ich mag die CSS/JS-Dateien auf einem anderen Server hosten und vorangestellt mit der 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> 

Ich glaube, dies ist die YSLOW Best Practice und wird tatsächlich von der Stackoverflow-Seite verwendet, die Sie gerade betrachten (Quelle anzeigen, um ihre Notiz auf https://cdn.sstatic.net/ zu sehen) Verschiedene CDNs scheint noch nicht mit dem grunt-google-cdn Plugin

möglich zu sein

Mein aktueller Gedanke ist eine Suche durchzuführen, und legen Sie auf:

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

UPDATE: mehrere Grunzen Plugins Es gibt die eine Suche/ersetzen, so kann dies die beste Route durchführen.

Irgendwelche zusätzlichen Vorschläge, um eine CDN-URL während eines Grunt-Builds voranzukommen?

Answer 1

ich für die gleiche Funktionalität war auf der Suche, und es scheint, als ob dieses Paket die Arbeit machen würde: https://www.npmjs.org/package/grunt-cdnify Für den Standardanwendungsfall festgelegt nur eine Basiszeichenfolge für Ihre URLs https://github.com/tactivos/grunt-cdn

Answer 2

Dies macht den Job - zB "//cdn.example.com/". Die Task cdnify sucht automatisch nach allen lokalen URLs in Ihren Dateien und weist ihnen eine Zeichenfolge voran. (Es vermeidet automatisch doppelte Schrägstriche.)

Answer 3

Für allgemeinere Zwecke als nur "CDNize" können Sie das grunt-preprocess-Modul verwenden, mit dem Sie Ihre Quelldateien (HTML und andere) vorverarbeiten können.

dies mit Ihnen Quelldateien erstellen können auf jede Variable abhängig .. wie andere URL von Umwelt, DEBUG Code fügt, etc ...

Weitere Informationen hier: https://github.com/jsoverson/grunt-preprocess

ps: siehe ein eine andere verwandte Antwort von mir hier: How to set AngularjJS base URL dynamically based on fetched environment variable?