I want to automatically fix my CSS source files, but I get an endless loop

Question

I use gulp-stylefmt and it run every time I save any CSS file:

function stylelint () {
  return gulp.src('src/**/*.css')
    .pipe($.stylefmt())
    .pipe(gulp.dest('src/'));
}

Same time gulp.watch watches the path src/**/*.css and run stylelint task again.

Console output:

[16:32:24] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 554 ms
[16:32:25] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 60 ms
[16:32:25] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 33 ms
[16:32:25] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 36 ms
[16:32:26] Starting 'stylelint'...
[16:32:26] Finished 'stylelint' after 34 ms
[16:32:26] Starting 'stylelint'...
[16:32:26] Finished 'stylelint' after 29 ms
[16:32:26] Starting 'stylelint'...
[16:32:26] Finished 'stylelint' after 27 ms
[16:32:26] Starting 'stylelint'…
[16:32:26] Finished 'stylelint' after 32 ms

There is a way to correct this behavior and run stylelint task only one time?

UPD. I added gulp-cached and now it runs only twice. Can I improve it to run once?

function stylelint () {
  return gulp.src('src/**/*.css')
    .pipe($.cached('stylelint'))
    .pipe($.stylefmt())
    .pipe($.cached('stylelint'))
    .pipe(gulp.dest('src/'));
}

Possible duplicate of [GULP: Modify a watched file in place without causing an infinite loop](http://stackoverflow.com/questions/37602702/gulp-modify-a-watched-file-in-place-without-causing-an-infinite-loop) — Sven Schoenung, Oct 11 '16 at 13:54
@SvenSchoenung Thanks but it helped partly. Better than nothing. Now it runs only twice :) Should I delete my question? I'm new here. — dmin, Oct 11 '16 at 14:12
Edited the answer with a solution that should only run the task once. — Sven Schoenung, Oct 11 '16 at 17:33
For gulp4 no need install _gulp-watch_ https://github.com/gulpjs/gulp/blob/4.0/docs/API.md#gulpwatchglobs-opts-fn? — dmin, Oct 11 '16 at 21:28
Yeah, gulp4 uses `chokidar` for the built-in `gulp.watch()`, so you don't need the `gulp-watch` plugin. But gulp4's task system is also vastly different, so the answer doesn't work there without modification. — Sven Schoenung, Oct 12 '16 at 06:23

score 5 · Accepted Answer · answered Oct 13 '16 at 22:27

5

I think I repeated the solution 1 by @SvenSchoenung with since and gulp.lastRun. In my case I did it without gulp-cached, but I use gulp4

function stylelint () {
  return gulp.src('src/**/*.css', {since: gulp.lastRun(stylelint)})
 .pipe($.stylefmt())
 .pipe(gulp.dest('src/'));
}

answered Oct 13 '16 at 22:27

dmin

434
4
15

Awesome for having a gulp 4 solution that's so simple. I was looking for some kind of option like this for ages. – Tortilaman Jul 26 '18 at 21:30

I want to automatically fix my CSS source files, but I get an endless loop

1 Answers1

Linked