Server.notify with gulp 4

[watzon]

I know it's still in beta, but gulp 4 will be the defacto gulp version soon. I have been able to get everything to work so far except server.notify.

[alexeden]

@watzon

Here's what I did to get notify to actually notify with Gulp 4:

export const serve = () => {
  const server = gls.static('dist', 4000);
  server.start();

  gulp
    .watch('dist/**/*')
    .on('change', path => server.notify.call(server, { path }));
};

[timdiacon]

@alexeden THANK YOU! This works for me

[marcelwagner]

@alexeden This saved my day. Thank you!

[stljeff1]

I struggled mightily in understanding how to get the page to refresh. @alexeden help me understand that I needed to use the builtin FS Events to kick off the notify call.

But also, I needed to pass in the url of the browser window to refresh. For some reason, this was not obvious in any of the documentation I saw. I did not get a path variable in my onchange event handler.

I am watching Sass files, and wanting to compile my sass files, then refresh my browser. (In my project, each folder gets its own gulp task responsible for compiling the Sass contained within.) Here is how i did it:

browser url: localhost:3000/blocks/my-block/

        var server = gls('index.js');
        var folder = 'my-block';
        gulp.watch('blocks/' + folder + '/src/*.scss').on('change', gulp.series((cb) => {
            return gulp.src('blocks/' + folder + '/src/*.scss')
                .pipe(sourcemaps.init())
                .pipe(sassglob())
                .pipe(gulpsass())
                .pipe(autoprefixer())
                .pipe(sourcemaps.write())
                .pipe(gulp.dest('./blocks/' + folder + '/css'));
        }, (cb) => {
            server.notify.call(server, { path: '/blocks/' + folder + '/index.html' } );
            cb();
        }));