gulp-watch no longer working with gulp-data

[jayjo]

I recently added gulp-data to my app to pipe .json files into my site, and now I have to rebuild my app each time I make a change to the index.pug file. gulp watch seems to no longer work.

Has anyone experience this before?

[UltCombo]

Can you please post (the relevant parts of) your gulpfile? That will help people to help you.

[jayjo]

/* Gulp File Bitches */

// Grab the gulp packages
var gulp        = require('gulp'),
    gutil       = require('gulp-util'),
    jshint      = require('gulp-jshint'),
    stylus      = require('gulp-stylus'),
    concat      = require('gulp-concat'),
    watch       = require('gulp-watch'),
    browserSync = require('browser-sync').create(),
    path        = require('path'),
    swig        = require('gulp-swig'),
    fs          = require('fs'),
    data        = require('gulp-data'),
    pug         = require('gulp-pug'),
    sourcemaps  = require('gulp-sourcemaps');

// define the default task and add the watch task to insert after
gulp.task('default', ['watch']);

// reload the browser each time a file changes and the watch task is run
gulp.task('browserSync', function(){
  browserSync.init({
    server: {
      baseDir: 'public',
      index: "index.html"
    },
    files: ["/source/**/*"]
  });
});

// configure the jshint task
gulp.task('jshint', function(){
  return gulp.src('source/javascript/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// build the JS files
gulp.task('build-js', function(){
  return gulp.src('source/javascript/**/*.js')
    .pipe(sourcemaps.init()) // Processes the original sources
      .pipe(concat('global.js')) // Builds all js files into one
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
    .pipe(sourcemaps.write()) // Add the sourcemaps to the modified source
    .pipe(gulp.dest('public/assets/js'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// build the stylus files
gulp.task('build-css', function(){
  return gulp.src('source/stylesheets/**/*.styl')
    .pipe(sourcemaps.init()) // Processes the original sources
      .pipe(stylus({
        compress: true,
        linenos: true
      }))
    .pipe(sourcemaps.write()) // Add the sourcemaps to the modified source
    .pipe(concat('style.css')) // Builds all stylus files into one
    .pipe(gulp.dest('public/assets/stylesheets'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// build the Pug files into HTML
gulp.task('build-pug', function buildHTML(){
  var dataFile = 'source/javascript/pages.json';
  return gulp.src('source/**/*.pug')
    .pipe(data(function(file) {
      return JSON.parse(fs.readFileSync(dataFile));
    }))
    .pipe(swig())
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('public'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', ['browserSync'], function(){
  gulp.watch('source/javascript/**/*.js', ['jshint']);
  gulp.watch('source/javascript/**/*.js', ['build-js']);
  gulp.watch('source/stylesheets/**/*.styl', ['build-css']);
  gulp.watch('source/**/*.pug', ['build-pug']);
});

[UltCombo]

Hey, sorry for the delay.

In your gulpfile, it looks like gulp-watch is not being used at all. I see it is being imported to the watch variable, but your watch task is actually using gulp's built-in gulp.watch function.

I believe you can report the problem in the gulp repository. Though, through a quick look, it seems neither gulp-watch or gulp.watch would be the source of the problem. Can you double-check if your task works without file watching? If the problem only happens when gulp.watch is used, please report it in the gulp repository.