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

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

В мой второй день, пытаясь понять это. Я работаю в среде Flask для Python, которая работает примерно так же, как 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, кажется, разработан таким образом, что вы должны иметь CSS в файлах html. Я проверил это с помощью index.html в папках /root и /app, и это работает. Однако мне нужен / нужен html в /templates.

В /app/templates/index.html:

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

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

Сервер 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 и не настраиваю сервер разработки, а только папку на своем MBP.

Любые идеи? Пожалуйста :-)


flask gulp browser-sync zurb-foundation zurb-foundation-6
person Preston    schedule 06.01.2016    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы можете указать несколько базовых каталогов, из которых можно обслуживать статические файлы.

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

это будет сервер app/templates/index.html по умолчанию, а затем в вашем html просто используйте

<link rel="stylesheet" href="/css/app.css">
person shane    schedule 07.01.2016
comment
Отлично, это работает! Хорошо, что он принимает массив. Мне пришлось добавить app/ перед статическим путем, но небольшая проблема. Спасибо! - person Preston; 07.01.2016
comment
После бесчисленных поисков это решило и мою проблему. Однако в дополнение к добавлению app/ впереди мне также пришлось изменить href на просто style.css. - person 55 Cancri; 01.02.2018

arrow_upward
1
arrow_downward

Это мой последний рабочий 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']);
person Preston    schedule 08.01.2016