All geek questions in one place

How can gulp build index.html link assets with absolute paths?

Raise your Yeoman web application with gulp-angular .

My gulp build process outputs a dist/index.html file that references resources 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 to force Gulp to use absolute paths instead?

eg. /scripts/ instead of scripts/ and /styles/ instead of styles/

Here is 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>
+6
source share
1 answer

Just change the file paths indicated in the comments <!-- build: ... --> ; Gulp uses them explicitly to build their goals!

 <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>
+3
source

Source: https://habr.com/ru/post/988296/

More articles:


All Articles