gulp.dest() does not result in file updates

Question

Given the following dir structure:

<project>
 |- src
 |- gen
 |- target

We have a Gulp build chain in place which performs the entire front-end build for us. Intermediate results are put in the gen directory and the final results are put in the target directory.

During development, we want to monitor the target directory and synchronize changes to a separate directory that contains our Grails based application. We use the following snippet for this:

'use strict';

var debug         = require('gulp-debug');
var config        = require('../config');
var gulp          = require('gulp');
var watch         = require('gulp-watch');

module.exports = {
  //command: 'prod',
  //desc: 'Builds "production" version',
  run: function(){
     gulp.task('watch', ['server'], function() {

        // Copy files from the 'target' directory to the framework directory while developing
        var source = config.dist.root,
           destination = config.fw.root;

        gulp.src(source + '/**/*', {base: source})
           .pipe(debug({title: 'unicorn:'}))
           .pipe(watch(source + '/**/*', {base: source}))
           .pipe(debug({title: 'minotaur:'}))
           .pipe(gulp.dest(destination))
           .pipe(debug({title: 'centaur:'}));

     });
  }
};

When I update a source file, the build chain fires and puts the updated results in the target directory. But the updates are NOT synced to separate Grails directory. When I check the logging, I see this:

[14:29:42] Rebundle...
[14:29:42] minotaur: target\web-app\portal\js\appLoader.js
[14:29:43] minotaur: target\web-app\portal\js\appLoader.js

It seems that the file IS regenerated in the target directory and the regeneration IS picked up by the gulp-watch package. But the file is NOT written by the gulp.dest() function?!

What's might be going on here?

Answer 1

After some trial and error, it seems that you cannot use watch() in the middle of your pipeline. Instead, you should use it as the head of your pipeline (instead of gulp.src()). Splitting the single pipeline into two separate pipelines solved the issue.

So this (removed debug() statements for brevity):

gulp.src(source + '/**/*', {base: source})
       .pipe(watch(source + '/**/*', {base: source}))
       .pipe(gulp.dest(destination));

Becomes this:

gulp.src(source + '/**/*', {base: source})
       .pipe(gulp.dest(destination));

watch(source + '/**/*', {base: source})
       .pipe(gulp.dest(destination));