Menu
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>
368
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With