[英]Referring to built files in html using module bundlers
我正在使用Gulp为我的静态网站构建我的SCSS,Pug和ES6资产。 我知道可以散列文件名并将文件输出到不同的目录中。
对于我的具体例子:
~/src/pages
目录中,并构建到~/public/
目录。 ~/src/stylesheets
目录中。 这些都是为了获得~/public/style
目录而构建的 我的问题是,当我从Pug引用我的样式表文件时,我必须像这样引用已经构建的文件夹:
link(rel='stylesheet', href='./style/example.css')
对于我的IDE,这没有意义,因为~/src/pages
目录中不存在style
目录。
我觉得最有用的是我可以参考我的样式表,如下例所示:
link(rel='stylesheet', href='../stylesheets/example.scss')
有什么方法可以做到这一点,还是我完全朝错误的方向走? 如果没有,我在哪里寻找?
您可以使用gulp-watch之类的东西来实时编译/style/example.css
文件,然后您的/style/example.css
文件将存在,并且当您修改example.scss
时它将自动重新编译
您可能需要移动一些目录以获取要链接的所有内容,但您也可以使用watch来构建您的Pug文件,因此您的站点将始终是最新的。
基本上,您对项目中的任何文件进行更改并实时查看更新。
使文件名像hash一样的解决方案
示例代码:
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
的manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
为了在文件中创建我们的修订更新,比如将每个明确的manifest.json的每个引用重写为每个html / json / css / js文件中的相应值(ie: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
Gulp无法自动更改htmls内使用的文件路径。 因此,您必须使用生成的文件路径来访问样式文件。
虽然如果您希望将文件路径作为scss的文件夹结构,那么在gulp将其转换为HTML后,您将不得不替换pug文件的内容。
您可以将html转换为String并使用.replace方法替换您想要更改的任何内容,最后将字符串解析为HTML文档。
希望这可以帮助!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.