使用 python flask 时，浏览器同步不会刷新浏览器

Question

我正在构建一个带有 gulp 和浏览器同步的 flask 项目，以帮助我处理前端问题。但是当我修改我的 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

Answer 1

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

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

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

其中 "myflaskdir" 是您的烧瓶目录。

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

希望对您有所帮助

更新重试不是基本目录，所以它一定是 watches.Have 你试过 browserSync.reload() 而不是重新加载？

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

Answer 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']);

使用 python flask 时，浏览器同步不会刷新浏览器

browser-sync doesn't refresh the browser when working with python flask

javascript

python

flask

gulp

browser-sync

编辑