CODEWITHSUNDEEP
javascripthtmlnode.jsgulp
Nick Charney Kaye
Nick Charney Kaye

Reputation: 4340

How to gulp build index.html reference assets with absolute paths?

Scaffolded a Yeoman web application with gulp-angular.

My gulp build process outputs a dist/index.html file that references assets using relative paths:

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

How do I force Gulp to use absolute paths instead?

E.g. /scripts/ instead of scripts/ and /styles/ instead of styles/

Here's an excerpt of my current 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>

Upvotes: 6

Views: 2823

Answers (1)

Nick Charney Kaye
Nick Charney Kaye

Reputation: 4340

Simply change the file paths specified in the <!-- build: ... --> comments; Gulp uses them explicitly to built its targets!

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

Upvotes: 3

Related Questions