Search code examples
javascriptgulpgulp-watch

Gulp watch not watching .js files


Just went back to a very old project and updated to Gulp 4.0.2.

Managed to get it watching and compiling css, but doesn't seem to watch changes to the JavaScript files?

It doesn't throw any errors, just doesn't compile the JS when I make a change.

(I'm a designer and my JS is terrible, so you might have to really spell it out for me 😬)

gulpfile.js

// Include gulp
var gulp = require('gulp');

// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------

var concat          = require('gulp-concat');
var include         = require('gulp-include');
var jshint          = require('gulp-jshint');
var map             = require('map-stream');

var notify          = require('gulp-notify');
var plumber         = require('gulp-plumber');

var postcss         = require('gulp-postcss');
var sass            = require('gulp-sass');
var cssnano         = require('gulp-cssnano');
var autoprefixer    = require('autoprefixer');
var replace         = require('gulp-replace');

var fs              = require('fs');
var path            = require('path');

var stripDebug      = require('gulp-strip-debug');
var uglify          = require('gulp-uglify');
var watch           = require('gulp-watch');


// --------------------------------------------------------------
// Paths
// ---------------------------------------------------------------

var base = path.join(__dirname, '/site/themes/theme_name/');

var basePaths  = {
  src:       base + 'src/'
};

var paths = {
  styles: {
      src:    basePaths.src  + 'styles/',
      dist:   base           + 'css/'
  },
  scripts: {
      src:    basePaths.src  + 'scripts/custom/',
      dist:   base           + 'js/'
  },
  vendor: {
      src:    basePaths.src  + 'scripts/vendor/',
      dist:   base           + 'js/'
  }
};


// --------------------------------------------------------------
// Styles
// ---------------------------------------------------------------

gulp.task('styles', function() {
   return gulp.src(paths.styles.src + 'styles.scss')
      .pipe(include())
      .pipe(plumber({errorHandler: errorStyles}))
      .pipe(sass({style: "compressed", noCache: true}))
      .pipe(cssnano({
        autoprefixer: {browsers: ['> 0%', 'last 2 versions', 'Firefox >= 20'], add: true}
      }))
      .pipe(gulp.dest(paths.styles.dist))
});

function errorStyles(error) {
    notify.onError({title: "Sass Error", message: "", sound: "Sosumi"})(error);
    console.log(error.toString());
    this.emit("end");
}


// --------------------------------------------------------------
// Scripts
// ---------------------------------------------------------------

gulp.task('scripts', function() {
    return gulp.src(paths.scripts.src + '**/*')
          .pipe(jshint())
          .pipe(notify(function(file) {
            if (file.jshint.success)
            return false;
            var errors = file.jshint.results.map(function(data) {
              if (data.error)
                return "(" + data.error.line + ':' + data.error.character + ') ' + data.error.reason;
              }).join("\n");
            return {
              title: 'JavaScript error',
              message: file.relative + " (" + file.jshint.results.length + " errors)\n" + errors,
              sound: 'Frog',
            };
          }))
        .pipe(concat('script.js'))
        .pipe(uglify().on('error', function(e){
          console.log(e);
        }))
        .pipe(gulp.dest(paths.scripts.dist))
});


// --------------------------------------------------------------
// Vendor
// ---------------------------------------------------------------

gulp.task('vendor', function() {
    return gulp.src(paths.vendor.src + '**/*')
        .pipe(concat('vendor.js'))
        .pipe(uglify())
        .pipe(gulp.dest(paths.vendor.dist))
});


// --------------------------------------------------------------
// Watch
// ---------------------------------------------------------------

gulp.task('watch', function() {
    gulp.watch(paths.styles.src  + '*.scss', gulp.parallel('styles'));
    gulp.watch(paths.scripts.src + '/*.js',  gulp.parallel('scripts'));
    gulp.watch(paths.vendor.src  + '/*.js',  gulp.parallel('vendor'));
});

gulp.task('default', gulp.parallel('styles', 'scripts', 'vendor', 'watch'));

Solution

  • paths.scripts.src + '/*.js' and paths.vendor.src + '/*.js' contained an extra /

    Thanks to Thomas Sablik