Question

使用yeoman generator-angular，它假定您要将css和scripts文件放在与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/

更新：有几个grunt插件执行搜索/替换，所以这可能是最好的路线。

在grunt构建期间获取CDN网址的任何其他建议？

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

更多的一般用途不仅仅是＆＃34; CDNize＆＃34;您可以使用grunt-preprocess模块，它允许您预处理源文件（html和其他）。

有了这个，您可以根据任何变量构建源文件..比如环境，DEBUG代码添加等不同的URL ......

此处提供了更多信息： https://github.com/jsoverson/grunt-preprocess

ps：请参阅我的另一个相关答案：How to set AngularjJS base URL dynamically based on fetched environment variable?

是否有任何自动[grunt]任务将CDN添加到index.html中的CSS / JS文件中？

3 个答案: