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

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

方法一：使用这个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);
});