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

Question

The problem is that my index.html won't load a css file from a sister folder. I've tried a variety of Browsersync options and none worked.
Into my second day trying to figure this out. I'm working in the Flask framework for Python which works something like Laravel, etc. My task manager is Gulp, front end framework is Foundation 6. I'm new to Flask and Gulp. I used to use Grunt and Livereload with Laravel some years ago and had scss and browser reload working then. Memory fades though.
My file structure is supposed to be typical Flask, just the relevant folders here:
-root
-app
-static
-css
-js
-templates (html files)
-foundation (scss files and framework)
Browsersync seems to be designed so you have to have css under the html files. I've tested this with an index.html in the /root and /app folders and it works. However, I need / want the html in /templates.
In /app/templates/index.html:
<link rel="stylesheet" href="../static/css/app.css">
I'm using both command line for Browsersync and Gulp.js files in the root and in /foundation.
The Browsersync server will serve html from /templates if I set it up with "app/templates" but then it can't find the css. If I move /static/css into /templates the proper index.html file is rendered nicely in the browser. So Browsersync works with the old pre-app framework layout. It just can't deal with paths to sister folders.
gulp.task('serve', ['scss'], function() {
browserSync({
server: "app"
});
gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});
I've considered their proxy option but so far can't find a solution with that. I haven't found many setup examples online and none were useful.
For now I'm just doing desktop layout of the app's html pages with Foundation 6 and haven't set up a dev server, just a folder on my MBP.
Any ideas? Please :-)

Answer 1

You can provide multiple base directories from which to serve static files
server: {
baseDir: ["app/templates", "static"]
}
this will server app/templates/index.html by default and then in your html just use
<link rel="stylesheet" href="/css/app.css">

Answer 2

This is my final working gulpfile.js in the site root and setup to work with Flask or most other application frameworks plus Foundation 6. Hope this example saves someone a day or more of figuring this out. I'll add js files later.
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']);