Синхронизация браузера Gulp не перезагружается при обновлении файла

Question

Когда я вношу изменения в html, css и js-файл и сохраняю его, синхронизация браузера не перезагружает страницу. Я также включил синхронизацию браузера в часах. Я установил плагины, которые я импортировал. Я не могу определить основную причину.

'use strict'; 

/*** Import Plugins ***/ 
var fileinclude = require('gulp-file-include'), 
    gulp = require('gulp'), 
    watch = require('gulp-watch'), 
    sass = require('gulp-sass'), 
    cleanCSS = require('gulp-clean-css'), 
    concat = require('gulp-concat'), 
    concatCss = require('gulp-concat-css'), 
    uglify = require('gulp-uglify'), 
    pump = require('pump'), 
    runSequence = require('run-sequence'), 
    htmlmin = require('gulp-htmlmin'), 
    imageOptim = require('gulp-imageoptim'), 
    inject = require('gulp-inject'), 
    browserSync = require('browser-sync').create(); 

const del = require('del'); 


/*** Define task ***/ 

/** Stylesheet **/ 
gulp.task('sass', function() { 
    return gulp.src('./src/scss/*.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(gulp.dest('./build/css/compiled')); 
}); 

gulp.task('concat-css', function() { 
    return gulp.src('./build/css/compiled/*.css') 
     .pipe(concatCss("bundle.css")) 
     .pipe(gulp.dest('./build/css/')); 
}); 

gulp.task('minify-css', ['sass'], function() { 
    del.sync(['./build/css/compiled/**']); 
    return gulp.src('./build/css/bundle.css') 
     .pipe(cleanCSS({ 
      compatibility: 'ie8' 
     })) 
     .pipe(gulp.dest('./build/css')); 
}); 


/** Javascript **/ 
gulp.task('concat-scripts', function() { 
    return gulp.src('./src/js/*.js') 
     .pipe(concat('bundle.js')) 
     .pipe(gulp.dest('./build/js')); 
}); 

gulp.task('minify-scripts', function() { 
    pump([ 
     gulp.src('build/js/bundle.js'), 
     uglify(), 
     gulp.dest('build/js/') 
    ]); 
}); 


/** HTML **/ 
gulp.task('include-html-templates', function() { 
    return gulp.src(['src/*.html']) 
     .pipe(fileinclude({ 
      prefix: '@@', 
      basepath: '@file' 
     })) 
     .pipe(gulp.dest('./build/')); 
}); 

gulp.task('inject-css-js-in-html', function() { 
    return gulp.src('./build/*.html') 
     .pipe(inject(gulp.src(['./build/js/bundle.js', './build/css/bundle.css'], { 
      read: false 
     }), { 
      relative: true 
     })) 
     .pipe(gulp.dest('./build')); 
}); 

gulp.task('minify-html', function() { 
    return gulp.src('build/*.html') 
     .pipe(htmlmin({ 
      collapseWhitespace: true 
     })) 
     .pipe(gulp.dest('./build/')); 
}); 

/* Images */ 
gulp.task('optimize-images',() => 
    gulp.src('src/images/*') 
    .pipe(imageOptim.optimize()) 
    .pipe(gulp.dest('./build/images/')) 
); 

/* Reloading page on update */ 
gulp.task('browser-sync', function() { 
    browserSync.init({ 
     server: { 
      baseDir: "./" 
     }, 
     startPath: "build/1.html" 
    }); 
}); 


/*** Watch task ***/ 
gulp.task('watch', function() { 
    gulp.watch('src/scss/*.scss', ['sass']); 
    gulp.watch('build/css/compiled/*.css', function() { 
     runSequence('concat-css', 'minify-css'); 
    }); 
    gulp.watch('src/js/*.js', function() { 
     runSequence('concat-scripts', 'minify-scripts'); 
    }); 
    gulp.watch('src/**/*.html', function() { 
     runSequence('include-html-templates', 'minify-html', 'inject-css-js-in-html'); 
    }); 
    gulp.watch('src/images/*', ['optimize-images']); 
}); 



/* Default task sequence */ 
gulp.task('default', function() { 
    gulp.watch(runSequence('browser-sync', 'sass', 'concat-css', 'minify-css', 'concat-scripts', 'minify-scripts', 'include-html-templates', 'minify-html', 'inject-css-js-in-html', 'optimize-images', 'watch')); 
}); 

Answer 1

Вы можете вызвать поток метод, как это (пример, основанный на вашей optimize-images задаче)

gulp.task('optimize-images',() => 
    gulp.src('src/images/*') 
    .pipe(imageOptim.optimize()) 
    .pipe(gulp.dest('./build/images/')) 
    .pipe(browserSync.stream({once: true}); 
); 

аргумент once для перезагрузки ресурсов один раз в конце.

с этим способом, browserSync перезагружает все файлы изображений, если вы хотите, чтобы перезагрузить только измененные файлы, вы можете использовать плагин для фильтра файлов на поток, как gulp-changed