SASS compilation with /**/ globs takes progressively more time

Atulin commented 3 years ago

Before you open this issue, please complete the following tasks:

[x] use the search bar at the top of the page to search this repository for similar issues or discussions that have already been opened.
[x] if you are looking for help from the gulp team or community, open a discussion.
[x] if you think there is a problem with the plugin you're using, open a discussion.
[x] if you think there is a bug in our code, open this issue.

What were you expecting to happen?

I expect using globs like /static/css/**/*.sass for a watcher would result in progressively faster compilation times with each trigger

What actually happened?

They become progressively longer

Please give us a sample of your gulpfile

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

results in

[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

while

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`,
    ],
}

results in

[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

with the following tasks

// 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 following packages

{
        "@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"
}

Please provide the following information:

OS & version [e.g. MacOS Catalina 10.15.4]:
node version (run node -v): 14.10.1
npm version (run npm -v): 7.5.4
gulp version (run gulp -v): 4.0.2 (local) 2.3.0 (CLI)

Additional information

Relevant issue: https://github.com/Mister-Hope/gulp-sass/issues/11
Sample ripped from my affected project: https://github.com/Atulin/gulp-sample

phated commented 3 years ago

We don't manage gulp-sass.

Atulin commented 3 years ago

Well it's not an issue with gulp-sass. Let me give you a link to the relevant issue again, you might've missed it or forgotten to click it: https://github.com/Mister-Hope/gulp-sass/issues/11

Mind you, the issue exists no matter which implementation of gulp-sass I use.

phated commented 3 years ago

@Atulin if the problem doesn't exist when not using the gulp-sass plugin, then it's a problem with that plugin or your setup... Neither of which we are responsible for.

Atulin commented 3 years ago

So it's a problem with two independently-developed gulp-sass plugins, where each of them is but a thin wrapper around SASS? I guess it's, time to raise an issue on the SASS repo as well

gulpjs / gulp