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

Question

问题是我的 index.html 无法从姐妹文件夹加载 css 文件。我尝试了各种 Browsersync 选项并且 none 有效。

进入我试图解决这个问题的第二天。我在 Python 的 Flask 框架中工作，它的工作方式类似于 Laravel，等等。我的任务管理器是 Gulp，前端框架是 Foundation 6。我是 Flask 的新手，并且Gulp。几年前，我曾经将 Grunt 和 Livereload 与 Laravel 一起使用，然后让 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 与旧的应用程序前框架布局一起工作。它只是无法处理姐妹文件夹的路径。

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

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

我考虑过他们的代理选项，但到目前为止找不到解决方案。我没有在网上找到很多设置示例，none 很有用。

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

有什么想法吗？请 :-)

Answer 1

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

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

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

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

Answer 2

这是我在站点根目录中的最后工作gulpfile.js，并设置为与 Flask 或大多数其他应用程序框架以及 Foundation 6 一起工作。希望这个示例可以节省一天或更多的时间来解决这个问题。稍后我会添加js文件。

var gulp        = require('gulp');
var $    = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

var src = {
    scss: 'foundation/scss/*.scss',
    css:  'app/static/css/app.css',
    allscss:  'foundation/scss/**/*.scss',
    cssdest: 'app/static/css',
    html: 'app/templates/*.html'
};

var sassPaths = [
  'foundation/bower_components/foundation-sites/scss'
  //'foundation/bower_components/motion-ui/src'
];

gulp.task('serve', ['sass'], function() {
    browserSync({
        open: false,
        server: {
          baseDir: ["app/templates", "app/static"]
        }
    });
    gulp.watch([src.scss, src.allscss], ['sass'])
    gulp.watch(src.html).on('change', reload);
    gulp.watch(src.css).on('change', reload);
});

gulp.task('sass', function() {
   return gulp.src(src.scss)
     .pipe($.sass({
       includePaths: sassPaths
     })
       .on('error', $.sass.logError))
    .pipe($.autoprefixer({
       browsers: ['last 2 versions', 'ie >= 9']
    }))
     .pipe(gulp.dest(src.cssdest))
});


gulp.task('default', ['serve']);

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

Browsersync server - Need different paths to html and css for reload

flask

gulp

zurb-foundation

browser-sync

zurb-foundation-6