index.html内のCSS/JSファイルにCDNを付加する自動化された[grunt]タスクはありますか？

Question

yeoman generator-angularで作業していますが、あなたのcssファイルとscriptsファイルをindex.htmlファイルと同じサーバーに置くことを前提としています。

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

：しかし

<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を先頭に追加したいと思います：それは次のようになりますDIST/index.htmlファイルを生成し、私はこれがYSLOWのベストプラクティスと考えています。実際には現在見ているstackoverflowページで使用されています（https://cdn.sstatic.net/のノートを見るためにソースを表示してください）grunt-google-cdnプラグインでは異なるCDNを使用できません。

私の現在の考え検索を実行し、上挿入することです：

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

UPDATE：検索を実行するいくつかのうなり声のプラグインがあります/ので、これが最適なルートかもしれ交換してください。

gruntビルド中に追加されたCDN URLを取得するための追加の提案はありますか？

Answer 1

私は同じ機能を探していたと、このパッケージは、仕事をするだろうようにそれはそう： https://github.com/tactivos/grunt-cdn

Answer 2

これは、標準的なユースケースのために仕事 https://www.npmjs.org/package/grunt-cdnify を行い、ちょうどあなたのURLのベース文字列を設定します - 例： '//cdn.example.com/'。 cdnifyタスクは、ファイル内のすべてのローカルURLを自動的に検索し、この文字列の接頭辞を付けます。

Answer 3

"CDNize"より一般的な目的では、ソースファイル（htmlなど）を前処理できるgrunt-preprocessモジュールを使用することができます。あなたが任意の変数に応じて、ソースファイルを構築することができます。これにより

...環境によって異なるURLのように、デバッグコードを追加、など...ここ

詳細情報：はhttps://github.com/jsoverson/grunt-preprocess

PS：参照私の別の関連する答え：How to set AngularjJS base URL dynamically based on fetched environment variable?