4

问题是我的 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 上的一个文件夹。

有任何想法吗？请 ：-）

4

2 回答 2

7

您可以提供多个用于提供静态文件的基本目录

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

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

<link rel="stylesheet" href="/css/app.css">
于 2016-01-07T09:32:24.320 回答
1

这是我在站点根目录中的最后一个工作 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']);
于 2016-01-08T00:18:47.683 回答