我正在使用 Gulp 4，并且 BrowserSync 在更改我的 scss 文件后不会重新加载我的浏览器。
这是我的 gulpfile.js。
var gulp = require('gulp');
var browserSync = require('browser-sync').create(); // instance de browser-sync
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('app/scss/*.scss') // Folder which contains scss files
.pipe(sass()) // Execution of Sass module
.pipe(gulp.dest('app/css')) // Compile scss files into css folder destination
.pipe(browserSync.reload({stream : true})) // After compile, execute browserSync.reload
});
gulp.task('serve', function() {
// Launching static server
browserSync.init({
files: [
{
match: ['app/scss/**/*.scss'],
fn: function (event, file) {
this.reload()
}
}
],
server: {
baseDir: 'app'
}
});
// Watcher on changes Sass Files
browserSync.watch('app/**/*.*', gulp.series('sass'));
});
启动 gulp serve 命令后，执行结果如下：
大口发球
[17:40:37] Using gulpfile ~/Documents/project/gulpfile.js
[17:40:37] Starting 'serve'...
[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.10:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------
[Browsersync] Serving files from: app
[Browsersync] Watching files...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 70 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 75 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 73 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 72 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 71 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 68 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 72 ms
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 72 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 74 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 71 ms
[17:40:38] Starting 'sass'...
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 48 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 46 ms
[17:40:38] Starting 'sass'...
[17:40:38] Starting 'sass'...
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 30 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 17 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:40:38] Finished 'sass' after 16 ms
[17:41:03] Starting 'sass'...
[17:41:03] Starting 'sass'...
[17:41:03] Starting 'sass'...
[17:41:03] Starting 'sass'...
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:41:03] Finished 'sass' after 44 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:41:03] Finished 'sass' after 33 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:41:03] Finished 'sass' after 30 ms
[Browsersync] 3 files changed (print.css, styles.css, test.css)
[17:41:03] Finished 'sass' after 30 ms
[Browsersync] Reloading Browsers...
当我修改我的 Scss 文件时出现“正在重新加载浏览器...”，CSS 文件已更新，但我的浏览器不会自动重新加载我的页面。也许，这只是 Gulp 4 语法的错误。
谢谢你的帮助。