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

我在root用户和/ 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);
});

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

现在我只是使用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']);

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

2 个答案: