[Bug] Using /**/ glob when watching causes a steady increase in build time

[Atulin]

Describe the bug When the watch glob contains /**/, build times increase each time the build gets triggered by the watcher

Additional context

Here's a watch log when the glob is

const roots = {
    css: './project/wwwroot/css',
}
const watchGlobs = {
    sass: [
        `${roots.css}/**/*.sass`,
        `${roots.css}/**/*.scss`,
    ],
}

[00:20:23] Starting 'watch:css'...
[00:20:28] Starting 'css'...
[00:20:34] Finished 'css' after 5.33 s
[00:20:35] Starting 'css'...
[00:20:40] Finished 'css' after 4.98 s
[00:20:41] Starting 'css'...
[00:20:48] Finished 'css' after 6.54 s
[00:20:49] Starting 'css'...
[00:20:58] Finished 'css' after 8.72 s
[00:21:00] Starting 'css'...
[00:21:11] Finished 'css' after 10 s
[00:22:35] Starting 'css'...
[00:22:48] Finished 'css' after 13 s

And here's when the glob avoids using /**/

const roots = {
    css: './project/wwwroot/css',
}
const watchGlobs = {
    sass: [
        `${roots.css}/*.sass`,
        `${roots.css}/src/*.sass`,
        `${roots.css}/src/elements/*.sass`,
        `${roots.css}/src/admin-elements/*.sass`,
        `${roots.css}/src/mixins/*.sass`,

        `${roots.css}/*.scss`,
        `${roots.css}/src/*.scss`,
        `${roots.css}/src/elements/*.scss`,
        `${roots.css}/src/admin-elements/*.scss`,
        `${roots.css}/src/mixins/*.scss`,
    ],
}

[00:25:48] Starting 'watch:css'...
[00:25:53] Starting 'css'...
[00:25:57] Finished 'css' after 4.06 s
[00:26:02] Starting 'css'...
[00:26:03] Finished 'css' after 1.35 s
[00:26:05] Starting 'css'...
[00:26:06] Finished 'css' after 1.08 s
[00:26:07] Starting 'css'...
[00:26:08] Finished 'css' after 929 ms
[00:26:09] Starting 'css'...
[00:26:09] Finished 'css' after 887 ms
[00:26:10] Starting 'css'...
[00:26:11] Finished 'css' after 889 ms

Here's my CSS task

// CSS tasks
gulp.task('css', () => {
    const processors = [
        autoprefixer,
        discard({removeAll: true}),
        mqpacker,
        nano({preset: 'default'})
    ];

    return pipeline(gulp.src(`${roots.css}/*.sass`),
        sourcemaps.init(),                // Init maps
        sass({ fiber }),                       // Compile SASS
        gulp.dest(roots.css),            // Output the raw CSS
        postcss(processors),           // Postprocess it
        sourcemaps.write(`./`),        // Write maps
        cond('**/*.css',                    // If it's a css file and not a map file
            rename({suffix: '.min'}),   // Add .min suffix
        ),
        gulp.dest(`${roots.css}/dist`),    // Output minified CSS
        errorHandler);
});

gulp.task('watch:css', () => gulp.watch(watchGlobs.sass, gulp.series('css')));

and the packages I use

{
        "@hail2u/css-mqpacker": "github:hail2u/node-css-mqpacker#v8.0.1",
        "@mr-hope/gulp-sass": "^2.0.0",
        "autoprefixer": "^10.2.3",
        "cssnano": "^4.1.10",
        "fibers": "^5.0.0",
        "gulp": "^4.0.2",
        "gulp-if": "^3.0.0",
        "gulp-postcss": "^9.0.0",
        "gulp-rename": "^2.0.0",
        "gulp-sourcemaps": "^3.0.0",
        "postcss": "^8.2.4",
        "postcss-discard-comments": "^4.0.2",
        "sass": "^1.32.5"
}

[Mister-Hope]

I am not sure if it is a plugin bug. As I said in readme it's just a light wrapper.

How your globs writing should have no effect on this plugin, since it's totally handled by gulp and then in to a pipe. I am just handling your input from the pipe gulp provided, then handle it to sass, and return a transform pipe to let sass compile.

I will test it if I have time.

Did you use other gulp sass plugins before?Did you meet this issue?

[Mister-Hope]

Sorry I cannot reproduce your issue.

Please give a mininal reproduction repo. And please make sure whether gulp-sourcemap and other plugins related with this issue.

[Atulin]

A minimal sample would be Atulin/Ogma repo, gulpfile from the root and files from Ogma3/wwwroot.

I did try it with the plugin this repo is a rewrite of and encountered the same issue. One of the reasons I decided to give your project a shot, actually, hopes of the issue being fixed.

Seeing how both seem to be affected on my end, could it be an issue with Sass? With Gulp itself? Hard to tell, I'd have to consider reporting on all repos that look like they might be involved.

[Mister-Hope]

Got it. Actually all the plugin is just a wrapper between gulp and sass.

The glob issue you are talking about, is likely to be a gulp side issue. gulp.src and gulp.watch handle the files it reads or watch, and should give exactly the same result in your two cases. My plugin even do not care about your filea path and contents, I just pass them to sass and resolve the url to make sure they look right in sourcemap.

If your issue do exist after removing gulp-sourcemap and all other plugins,(I suggest you try it) it's likely to be a gulp issue, because if gulp does not have any issue, it should exactly pass the same content to my plugin, and there is no way my plugin or sass can behave differently.

If you found the issue disappear without other plugin, the build time increase may actully from them.

[Mister-Hope]

I will close this issue becase I can't do anything now. Feel free to reopen it if you found something new.

[Atulin]

What made me think that it's SASS or Gulp-SASS issue, is that I can safely use /**/ with JS and TS without any such issues occurring.

[Atulin]

I did remove everything but sass, gulp.dest and gulp.src from the pipeline, and the issue still seems to occur. Looks like I need to raise an issue on the Gulp repo, and not have it resolved lol

[Atulin]

Well, supposedly not a Gulp issue: https://github.com/gulpjs/gulp/issues/2549

Time to raise an issue on the SASS repo.

[Mister-Hope]

Since, my code works well, a more detailed guess is that some syntax in your code is causing this issue.

I think you should try to split your code to serveral part and try to found out what's causing this. Do not depend on we maintainers. We would prefer a minimal reproduction,(tiny and reproductable)

[Atulin]

Here's a minimal sample, ripped straight from my main repo: https://github.com/Atulin/gulp-sample

I did experiment some more, and it does seem like it's the sass() being piped that causes the issue. Watching files itself and throwing them around causes no performance degradation.

[Atulin]

Worst case scenario, since the gulpfile is just regular JS, I'll simply write some function to generate those specific globs on demand ¯\_(ツ)_/¯

[kevinramharak]

@Atulin Your sample does a lot more than just sass. Have you tried it with only sass in the pipeline (no sourcemaps)