Gulp task outputs fine when run manually, fails to output when used in gulp.watch

Question

I have a gulp task that performs some pretty common tasks - it runs jshint to validate my code, then concats and minimizes the files and outputs them into single .min.js files.

The task (appears) to execute flawlessly when I run it manually. But the second I try to use it in a $gulp.watch it no longer outputs my file (it still executes and executes jshint though).

The code in my task:

gulp.src(path.join(workingPath, folder, '/*.js'))
        .pipe(jshint())
        .pipe(jshint.reporter(stylish))
        .pipe(jshint.reporter('fail'))     //stop build if errors found
        .on('error', function() {
            console.log("Please review and correct jshint errors.");
            this.end();
        })
        .pipe(order([                      //order files before concat - ensure module definitions are first
            "*.module.js",
            "*.js"
        ]))
        .pipe(concat(filename+'.js'))
        .pipe(gulp.dest(destinationPath))   //full combined version
        .pipe(uglify())
        .pipe(rename(filename+'.min.js'))
        .pipe(gulp.dest(destinationPath))  //minified combined version
        .on('error',function() {
            console.log("An error occurred during Gulp processing.");
            this.end();
        });

My gulp watch (the task is named 'components'):

  gulp.watch(componentsBasePath+"/**/*.js",['components']);

One thing that I've noticed though is at the end of the manual run I see "Process finished with exit code..". And if I kill my gulp.watch it outputs "Process finished with exit code.." - then it DOES creates the output files!

My goal is to have my 'components' task create those output files every time it is triggered by the watch - not just when I kill the watch.

Thank you!
Cliff

Answer 1

Ok so my hacky way to fix the problem with jetbrains (im using phpstorm), you gotta understand 2 things.

• gulp watchers act on file save.
• jetbrains will not auto update the project files (as you have found out it uses a cache).

To get around this problem i created a macro called saveSync which does the following actions:

1. Save all
2. Synchronize
3. Synchronize
4. Synchronize

Why did i synchronize 3 times? Because gulp takes a few seconds to finish tasks (compiling, etc) and if you update before they finish obviously the project view doesn't get update properly. I haven't figured out a way to insert a time delay into the macro itself.

After i created the macro, i just rebound ctrl + s from save all to the macro, and it worked.

If there is a 'cleaner' way of doing this i have yet to discover it.

Answer 2

Ran this by someone else and he found the cause of the issue. Though - it's not Gulp related at all it turns out.

The IDE I was using updated the folder and file structure instantly when I manually ran my 'components' task, however it did not do the same when I ran the gulp.watch task. I am happy to report though that the files were being created successfully, they just never appeared in the IDE until I killed the task.