Question

我的项目的设置在后端使用python Flask的组合，使用gulp提供一个相当简单的javascript React网页。

无论我是通过Chrome还是Firefox调试前端代码，都必须多次进行一次硬刷新，然后才能将更改更改为浏览器。每次保存后，我都会看到gulp控制台日志Finished 'transform' after N ms，这使我相信这是浏览器的错误。

我不是前端工程师，所以我想知道更有经验的开发人员会使用什么。每次保存后击中Cmd+Shift+R 5-20次，实在让人觉得效率低下。

当前gulpfile.js：

'use strict';

var gulp = require('gulp'),
    browserify = require('browserify'),
    size = require('gulp-size'),
    del = require('del'),
    babelify = require('babelify'),
    source = require('vinyl-source-stream'),
    gutil = require('gulp-util');


var compiled_dir = './static/scripts/jsc';
var js_dir = './static/scripts/js';

function handle_error(err) {
    gutil.log(err.message);
    gutil.beep();
    return process.exit(2);
}

gulp.task('transform', function () {
    browserify({ entries: js_dir + '/main.js', debug: true })
        .transform(babelify)
        .bundle()
        .on('error', handle_error)
        .pipe(source('main.js'))
        .pipe(gulp.dest(compiled_dir));
    browserify({ entries: js_dir + '/userMgmt.js', debug: true })
        .transform(babelify)
        .bundle()
        .on('error', handle_error)
        .pipe(source('userMgmt.js'))
        .pipe(gulp.dest(compiled_dir));
});

gulp.task('clean', function (cb) {
    del([compiled_dir], cb);
});

gulp.task('default', ['clean'], function () {
    gulp.start('transform');
    gulp.watch(js_dir + "/*", ['transform']);
});

Answer 1

方法1：使用此gulp-cache程序包在开发模式下禁用缓存。这将起作用：

var gulp = require('gulp');
var usemin = require('gulp-usemin');
var cache = require('gulp-cache');

gulp.task('default', function () {
    return gulp.src('src/index.html')

    .pipe(gulp.task('clear', function (done) {
        return cache.clearAll(done);
    });)
    .pipe(usemin({
        js: []
    }))
    .pipe(gulp.dest('dist'));
});

如果您不知道如何使用它，请使用gulp配置文件更新您的问题，我将为您配置。

方法2：：配置您的观察者。

$ npm install browser-sync --save-dev

var browserSync = require('browser-sync').create();

gulp.watch(['./**/*.{scss,css,html,py,js}'], ['clearCache', browserSync.reload]);

gulp.task('clearCache', function (done) {
   return cache.clearAll(done);
});

使用Gulp开发时刷新浏览器的缓存

1 个答案: