N
N
Nina2020-04-08 12:37:15
css
Nina, 2020-04-08 12:37:15

Why does browser-sync reload the page every second?

browser-sync reloads the page every second even though I don't change anything. I can't see what I got, because the page is constantly updated and updated, one might say - twitches. Browser-sync constantly updates styles:
5e8d994f993e1027334671.png
Moreover, when the page is loaded for the first time, everything is displayed normally and does not twitch. But with any change in styles or scripts, the page starts to twitch incessantly, until browser-sync is reloaded.
gulpfile:

//  Подключенные модули  gulp 
const gulp = require("gulp");
const less = require("gulp-less");
const plumber = require("gulp-plumber");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");
const uglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");
const svgstore = require("gulp-svgstore");
const svgSprite = require("gulp-svg-sprite");
const	svgmin = require("gulp-svgmin");
const	cheerio = require("gulp-cheerio");
const	replace = require("gulp-replace");
const cache = require("gulp-cache");
const sourcemaps = require("gulp-sourcemaps");
const del = require("del");
const browserSync = require("browser-sync").create();

// Файлы для подключения в строгом порядке:
let jsFiles = [
  // "./source/js/lib.js",
  // "./node_modules/slick-carousel/slick/slick.js",
  // "./node_modules/magnific-popup/dist/jquery.magnific-popup.js",
  "./source/js/main.js",
];

// TASKS
// Task на стили CSS 
function styles() {
  return gulp.src([
    // Пишем все файлы, которые хотим объединить, в том порядке, в каком они будут располагаться в объединенном файле
    "./node_modules/normalize.css/normalize.css",
    "./node_modules/slick-carousel/slick/slick.css",
    "./node_modules/magnific-popup/dist/magnific-popup.css",
    "./source/less/variables.less", 
    "./source/less/mixins.less", 
    "./source/less/scaffolding.less",
    "./source/less/header.less",
    "./source/less/nav.less",
    "./source/less/close.less",
    "./source/less/title.less",
    "./source/less/text.less",
    "./source/less/fithures.less",
    "./source/less/hotel.less",
    "./source/less/btn.less",
    "./source/less/map.less",
    "./source/less/footer.less",
    "./source/less/section-header.less",
    "./source/less/form.less",
    "./source/less/photo.less",
    "./source/less/video.less",

    
    
    
    
  ])
  .pipe(sourcemaps.init())    // инициализируем создание Source Maps
  .pipe(plumber())
  .pipe(concat("style.less"))
  .pipe(gulp.dest("./source/less")) 
  .pipe(less())
  // .pipe(concat("style.css"))  // Объединение файлов в один
  .pipe(autoprefixer({
    overrideBrowserslist:  ["last 2 versions"],
    cascade: false
  }))
  .pipe(gulp.dest("./build/css")) 
  .pipe(cleanCSS({           // Минификация css 
    level: 2
  }))  
  .pipe(rename("style.min.css"))
  .pipe(sourcemaps.write(".")) // пути для записи SourceMaps - в данном случае карта SourceMaps будет добавлена прям в данный файл main.min.css в самом конце
  .pipe(gulp.dest("build/css"))
  .pipe(browserSync.stream());
}


// Task на скрипты JS 
function scripts() {
  return gulp.src(jsFiles)
  .pipe(sourcemaps.init()) // инициализируем создание Source Maps
  .pipe(concat("script.js"))  // Объединение файлов в один
  .pipe(gulp.dest("./source/js")) 
  .pipe(uglify({
    toplevel: true
  }))
  .pipe(sourcemaps.write(".")) // пути для записи SourceMaps - в данном случае карта SourceMaps будет добавлена прям в данный файл scripts.min.js в самом конце в формате комментария
  .pipe(gulp.dest("./build/js"))
  .pipe(browserSync.stream());
} 

function clean() {
  return del(["build/*"]);
}

gulp.task('clear', function(){
  // будем вручную запускать при необходимости очистки кэша
  return cache.clearAll();
});

// Task на функцию images

gulp.task("images", function () { 
  return gulp.src("source/img/**/*.{png,jpg,svg}") 
  .pipe(cache(imagemin([ 
    imagemin.optipng({optimizationLevel: 3}), 
    imagemin.mozjpeg({progressive: true}), 
    imagemin.svgo() 
  ])))
  .pipe(gulp.dest("build/img"))
  .pipe(browserSync.stream());
});

// Task на функцию webp
function webpic() {
  return gulp.src("build/img/**/*.{png, jpg, jpeg}")
  .pipe(webp({quality: 90}))
  .pipe(gulp.dest("build/img"));
}


// Task на функцию watch
function watch() {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
  gulp.watch("./source/**/*.html", gulp.series("html")); 
  gulp.watch("./source/less/**/*.less", gulp.series("styles"));   // Отслеживаем файлы css 
  gulp.watch("./source/js/**/*.js", gulp.series("scripts")); 
  gulp.watch("./source/img/**/*.{png, jpg, jpeg, svg}", gulp.series("images"));
  gulp.watch("./source/video/**/*.{mp4, webm}", gulp.series("video"));  
  gulp.watch("./source/img/**/*.{png, jpg, jpeg}", gulp.series("webp"));   // Отслеживаем файлы js 
  gulp.watch("./*.html").on("change", browserSync.reload);  //  // Отслеживаем файлы html
}



// TASKS ДЛЯ ВЫЗОВА ФУНКЦИЙ
// Task вызывающий функцию styles
gulp.task("styles", styles);

// Task вызывающий функцию scripts
gulp.task("scripts", scripts);

// Task вызывающий функцию очистки папки build 
gulp.task("del", clean);

// Task вызывающий функцию webp
gulp.task("webp", webpic);


// Task для создания svg-спрайта Academy-модернизированный

gulp.task("sprite", function () { 
  return gulp.src("source/img/*.svg") 
  // minify svg
  .pipe(svgmin({
    js2svg: {
      pretty: true
    }
  }))
  // remove all fill and style declarations in out shapes
  .pipe(cheerio({
    run: function ($) {
      $('[fill]').removeAttr('fill');
      $('[stroke]').removeAttr('stroke');
      $('[style]').removeAttr('style');
    },
    parserOptions: { xmlMode: true }
  }))
  // cheerio plugin create unnecessary string ">', so replace it.
  .pipe(replace(">", ">"))

  .pipe(svgstore({ 
    inlineSvg: true 
  }))
  .pipe(rename("sprite.svg"))
  .pipe(gulp.dest("build/img"));
});

// Copying fonts

gulp.task("fonts", function() {
  return gulp.src("source/css/fonts/**/*")
    .pipe(gulp.dest("build/css/fonts"));
});

gulp.task("html", function() {
  return gulp.src("source/**/*.html")
    .pipe(gulp.dest("build/"))
    .pipe(browserSync.stream());
});

gulp.task("video", function() {
  return gulp.src("source/video/**/*")
    .pipe(gulp.dest("build/video/"));
});

// Task вызывающий функцию watch
gulp.task("watch", watch);



gulp.task("build", gulp.series("del", "images", "webp", "sprite", "html", "video", gulp.parallel("styles", "fonts", "scripts" )), function(done){
  done();
});

gulp.task("default", gulp.series("build", "watch"));

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question