Browsersync服務器 - 需要不同的路徑來重新加載HTML和CSS

問題是，我的index.html不會從一個姐妹文件夾加載一個CSS文件。我試過了各種Browsersync選項，但都沒有工作。Browsersync服務器 - 需要不同的路徑來重新加載HTML和CSS

進入我的第二天試圖弄清楚這一點。我正在Flask Flask框架中工作，就像Laravel等。我的任務管理器是Gulp，前端框架是Foundation 6.我是Flask和Gulp的新手。幾年前，我曾經在Laravel中使用過Grunt和Livereload，然後重新加載了scss和瀏覽器。內存消失。

我的文件結構被認爲是典型的瓶，這裏只是相關的文件夾：

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

Browsersync似乎是這樣設計的，你必須有下的HTML文件的CSS。我已經用/ root和/ app文件夾中的index.html測試過了，它可以工作。不過，我需要/想在/模板中的HTML。

在/app/templates/index.html：

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

我使用根和/基礎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文件夾。

任何想法？請:-)

來源

2016-01-06 Preston

可以提供從爲靜態文件

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

這將服務器app/templates/index.html默認，然後在你的HTML只使用

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

來源

2016-01-07 09:32:24 shane

很好，它的工作原理！很好，它接受一個數組。我不得不在靜態路徑前添加應用程序，但小問題。謝謝！ – Preston

經過無數次的搜索，這最終解決了我的問題。但是，除了在前面添加應用程序外，我還必須將href更改爲style.css –

這是多個基目錄我最終在網站根目錄下運行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-08 00:18:47 Preston

Browsersync服務器 - 需要不同的路徑來重新加載HTML和CSS

回答

相關問題