Question

我正在建立一个带有gulp和browser-sync的烧瓶项目来帮助我处理前端的东西。但是当我修改Flask项目中的某些文件时，浏览器不会自动重新加载，我必须按F5手动刷新浏览器以查看更改。虽然在进行一些更改时我可以从浏览器同步中看到以下输出：

[BS] Reloading Browsers...

这是我的gulpfile.js，我通过在终端中运行browser-sync来启动gulp和其他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文件的更改。

您可以通过addinthose direcotries观看所需的所有目录

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

其中“myflaskdir”是您的烧瓶目录。

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

希望这有帮助

<强>更新重试不是基础目录所以它必须是手表的东西。你尝试过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不刷新浏览器

修改

2 个答案: