如何用绝对路径吞噬构建index.html参考资产？

Question

如何用绝对路径吞噬构建index.html参考资产？

Cha*_*aye 6 html javascript node.js gulp

支持Yeoman网络应用程序与gulp-angular.

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

Run Code Online (Sandbox Code Playgroud)

如何强制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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Cha*_*aye 3

只需更改注释中指定的文件路径即可；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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	2395 次
最近记录：	10 年，8 月前