Watching files on network drive triggers build task constantly

[JonWallsten]

For some reason my watch constantly triggers the change event. As soon as the build of styles is complete it triggers another one.
Paths is an array of paths. Does this have something to do with the fact that the files are on a network drive? Tried to google it and checked the previous issues, but could find any useful.

gulp.task('styles', function() {
  return sass(cfg.styles.source, { style: 'compact', sourcemap: ENVIRONMENT == 'TEST'})
        .on('error', swallowError)
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(minifycss())
        .on('error', swallowError)
    .pipe(gulpIf(ENVIRONMENT == 'TEST', sourcemaps.write()))
    .pipe(gulp.dest(cfg.styles.dest));
});

var watcher = gulp.watch(paths, ['styles']);
watcher.on('change', function(event) {
     console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

Log

File PATH\stam.scss was changed, running tasks...
File PATH\mediaqueries.scss was changed, running tasks...
File PATH\main.scss was changed, runningtasks...
File PATH\normalize.css was changed, running tasks...
[11:07:21] Finished 'styles' after 583 ms
File PATH\rippleEffect.scss was changed, running tasks...
[11:07:22] Starting 'styles'...
File PATH\grid.scss was changed, runningtasks...
File PATH\main.scss was changed, runningtasks...
File PATH\mediaqueries.scss was changed, running tasks...
File PATH\stam.scss was changed, running tasks...
File PATH\normalize.css was changed, running tasks...
[11:07:22] directory ./
[11:07:22] write ./stam.css
[11:07:22] write ./stam.css.map
File PATH\rippleEffect.scss was changed, running tasks...
File PATH\grid.scss was changed, runningtasks...
File PATH\mediaqueries.scss was changed, running tasks...
File PATH\stam.scss was changed, running tasks...
File PATH\main.scss was changed, runningtasks...
File PATH\normalize.css was changed, running tasks...
[11:07:22] Finished 'styles' after 607 ms
File PATH\grid.scss was changed, runningtasks...
[11:07:23] Starting 'styles'...
File PATH\rippleEffect.scss was changed, running tasks...
File PATH\mediaqueries.scss was changed, running tasks...
File PATH\stam.scss was changed, running tasks...
File PATH\normalize.css was changed, running tasks...
File PATH\main.scss was changed, runningtasks...
[11:07:23] directory ./
[11:07:23] write ./stam.css
[11:07:23] write ./stam.css.map
File PATH\rippleEffect.scss was changed, running tasks...
File PATH\mediaqueries.scss was changed, running tasks...
File PATH\stam.scss was changed, running tasks...
File PATH\main.scss was changed, runningtasks...
File PATH\grid.scss was changed, runningtasks...
File PATH\normalize.css was changed, running tasks...
[11:07:23] Finished 'styles' after 626 ms
File PATH\mediaqueries.scss was changed, running tasks...
[11:07:24] Starting 'styles'...
File PATH\rippleEffect.scss was changed, running tasks...
File PATH\main.scss was changed, runningtasks...
File PATH\stam.scss was changed, running tasks...
File PATH\normalize.css was changed, running tasks...
File PATH\grid.scss was changed, runningtasks...
...

Any ideas?

[yocontra]

Can you please include all of your paths? I have a feeling you might be watching a path that is also one of your output folders

[JonWallsten]

I wish it was that simple!

gulp.task('default', ['build'], function() {
    // Watch .scss files
    var graph = sassGraph.parseDir(cfg.styles.source);
    var paths = [];
    for (var i in graph.index) { paths.push(i); }
    gulp.watch(paths, ['styles']);
    gulp.watch(cfg.scripts.source.appJS, ['appJS']);
});

cfg.styles.source: assets/source/app.scss ->
@import "../../content/css/vendors/normalize.css";
@import "../../content/css/vendors/jquery-ui.theme.css";
@import "../../content/css/vendors/jquery-ui.css";
@import "../../content/css/vendors/jquery-ui.structure.css";
@import "../../content/css/vendors/jquery.datetimepicker.css";
@import "../../content/css/vendors/fullcalendar-2.3.1.css";
@import "../../content/css/fonts.scss";
@import "../../content/css/base.scss";
@import "../../content/css/forms.scss";
@import "../../content/css/header.scss";
@import "../../content/css/login.scss";
@import "../../content/css/employees.scss";
@import "../../content/css/events.scss";
@import "../../content/css/planner.scss";

cfg.scripts.source.appJS ->
                ["scripts/vendor/modernizr-2.8.3.min.js",
        "scripts/vendor/jquery-2.1.1.min.js",
        "scripts/vendor/jquery-ui.min.js",
        "scripts/vendor/jquery.ddslick.min.js",
        "scripts/vendor/jquery.datetimepicker.js",
        "scripts/vendor/fixedsticky.js",
        "scripts/vendor/moment-2.10.2.js",
        "scripts/vendor/moment-2.10.2-locales.js",
        "scripts/vendor/moment-range.js",
        "scripts/vendor/fullcalendar-2.3.2.js",
        "scripts/vendor/fullcalendar-2.3.2.lang-sv.js",
        "scripts/vendor/handlebars-v3.0.3.js",
        "scripts/vendor/jquery.ui-contextmenu.js",
        "scripts/helpers/handlebars.helper.js",
        "scripts/vendor/require.js",
        "scripts/config.js",
        "scripts/core/global.js",
        "scripts/core/global.helpers.js",
        "scripts/core/ajax.helpers.js",
        "scripts/core/messageHandler.js",
        "scripts/plugins.js",
        "scripts/validation.js",
        "scripts/modules/login.js",
        "scripts/modules/employees.js",
        "scripts/modules/events.js",
        "scripts/modules/users.js",
        "scripts/modules/planner.js",
        "scripts/modules/workshifts.js",
        "scripts/modules/roles.js"]

Destination for CSS is "assets/styles" and for JS it is "assets/script". No conflicts.

And here's the kicker. When I moved the files to my local drive form my network drive it just works. Same config.

[romulo-rocha]

I am new to Gulp and have faced the same problem. With me, I was using 'gulp-uglify', which minifies the js file.

See if it works for you:

gulp.task('scripts', function(){
    gulp.src(['public/assets/js/**/*.js', '!public/assets/js/**/*.min.js'])
        .pipe( rename({suffix:'.min'}) )
        .pipe( uglify() )
        .pipe( gulp.dest('public/assets/js') );
});

In this task, I am basically taking all the js files that don't have '.min' extension and uglifying them.

The problem was with my watcher:

gulp.task('watch', function(){
    gulp.watch('public/assets/js/**/*.js', ['scripts'])
        .on('change', function(evt){
            console.log('[watcher] File ' + evt.path.replace(/.*(?=js)/,'') + ' was ' + evt.type + ', uglifying...');
        });
});

For some reason, the watch task is always triggering 'script' task, because of the minified js file changes. I did include a '!public/assets/js/_/_.min.js' on script task, but it was still listening to the minified files.
I easily solved the problem by adding the same '!public/assets/js/_/_.min.js' on watch task parameter:

gulp.task('watch', function(){
    gulp.watch(['public/assets/js/**/*.js', '!public/assets/**/*.min.js'], ['scripts'])
        .on('change', function(evt){
            console.log('[watcher] File ' + evt.path.replace(/.*(?=js)/,'') + ' was ' + evt.type + ', uglifying...');
        });
});

Now the scripts task is only triggering once when it changes.

I hope it works for you.

[JonWallsten]

Unfortunately as I wrote in my previous response my assets-files are outside of the source folder. And everything works just fine when I move the project to a local folder. The only difference is the network-folder.

[pdeffendol]

I can confirm the same result as @JonWallsten - I'm using Parallels on my Mac and my files are on the Mac side, shared with Windows as a network drive. If I run Gulp on Mac OS, it works fine. If I copy the files to the Windows C: drive, it also works as expected. Only when running Gulp on Windows with the files on the network share do I get the repeated file change events.

[JonWallsten]

I have the exact same setup. Boot camp Win 8.1 partition as virtual machine with Parallels. Files is located on the Mac and mapped as Network drive.

[dmacdnld]

I am experiencing this as well. I suspect this is an issue with Parallels because a coworker of mine using VM Fusion isn't running into this issue and neither are my other coworkers who aren't using any VM.

[davebrong]

I'm experiencing a similar issue, but my environment might differ slightly. I run the website/gulp inside of a virtual machine, and my host uses a network share to run the code editor. When I save a file, the gulp.watch inside the VM fires, but I noticed that the gulp.dest() function doesn't actually do anything --- any modified files in the stream get placed into the source directory -- which in this case is my ./scss directory, which again triggers gulp.watch (src = ./scss/*/)

I can fix it by only watching for the ./scss/*.scss files, but the gulp.dest still places processed files inside of that directory.

I'm not sure if the bug is with gulp.watch, gulp,dest or gulp-sass -- or none of the above and with nodejs itself on how a network file save triggers differently.

(grunt works just fine)

[pdeffendol]

See the Parallels Forum at https://forum.parallels.com/threads/grunt-gulp-watch-from-windows-guest-to-mounted-mac-drive.328830/#post-776203 for a more official response.

[callumacrae]

@pdeffendol Thanks for asking over there. So, it's not a gulp or gaze issue, then?

[pdeffendol]

@callumacrae Yes, it appears to be related to Parallels implementation of shared folders. I tried to test in VirtualBox but got some unrelated errors and gulp watch wouldn't even run. @dmacdnld seems to verify that it works on "real" Windows machines.

[davebrong]

It may not be only related to parallels. I'm experiencing the issue in a pure Windows environment as well. Even putting in an absolute path into the gulp.dest() doesn't work.

[JonWallsten]

@callumacrae For me it sounds like he's stating that the problem is with Parallels, but he's leaving the whole "when it's gonna be fixed" part of the statement.

[phated]

Can this be tested with the newest changes from the 4.0 branch? We've recently switched to chokidar as the watching library.

[arvinkx]

I seem to be running into this issue as well the only difference is that I have it running off a USB drive mounted in OSX Yosemite. If I move the contents onto the internal drive it runs fine, and, incidentally, if I have the contents on a network mounted drive it works fine as well, the problem seems to only exist if running off the external drive.

[phated]

@arvinkx what version of gulp? This shouldn't be happening with the newest changes in the 4.0 branch because we switched to chokidar

[pdeffendol]

@phated I briefly tested with the 4.0 branch. It seems to work with { usePolling: true } but not otherwise.

[phated]

@es128 ^ thoughts?

[es128]

Yup, the need for usePolling: true is typical for network mounted drives. Polling is slower and more CPU-intensive than other methods, hence the need for the config change, but is the only reliable method in some specific circumstances. The version of gaze that was previously in use relied upon polling in all situations afaik.

paulmillr/chokidar#242 tracks ideas about solving this in a more automatic way so users won't need to intervene with the usePolling setting in this situation.

[arvinkx]

@phated I was using a pre-4.0 version, I upgraded to 4.0 and it seems to have solved the problem in regards to an external (USB) drive. Thanks again.

[phated]

Closing this, as I believe it is resolved by chokidar in 4.0 (might need to use usePolling: true option).

[john-everden]

I can confirm this bug still exists when using usePolling: true and version 4.0 on a mounted network drive.