Esiste un compito automatizzato [grunt] per anteporre un CDN ai file CSS/JS all'interno del file index.html?

Question

Lavorando con generatore-angolare generatore, si presuppone che si desidera mettere i file css e script nello stesso server del file index.html. Si genera un file di dist/index.html che assomiglia:

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

Tuttavia, mi piacerebbe ospitare i file CSS/JS su un server diverso e anteporre con l'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> 

Credo che questa sia la migliore pratica di YSLOW ed è in effetti utilizzata dalla pagina StackOverflow che stai attualmente guardando (vedi sorgente per vedere la loro nota su https://cdn.sstatic.net/) Non è ancora possibile avere diversi CDN con il plugin grunt-google-cdn

Il mio pensiero attuale è quello di eseguire una ricerca e inserire il:

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

UPDATE: Ci sono diversi plugin grugnito che eseguono una ricerca/sostituzione quindi questo potrebbe essere il percorso migliore.

Eventuali suggerimenti aggiuntivi per ottenere un URL CDN anteposto durante una compilazione di grunt?

Answer 1

che stavo cercando la stessa funzionalità e sembra che questo pacchetto sarebbe fare il lavoro: https://github.com/tactivos/grunt-cdn

Answer 2

Questo fa il lavoro https://www.npmjs.org/package/grunt-cdnify Per il caso d'uso normale, è sufficiente impostare una stringa di base per gli URL - ad esempio, "//cdn.example.com/". L'attività cdnify cercherà automaticamente tutti gli URL locali nei tuoi file e li precederà con questa stringa. (Si eviterà automaticamente l'aggiunta di doppie barre.)

Answer 3

Per un uso più generale della semplice "CDNize" è possibile utilizzare il modulo grunt-preprocess che consente di preelaborare i file di origine (html e altro).

Con questo si può costruire i file di origine a seconda di qualsiasi variabile .. come diverso URL dall'ambiente, codice di debug aggiunge, ecc ...

Maggiori informazioni qui: https://github.com/jsoverson/grunt-preprocess

ps: vedono un un'altra mia risposta correlata qui: How to set AngularjJS base URL dynamically based on fetched environment variable?