Infinite watch loop with gulp on auto-updated / auto-generated files

Question

I am attempting to use some gulp plugins ( jscs, csscomb ) to style my code on the fly during dev time.

I'm having a problem with the gulp process running an infinite loop with the format task.

What's I believe to be happening:

• start a serve task of some kind
• an initial run is performed with all tasks to prep files for the staging server
• a local staging server is started in parallel with a watch task
• myfile.scss is updated by a developer
• the gulp watcher starts the csscomb task
• csscomb plugin changes the file and replaces it
• the watcher task sees the change from the file replacement & starts the format task again...
• the csscomb plugin runs again and so on ...

Here is a snippet that causes this loop. (Note: this uses v4 of gulp)

'use strict'

import { task, parallel, series, src, dest, watch, plugins } from './gulp';

import { startStagingServer } from './servers';

import { solution } from './solution.map';

const path = require('path');

task('serve', parallel(startStagingServer, watchStyles);

function watchStyles() {
  watch([ solution.src.styles ], series(formatStyles, compileStyles))
}

function formatStyles(done) {
  return src([ solution.src.styles ])
    .pipe(plugins.csscomb())
    .pipe(dest(solution.src.mount)) // the root of the solution
}

function compileStyles() {
  return src([ solution.src.styles ])
    .pipe(plugins.sass().on('error', plug.sass.logError))
    .pipe(dest(path.join(solution.dest.stage, 'serve')));
}

Does anyone know a way to avoid this?

Answer 1

The way to avoid this is not to put the fix in the watcher. Use 2 separate functions: one that fixes and the other that doesn't. Only watch the one that doesn't. Example:

function taskJscsFix() {
    return gulp.src(path.JS)
        .pipe(jscs({
            configPath: './gulp/.jscsrc',
            fix: true
        }))
        .pipe(gulp.dest(path.SRC.JS));
}

function taskScripts() {
    return gulp.src(path.JS)
        .pipe(jscs({
            configPath: './gulp/.jscsrc'
        }))
        .pipe(jscs.reporter())
        .pipe(gulp.dest(path.DEST.JS));
}