浏览器同步服务器 - 需要不同的路径到html和css进行重新加载

Question

问题是我的index.html不会从姐妹文件夹加载css文件.我尝试了各种Browsersync选项,但都没有.

进入我的第二天试图解决这个问题.我正在使用Flask框架中的Python,它的工作方式类似于Laravel等.我的任务管理器是Gulp,前端框架是Foundation 6.我是Flask和Gulp的新手.几年前我曾经和Laravel一起使用Grunt和Livereload,然后scss和浏览器重新加载.内存消失了.

我的文件结构应该是典型的Flask,只是这里的相关文件夹:

-root
    -app
        -static
             -css
             -js
        -templates  (html files)
    -foundation  (scss files and framework)

Browsersync似乎是设计的,所以你必须在html文件下有css.我已经在/ root和/ app文件夹中使用index.html进行了测试,但它确实有效.但是,我需要/想要/ templates中的html.

在/app/templates/index.html中:

<link rel="stylesheet" href="../static/css/app.css">

我在根和/基础中使用Browsersync和Gulp.js文件的命令行.

如果我使用"app/templates"设置它,那么Browsersync服务器将从/ templates提供html,但它无法找到css.如果我将/ static/css移动到/ templates中,则在浏览器中很好地呈现正确的index.html文件.所以Browsersync适用于旧的预应用框架布局.它只是无法处理姐妹文件夹的路径.

gulp.task('serve', ['scss'], function() {
browserSync({
    server: "app"
});

gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});

我考虑过他们的代理选项,但到目前为止还找不到解决方案.我没有在网上找到很多设置示例,没有一个是有用的.

现在我只是使用Foundation 6对应用程序的html页面进行桌面布局,并且没有设置开发服务器,只是我的MBP上的一个文件夹.

有任何想法吗？请 :-)

Answer 1

您可以提供多个基本目录,从中提供静态文件

server: {
    baseDir: ["app/templates", "static"]
}

这将app/templates/index.html默认服务器,然后在您的HTML中使用

<link rel="stylesheet" href="/css/app.css">