如何用绝对path来build立index.html引用资源?
用吞吐angular度搭build了一个Yeoman Web应用程序。
我的gulp build
过程输出一个dist/index.html
文件,使用相对path引用资产:
<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>
我如何强制Gulp使用绝对path呢?
例如/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>
只需更改<!-- build: ... -->
注释中指定的文件path; Gulp明确地使用它们来build立它的目标!
<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>