BrowserSync working only once at the beginning of execution. The reload doesn't work after changes about my Scss files

Question

I'm using Gulp 4 and BrowserSync doesn't reload my browser after changing my scss files.

This my 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'));
});

After launching gulp serve command, this is the result of execution :

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...

"Reloading Browsers..." appears when I modify my Scss files, the CSS files are updated but my browser doen't reload my page automatically. Maybe, it's just an error from Gulp 4 syntax.

Thanks for your help.

It it's gulp 4 you should return `browserSync.watch('app/**/*.*', gulp.series('sass'));` I'm also not sure if `gulp.series` is here correct, but first try this one fix. — Zydnar, Jan 11 '19 at 08:25
I'm sorry but I don't understand what you mean. The notation ['sass'] works only on previous version of Gulp. That's why I use gulp.series('sass'). I'm already used browserSync.watch('app/**/*.*', gulp.series('sass')); on my task serve but the reload doesn't work after changing scss files. — Yassin Ghandri, Jan 11 '19 at 09:33
I checked and we use this with gulp4: ```gulp.task('watch', function () { watch('./public/src/**', ['es-watch']); return browserSync( { proxy: `localhost:${SERVER_PORT}` } ); });``` — Zydnar, Jan 11 '19 at 13:27
`gulp.task('es-watch', gulp.series('build', browserSync.reload));` It doesn't matter, but it's ES6 to ES5 transpile task. So no gulp.series needed, but it's ok. — Zydnar, Jan 11 '19 at 14:54
To regular stream build using browserify. It's too long for comment, but we use same set of tasks for compass build - first similar `watch` task, then task with `gulp series` where last task in series is `browserSync.reload` and first is compass sass to scss, than csso and so on, until reload. — Zydnar, Jan 14 '19 at 09:02

BrowserSync working only once at the beginning of execution. The reload doesn't work after changes about my Scss files

0 Answers0