gulp 4 not updating CSS and JS

Question

I am developing my own themes for WordPress, I came to know about Glup and how easy it made my workflow, the problem I am facing with my below code is I am able to see the immediate changes I am making to the main page (html or php) but any changes I am making to the css files or the java-script files is not effected at all, still I have to manually refresh the page:

var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');

gulp.task('styles', function() {
  return gulp.src(settings.themeLocation + 'css/style.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
    .on('error', (error) => console.log(error.toString()))
    .pipe(gulp.dest(settings.themeLocation));
});

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

gulp.task('watch', function() {
  browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
    ghostMode: false
  });

  gulp.watch('./**/*.php', function(done) {
    browserSync.reload();
    done();
  });

  gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
  gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});

gulp.task('waitForStyles', gulp.series('styles', function() {
  return gulp.src(settings.themeLocation + 'style.css')
    .pipe(browserSync.stream());
}))

gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
  browserSync.reload();
  cb()
}))

gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('waitForStyles')); gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts')); }); gulp.task('waitForStyles', gulp.parallel('styles', function() { return gulp.src(settings.themeLocation + 'style.css') .pipe(browserSync.stream()); })) gulp.task('waitForScripts', gulp.parallel('scripts', function(cb) { browserSync.reload(); cb() })) is that what you mean by swap out ? — Mozes22
– Mozes22, Commented Mar 14, 2019 at 3:05
I put it into an answer to clarify - I'll delete my prior comment. — Mark
– Mark, Commented Mar 14, 2019 at 3:16

Mark · Accepted Answer · 2019-03-14 03:47:27Z

1

Try this:

gulp.task('styles', function() {
  return gulp.src(settings.themeLocation + 'css/style.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
    .on('error', (error) => console.log(error.toString()))
    .pipe(gulp.dest(settings.themeLocation))

     // added below
    .pipe(browserSync.stream());
});

// now this task is unnecessary:
// gulp.task('waitForStyles', gulp.series('styles', function() {
//  return gulp.src(settings.themeLocation + 'style.css')
//    .pipe(browserSync.stream());
// }))


 // cb added, called below       
gulp.task('watch', function(cb) {
  browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
    ghostMode: false
  });

  gulp.watch('./**/*.php', function(done) {
    browserSync.reload();
    done();
  });

      // change to gulp.series below 
  // gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('waitForStyles'));

   // changed to 'styles' below        
 gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles'));

  gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts'));

  cb();
});

I have seen gulp4 have trouble with just a single task ala gulp.parallel('oneTaskHere'), so try swapping parallel with series in your watch statements as above code.

I made some edits to simplify the code - give it a try. No need for 'waitForStyles', just move the browserSync.stream() pipe to the end of the styles task.

Or instead of moving the browserSync.stream pipe, just do this:

gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles', browserSync.reload));

but I seem to have better luck with the browserSync pipe at the end of the 'styles' task version myself.

Because you are using webpack plugin I assume the scripts task have to be handled differently from the styles task. You might try :

gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts', browserSync.reload));

and then no need for 'waitForScripts' task.

edited Mar 14, 2019 at 3:47

answered Mar 14, 2019 at 3:16

Mark

191k32 gold badges557 silver badges580 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mozes22 Over a year ago

alright, but what about

gulp.task('waitForStyles', gulp.series('styles', function() {   return gulp.src(settings.themeLocation + 'style.css')     .pipe(browserSync.stream()); }))  gulp.task('waitForScripts', gulp.series('scripts', function(cb) {   browserSync.reload();   cb() }))

? the function/task 'Styles' and the function/task 'Scripts' should be called within the watch, am I right?

Mark Over a year ago

I would simplify that too. I made some more changes above.

Collectives™ on Stack Overflow

gulp 4 not updating CSS and JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related