flask - Browsersync 服务器 - 需要不同的 html 和 css 路径才能重新加载

Question

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

进入我的第二天试图弄清楚这一点。我正在使用 Python 的 Flask 框架，它可以像 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">

我在根目录和/foundation 中使用 Browsersync 和 Gulp.js 文件的命令行。

如果我使用“app/templates”进行设置，Browsersync 服务器将从/templates 提供 html，但是它找不到 css。如果我将/static/css 移动到/templates 中，则正确的 index.html 文件会在浏览器中很好地呈现。所以 Browsersync 使用旧的 pre-app 框架布局。它只是无法处理姐妹文件夹的路径。

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">