Сервер Browsersync - нужны разные пути к html и css для перезагрузки

Question

Проблема в том, что мой index.html не загрузит файл css из папки-сестра. Я пробовал различные параметры Browsersync, и никто не работал.

В мой второй день, пытаясь понять это. Я работаю в флеш-фреймворке для Python, который работает что-то вроде Laravel и т. Д. Мой диспетчер задач Gulp, front end framework - это Foundation 6. Я новичок в Flask и Gulp. Несколько лет назад я использовал Grunt и Livereload с Laravel, и тогда была загружена перезагрузка scss и браузера. Память исчезает.

Моя файловая структура должна быть типичной Колба, только соответствующие папки здесь:

-root 
    -app 
     -static 
      -css 
      -js 
     -templates (html files) 
    -foundation (scss files and framework) 

Browsersync, кажется, разработан таким образом, вы должны иметь CSS под HTML-файлов. Я тестировал это с помощью index.html в папках/root и/app, и он работает. Однако мне нужно/нужно html в/templates.

В /app/templates/index.html:

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

Я использую как командную строку для Browsersync и Gulp.js файлов в корневом каталоге и в/фундаменте.

Сервер Browsersync будет обслуживать html из/templates, если я настроил его с помощью «app/templates», но тогда он не сможет найти 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); 
}); 

Я рассмотрел их опцию прокси, но до сих пор не могу найти решение с этим. Я не нашел много примеров установки онлайн, и ни один из них не был полезен.

На данный момент я просто занимаюсь компоновкой рабочего стола html-приложений приложения с помощью Foundation 6 и не настроил dev-сервер, а только папку на моем 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']);