Why does gulp-sass progressively increase task execution time?

Question

css

There is no more strength to endure, to the point of abandoning Sass or even building a project on Gulp.
Just .... a cry from the heart .. already, after an hour of work, rebuilding SASS takes 15 seconds .. maybe someone came across and can help ...
Gulp 4.0
gulpfile.js

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');

gulp.task('server', function() {
  browserSync.init({
  proxy: "http://blank1/"
  });
  browserSync.watch(['../css/style.css', '../*.php']).on('change', browserSync.reload);
})

gulp.task('build:style', function() {
  return gulp.src('sass/style.scss')
  .pipe(sass({
    outputStyle: 'expanded'
  }).on('error', sass.logError))
  .pipe(gulp.dest('../css'))
});

gulp.task('build', 
  gulp.series('build:style')
);

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss*', gulp.series('build:style'));
});

gulp.task('dev',
  gulp.series('build', gulp.parallel('server', 'watch'))
);

And here are the last ~30 launches of the style task, you can clearly see how the time grows from 196ms to 2 seconds..

[00:29:17] Using gulpfile d:\Desktop\blank1\dev\gulpfile.js
[00:29:17] Starting 'dev'...
[00:29:17] Starting 'build'...
[00:29:17] Starting 'build:style'...
[00:29:17] Finished 'build:style' after 390 ms
[00:29:17] Finished 'build' after 395 ms
[00:29:17] Starting 'server'...
[00:29:17] Starting 'watch'...
[BS] Proxying: http://blank1
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.100:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.100:3001
 --------------------------------------
[00:29:38] Starting 'build:style'...
[00:29:38] Finished 'build:style' after 196 ms
[BS] File changed: ../css/style.css
[00:29:39] Starting 'build:style'...
[00:29:39] Finished 'build:style' after 193 ms
[BS] File changed: ../css/style.css
[00:29:41] Starting 'build:style'...
[00:29:41] Finished 'build:style' after 189 ms
[BS] File changed: ../css/style.css
[00:29:42] Starting 'build:style'...
[00:29:42] Finished 'build:style' after 179 ms
[BS] File changed: ../css/style.css
[00:29:44] Starting 'build:style'...
[00:29:44] Finished 'build:style' after 288 ms
[BS] File changed: ../css/style.css
[00:29:45] Starting 'build:style'...
[00:29:45] Finished 'build:style' after 285 ms
[BS] File changed: ../css/style.css
[00:29:46] Starting 'build:style'...
[00:29:47] Finished 'build:style' after 375 ms
[BS] File changed: ../css/style.css
[00:29:48] Starting 'build:style'...
[00:29:48] Finished 'build:style' after 353 ms
[BS] File changed: ../css/style.css
[00:29:49] Starting 'build:style'...
[00:29:50] Finished 'build:style' after 387 ms
[BS] File changed: ../css/style.css
[00:29:50] Starting 'build:style'...
[00:29:51] Finished 'build:style' after 433 ms
[BS] File changed: ../css/style.css
[00:29:52] Starting 'build:style'...
[00:29:52] Finished 'build:style' after 438 ms
[BS] File changed: ../css/style.css
[00:29:53] Starting 'build:style'...
[00:29:54] Finished 'build:style' after 561 ms
[BS] File changed: ../css/style.css
[00:29:55] Starting 'build:style'...
[00:29:55] Finished 'build:style' after 515 ms
[BS] File changed: ../css/style.css
[00:29:56] Starting 'build:style'...
[00:29:57] Finished 'build:style' after 553 ms
[BS] File changed: ../css/style.css
[00:29:58] Starting 'build:style'...
[00:29:59] Finished 'build:style' after 667 ms
[BS] File changed: ../css/style.css
[00:30:00] Starting 'build:style'...
[00:30:01] Finished 'build:style' after 603 ms
[BS] File changed: ../css/style.css
[00:30:01] Starting 'build:style'...
[00:30:02] Finished 'build:style' after 753 ms
[BS] File changed: ../css/style.css
[00:30:03] Starting 'build:style'...
[00:30:04] Finished 'build:style' after 861 ms
[BS] File changed: ../css/style.css
[00:30:04] Starting 'build:style'...
[00:30:05] Finished 'build:style' after 859 ms
[BS] File changed: ../css/style.css
[00:30:06] Starting 'build:style'...
[BS] File changed: ../css/style.css
[BS] File changed: ../css/style.css
[00:30:07] Finished 'build:style' after 1.36 s
[BS] File changed: ../css/style.css
[00:30:07] Starting 'build:style'...
[00:30:08] Finished 'build:style' after 976 ms
[BS] File changed: ../css/style.css
[00:30:09] Starting 'build:style'...
[00:30:10] Finished 'build:style' after 1.02 s
[BS] File changed: ../css/style.css
[00:30:11] Starting 'build:style'...
[BS] File changed: ../css/style.css
[00:30:12] Finished 'build:style' after 1.51 s
[00:30:12] Starting 'build:style'...
[BS] File changed: ../css/style.css
[BS] File changed: ../css/style.css
[00:30:14] Finished 'build:style' after 1.75 s
[00:30:14] Starting 'build:style'...
[BS] File changed: ../css/style.css
[BS] File changed: ../css/style.css
[00:30:16] Finished 'build:style' after 2.13 s
[00:30:16] Starting 'build:style'...
[BS] File changed: ../css/style.css
[BS] File changed: ../css/style.css
[00:30:18] Finished 'build:style' after 1.9 s
[00:30:18] Starting 'build:style'...
[BS] File changed: ../css/style.css
[BS] File changed: ../css/style.css
[00:30:20] Finished 'build:style' after 2.17 s

