0
html、css、jsファイルに変更を加えて保存すると、browser-syncはページを再読み込みしません。また、ブラウザ同期を時計に組み込んでいます。私は、私がインポートしたプラグインをインストールしました。私は根本的な原因を特定することができません。ファイルの更新時にGulpブラウザの同期が再ロードされない
'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'));
});
のようにストリームにフィルタ用のファイルをプラグインを使用することができ、すべての画像ファイルを再ロード[ 'browserSync.stream() '](https://www.browsersync.io/docs/gulp#gulp-sass-css)または[' browserSync.reload() '](https://www.browsersync.io/docs/gulp#gulp-リロード) –