Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
4 tasks done
Atulin opened this issue Mar 4, 2021 · 4 comments
Closed
4 tasks done

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

Atulin opened this issue Mar 4, 2021 · 4 comments

Comments

@Atulin
Copy link

Atulin commented Mar 4, 2021

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

  • use the search bar at the top of the page to search this repository for similar issues or discussions that have already been opened.
  • if you are looking for help from the gulp team or community, open a discussion.
  • if you think there is a problem with the plugin you're using, open a discussion.
  • 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

@phated
Copy link
Member

phated commented Mar 6, 2021

We don't manage gulp-sass.

@phated phated closed this as completed Mar 6, 2021
@Atulin

This comment was marked as abuse.

@phated
Copy link
Member

phated commented Mar 6, 2021

@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

This comment was marked as abuse.

@gulpjs gulpjs locked and limited conversation to collaborators Mar 6, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants