javascript - How to gulp build index.html reference assets with absolute paths? -
scaffolded yeoman web application gulp-angular.
my gulp build
process outputs dist/index.html
file 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 force gulp use absolute paths instead?
e.g. /scripts/
instead of scripts/
, /styles/
instead of styles/
here's excerpt of 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` automatically populate bower styles dependencies --> <!-- endbower --> <!-- endbuild --> <!-- build:css({.tmp/serve,src}) styles/app.css --> <!-- inject:css --> <!-- css files automatically insert here --> <!-- endinject --> <!-- endbuild --> </head> <body> ... <!-- build:js(src) scripts/vendor.js --> <!-- bower:js --> <!-- run `gulp inject` automatically populate bower script dependencies --> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js --> <!-- inject:js --> <!-- js files automatically insert here --> <!-- endinject --> </body> </html>
simply change file paths specified in <!-- build: ... -->
comments; gulp uses them explicitly built targets!
<html> <head> ... <!-- build:css({.tmp/serve,src}) /styles/vendor.css --> <link rel="stylesheet" href="app/vendor.css"> <!-- bower:css --> <!-- run `gulp inject` automatically populate bower styles dependencies --> <!-- endbower --> <!-- endbuild --> <!-- build:css({.tmp/serve,src}) /styles/app.css --> <!-- inject:css --> <!-- css files automatically insert here --> <!-- endinject --> <!-- endbuild --> </head> <body> ... <!-- build:js(src) /scripts/vendor.js --> <!-- bower:js --> <!-- run `gulp inject` automatically populate bower script dependencies --> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp/serve,.tmp/partials,src}) /scripts/app.js --> <!-- inject:js --> <!-- js files automatically insert here --> <!-- endinject --> </body> </html>
Comments
Post a Comment