Обновление кеша браузера при разработке с gulp

Question

В моем проекте используется комбинация Flask Python на бэкэнде, которая обслуживает довольно простую веб-страницу React с использованием gulp.

Независимо от того, отлаживаю ли я код интерфейса через 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);
});