Gulp 4 を使用していますが、scss ファイルを変更した後、BrowserSync がブラウザーをリロードしません。
これは私の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 構文からの単なるエラーです。
ご協力いただきありがとうございます。