Gulp 4 browserSync 重載

Question

我在使用 browserSync 時遇到問題 我嘗試了幾種不同的方法后無法重新加載觸發。 BrowserSync 本身已啟動並正在運行，盡管當我手動重新加載時，沒有任何反應，我必須打開一個新選項卡才能查看任何更改。 我不是很了解 gulp 4，而且我看過的所有來源似乎都對我使用了完全不同的方法。 任何幫助將不勝感激隨時提出任何問題。

 var gulp = require('gulp'); var sass = require('gulp-sass'); var concatcss = require('gulp-concat'); var concatjs = require('gulp-concat'); var uglifycss = require('gulp-uglifycss'); var reload = require('browser-sync').reload(); var nunjucks = require('gulp-nunjucks-render'); var browserSync = require('browser-sync').create(); sass.compiler = require('node-sass'); gulp.task('sass', function () { return gulp.src('./Edit/sass/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./Edit/css')); }); gulp.task('concatcss', function() { return gulp.src('./Edit/css/*.css') .pipe(concatcss('style.css')) .pipe(gulp.dest('./Edit/css/concated/')); }); gulp.task('concatjs', function() { return gulp.src('./Edit/java-script/*.js') .pipe(concatjs('scripts.js')) .pipe(gulp.dest('./Upload/js/')); }); gulp.task('css', function () { return gulp.src('./Edit/css/concated/*.css') .pipe(uglifycss({ "maxLineLen": 80, "uglyComments": true })) .pipe(gulp.dest('./upload/css')); }); gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: "./Upload/" } }); }); gulp.task('run',gulp.parallel('browserSync', gulp.series('sass','concatcss','concatjs','css'))); gulp.task('watch', function(){ gulp.watch('./Edit/sass/*.scss',gulp.series('sass')); gulp.watch('./Edit/css/*.css',gulp.series('concatcss')); gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync gulp.watch('./Edit/css/concated/*.css', gulp.series('css')); }); gulp.task('default', gulp.parallel('watch', 'run'));

Answer 1

對於其他遇到問題的人，我的解決方案是將這個 .on('change', browserSync.relod) 添加到所需手表的末尾。

 gulp.task('watch', function(){ gulp.watch('./Edit/sass/*.scss',gulp.series('sass')); gulp.watch('./Edit/css/*.css',gulp.series('concatcss')); gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync gulp.watch('./Edit/css/concated/*.css', gulp.series('css')); gulp.watch('./Upload/css/*.css').on('change', browserSync.reload); gulp.watch('./Upload/js/*.js').on('change', browserSync.reload); });