如何使用绝对路径构建 index.html 参考资产？答案

【问题标题】：How to gulp build index.html reference assets with absolute paths?如何使用绝对路径构建 index.html 参考资产？
【发布时间】：2015-08-14 13:09:10
【问题描述】：

使用 gulp-angular 搭建 Yeoman Web 应用程序。

我的gulp build 进程输出一个dist/index.html 文件，该文件使用相对路径引用资产：

<html>
  <head>
    ...
    <link rel="stylesheet" href="styles/vendor-f57bbe49.css">
    <link rel="stylesheet" href="styles/app-a0b8907b.css">
  </head>
  <body>
    ...
    <script src="scripts/vendor-a30f25be.js"></script>
    <script src="scripts/app-b7f411d9.js"></script>
  </body>
</html>

如何强制 Gulp 使用绝对路径？

例如/scripts/ 代替 scripts/ 和 /styles/ 代替 styles/

这是我当前src/index.html的摘录：

<html>
  <head>
    ...
    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <link rel="stylesheet" href="app/vendor.css">
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automatically insert here -->
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body>
    ...
    <!-- build:js(src) scripts/vendor.js -->
    <!-- bower:js -->
    <!-- run `gulp inject` to automatically populate bower script dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automatically insert here -->
    <!-- endinject -->
  </body>
</html>

【问题讨论】：

标签： javascript html node.js gulp

【解决方案1】：

只需更改 cmets 中指定的文件路径； Gulp 明确地使用它们来构建它的目标！

<html>
  <head>
    ...
    <!-- build:css({.tmp/serve,src}) /styles/vendor.css -->
    <link rel="stylesheet" href="app/vendor.css">
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) /styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automatically insert here -->
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body>
    ...
    <!-- build:js(src) /scripts/vendor.js -->
    <!-- bower:js -->
    <!-- run `gulp inject` to automatically populate bower script dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) /scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automatically insert here -->
    <!-- endinject -->
  </body>
</html>

【讨论】：