使用 python 烧瓶时浏览器同步不刷新浏览器答案

【问题标题】：browser-sync doesn't refresh the browser when working with python flask使用 python 烧瓶时浏览器同步不刷新浏览器
【发布时间】：2016-04-27 09:26:08
【问题描述】：

我正在使用 gulp 和浏览器同步构建一个烧瓶项目，以帮助我处理前端的事情。但是当我在我的 Flask 项目中修改一些文件时，浏览器不会自动重新加载，我必须点击 F5 手动刷新浏览器才能看到更改。虽然在进行一些更改时我可以从浏览器同步中看到以下输出：

[BS] Reloading Browsers...

这是我的gulpfile.js，我通过在终端中运行gulp 启动了browser-sync 和其他gulp 任务

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var reload = browserSync.reload;
var exec = require('child_process').exec;

var paths = {
    scss: ['scss/*.scss'],
    css:  ['static/css/*.css', '!static/css/*.min.css']
};

gulp.task('scss', function () {
    return gulp.src(paths.scss)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
        .pipe(gulp.dest('static/css'));
});
gulp.task('minify-css', ['scss'], function() {
  return gulp.src(paths.css)
    .pipe(rename({suffix: '.min'}))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('static/css'))
    .pipe(reload({stream: true}));
});

//Run Flask server
gulp.task('runserver', function() {
    var proc = exec('python app.py');
});

gulp.task('browser-sync', ['runserver'], function () {
  browserSync({
    notify: false,
    proxy: "127.0.0.1:5000"
  });
});

gulp.task('watch', function () {
    gulp.watch(paths.scss, ['minify-css']);
    gulp.watch(["templates/**/*.html", "static/**/*.js"]).on('change', reload);
});

gulp.task('default', ['watch', 'browser-sync']);

编辑

目录结构是这样的：

.
├── __init__.py
├── app.py
├── config.py
├── database.py
├── gulpfile.js
├── res
├── routes
│   ├── definitions.py
│   ├── index.py
│   ├── __init__.py
│   ├── users.py
│   └── utilities.py
├── scss
│   ├── main.scss
│   └── pushmenu.scss
├── static
│   ├── css
│   │   ├── main.css
│   │   ├── main.min.css
│   │   ├── pushmenu.css
│   │   └── pushmenu.min.css
│   ├── images
│   └── js
│       └── search.js
└── templates
    ├── index.html
    └── layout.html

【问题讨论】：

@rick 我困惑了好几天，还没找到解决办法。
你试过我的更新了吗？
在我上次更新之外，我不知道如何帮助您。顺便说一句，你试过了吗？
@rick 谢谢你的帮助。在我进行了一些更改后，浏览器同步终于起作用了。我想这与gulp.watch 部分有关。但是让我感到困惑的是，即使我在其中添加了所有可能的文件，浏览器同步一开始也不起作用。也许是因为我昨晚困了，在这个过程中出了点问题。但无论如何它现在工作。我真的很感谢你的帮助。 :)
很高兴你成功了！如果您有时间，请在您的帖子中创建一个小更新部分，使用更新后的 gulpfile.js 来获取功能内存

标签： javascript python flask gulp browser-sync

【解决方案1】：

实际上，您只关注静态和模板目录中 html 和 js 文件的更改。

您可以通过将这些目录添加到您的手表来观看您想要的所有目录

gulp.watch(["templates/**/*.html","static/**/*.js","myflaskdir/**/*.*"]).on('change', reload);

“myflaskdir”是你的烧瓶目录。

发送您项目目录结构的打印屏幕，以便我可以详细帮助您。

希望对你有帮助

更新 Retry 不是基本目录，因此它必须与手表有关。您是否尝试过 browserSync.reload() 而不是重新加载？

gulp.task('watch', function () {
    gulp.watch(paths.scss, ['minify-css']);
    gulp.watch(["templates/**/*.html", "static/**/*.js"]).on('change', browserSync.reload);
});

【讨论】：

谢谢，您可以在我更新的问题中看到目录结构。它仍然不起作用。不管我正在编辑的文件是html、scss还是js，browser-sync都不会重新加载浏览器，但我猜它已经检测到了变化，因为每次修改文件时，@987654327 @总是输出一行[BS] Reloading Browsers...，好像是在尝试重新加载浏览器。
好的，这可能与基本目录有关，请稍等，我会修改答案
感谢您的更新，抱歉我之前没有注意到。但这仍然不起作用，我收到一个错误：Invalid config. You cannot specify both server & proxy options.
好的，你需要那个代理吗？或者您只需将 browsersync 放在另一个端口上？
templates 目录下的html 文件不是纯html，它们是jinja2 模板，因此如果没有代理，它们将无法正确呈现。所以我需要那个代理才能让它工作。

【解决方案2】：

正如@rick 指出的，我需要在gulp.watch 部分中添加所有文件，以便browser-sync 可以检测到它。这是适合我的gulpfile.js。我把它贴在这里希望它可以帮助某人。

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var reload = browserSync.reload;
var exec = require('child_process').exec;

var paths = {
    scss: ['scss/*.scss'],
    css:  ['static/css/*.css', '!static/css/*.min.css']
};

gulp.task('scss', function () {
    return gulp.src(paths.scss)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
        .pipe(gulp.dest('static/css'));
});
gulp.task('minify-css', ['scss'], function() {
  return gulp.src(paths.css)
    .pipe(rename({suffix: '.min'}))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('static/css'))
    .pipe(reload({stream: true}));
});

//Run Flask server
gulp.task('runserver', function() {
    var proc = exec('python app.py');
});

gulp.task('browser-sync', ['runserver'], function () {
  browserSync({
    notify: false,
    proxy: "127.0.0.1:5000",
  });
});

gulp.task('watch', function () {
    gulp.watch(paths.scss, ['minify-css']);
    gulp.watch(["templates/**/*.html", "static/**/*.js", "scss/**/*.scss"]).on('change', reload);
});

gulp.task('default', ['watch', 'browser-sync']);

【讨论】：