Gulp - Fail gulp process if the CSS size is bigger than 50 kb

Question

In my project, I have SASS files which are converted by Gulp to CSS files before deployment. What I want to do is to check the size of each compiled CSS file before deployment and fail the process if any of the files is bigger than 50kb.

What did I do?

I managed to output the size of each file, but I am not able to fail the Gulp process if the file exceeds 50kb. You can see my Gulp task below:

gulp.task('check-CSS-size', () => {
    const s = size({showFiles: true, pretty: true});

    return gulp.src('stylesheets/**/*.css')
        .pipe(s)
        .pipe(gulpIf('if s size is bigger than 50kb ', gulpFail(`${s} is bigger than 50kb`)));
});

Thank you!

PS: I am new to Gulp.

Answer 1

I think this package doesn't allow to do this, it only return total size of files, doing a quick search doesn't seem exists a package that do what you want.

So I think the best is to do it yourself checking the package code or forking it!

Answer 2

Looks like you have all the right pieces in place. Just need to replace your pseudo code statement

'if s size is bigger than 50kb'

with a real javascript expression

(s > 50000)

The gulp-size package has a prettySize parameter with is set to true by default. To get your expression to work you may need to set that parameter to false to get a clean number to compare.