R
R
runprogr2019-08-25 19:08:22
gulp.js
runprogr, 2019-08-25 19:08:22

Why is Browsersync resetting css?

My hapfile code

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

gulp.task('watch', function(){
      browserSync.init({
        proxy: 'gulp.src',
        browser: 'chrome',
        notify: false
      });

  // Следить за SCSS файлами и компилить в css
  gulp.watch(source_src + 'scss/**/*.scss', gulp.series('sass_compile'));

  // При изменении файлов запустить релоад страницы браузера
  gulp.watch('./' + path.src + '/' + "**/*.html").on('change', browserSync.reload);
  gulp.watch('./' + path.src + '/' + "**/*.php").on('change', browserSync.reload);
  gulp.watch(assets_src + "css/**/*.css").on('change', browserSync.reload);
  gulp.watch(assets_src + 'js/**/*.js').on('change', browserSync.reload);
});

// Таск для scss==>css
gulp.task('sass_compile', function () {
    return gulp.src(source_src + 'scss/**/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(assets_src + 'css'))
    .pipe(browserSync.stream());
});

When the scss file changes, galp compiles the css and updates the styles in the browser. When changing the php file, galp updates the page, but the styles are reset to their original state. If you press ctrl + F5, then the styles are updated to the current state again, but if you change something again in the styles, and then in the php file, then browsersync will reset the styles to the state that it was after pressing ctrl + F5.
I tried to remove the line .pipe(browserSync.stream()); from the task and leave only gulp.watch(assets_src + "css/**/*.css").on('change', browserSync.reload); and vice versa, but still the situation is not resolved. For some reason, when updating the page, styles are loaded from the cache, and not from the css file

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
runprogr, 2019-08-25
@runprogr

Found a solution from @serii81

1. Run the developer tool
2. In the right part of the window, click on the three vertical dots.
3. Select Settings or press f1
4. Check the box Network > Disable cache (while DevTools is open)
That's it, now the cache in the browser will not be saved, but on condition that the console is open.

Indeed, this is how the styles are updated, but you have to constantly keep the developer console open, which is not always convenient. Does anyone have a more elegant solution?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question