Answer 1

Solution found! Watcher turned out to be the culprit , for example, we have such a watcher for styles.

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', gulp.series('style'));
});

This design is to blame for everything, **
Do not use such a design in the watcher, write directly all the folders where to look, for example like this
In this example, we have specified 3 folders where all files will be read, these are sass, block, page. and if now you edit files from these folders, then your styles will be collected in record time, and the task execution time WILL NOT INCREASE
EXAMPLE!!
Having such a watch task.

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', gulp.series('style'));
});

I go into the sass/components/header.scss file and edit ras 10 until the task runs to a second, then go into the sass/block.scss file and edit it 3 times, pay attention to the speed of the task.. 150- 180 milliseconds further I am editing the sass/components/header.scss file again and the task execution time is already more than one second .. so draw the conclusion gentlemen ..

Answer 2

A bit of necroposting, but there is another solution.
The point is in chockidar, which is used by watch, it needs to pass usePolling: true
Already more than 100 file updates and compiles in 100-300ms
Example:
I spied the answer here (if possible, upvote the person):
https://ru.stackoverflow.com/questions/576320/%D0%...

Answer 3

Try to install the cache: https://www.npmjs.com/package/gulp-sass-inheritance
I would also remove the watcher from browserSync and transfer it to each task separately.
For js:

.on('end', function() {
    browserSync.reload();
});

For css at the end:
.pipe(browserSync.stream())

Answer 4

Building gulp 3.9.0, working draft - here is the result, as for me it all depends on the correct spelling of gulpfile.js

/usr/bin/node /home/**********/Dropbox/Projects/Work2016/eGARAGE/node_modules/gulp/bin/gulp.js --color --gulpfile /home/**********/Dropbox/Projects/Work2016/eGARAGE/gulpfile.js default
[23:54:08] Using gulpfile ~/Dropbox/Projects/Work2016/eGARAGE/gulpfile.js
[23:54:08] Starting 'styles:vendor'...
[23:54:08] Finished 'styles:vendor' after 70 ms
[23:54:08] Starting 'styles'...
[23:54:08] Finished 'styles' after 21 ms
[23:54:08] Starting 'js:vendor'...
[23:54:08] Finished 'js:vendor' after 15 ms
[23:54:08] Starting 'js'...
[23:54:08] Finished 'js' after 11 ms
[23:54:08] Starting 'images'...
[23:54:08] Starting 'sprite'...
[23:54:08] Starting 'fonts'...
[23:54:08] Starting 'html'...
[23:54:08] Finished 'html' after 4.28 ms
[23:54:08] Starting 'webServer'...
[23:54:08] Finished 'webServer' after 19 ms
[23:54:08] Starting 'openBrowser'...
[23:54:08] Finished 'openBrowser' after 7.64 ms
[23:54:08] Starting 'watch'...
[23:54:08] Finished 'watch' after 81 ms
[23:54:08] Server started http://localhost:9001
[23:54:08] LiveReload started on port 35729
[23:54:09] Starting 'styles'...
[23:54:09] Finished 'styles' after 9.13 ms
[23:54:10] Finished 'sprite' after 1.84 s
[23:54:10] Starting 'html'...
[23:54:10] Finished 'html' after 6.94 ms
[23:54:10] Finished 'fonts' after 1.91 s
[23:54:19] gulp-ruby-sass: write main.css
[23:54:20] gulp-ruby-sass: write main.css
[23:54:24] gulp-imagemin: Minified 14 images (saved 715.14 kB - 22%)
[23:54:24] Finished 'images' after 17 s
[23:54:24] Starting 'build'...
[23:54:24] Finished 'build' after 13 μs
[23:54:24] Starting 'default'...
[23:54:24] Finished 'default' after 9.83 μs

Answer 5

I'll raise the topic again. has been dragging along since the 15th year https://github.com/paulmillr/chokidar/issues/328
The issue is still open. From observations,
/*/*.*the design also does not help. only on the first level. Under than in yesterday this norms. and in src it’s bad (for me) I
still use usePolling: trueit, but this is clearly not its purpose
. If there are new ideas. share)