使用 Gulp、PostCSS 和 PurgeCSS 缩小 CSS答案

【问题标题】：Minifiy SASS using Gulp, PostCSS and PurgeCSS使用 Gulp、PostCSS 和 PurgeCSS 缩小 CSS
【发布时间】：2019-09-09 16:01:31
【问题描述】：

尽管我的 sass gulptask，我的 .min.css 文件仍然是 148kb 高...有谁知道我可以改变我的任务以进一步缩小我的 .min.css 吗？你们有没有使用其他提供更好压缩的包？

gulp.task('sass', done => {
    gulp.src(src + 'assets/sass/**/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: ['node_modules']
        }))
        .pipe(postcss(
            [
                tailwindcss(src + 'tailwind.config.js'),
                cssnano({
                    preset: 'default',
                }),
                purgecss({
                    content: [src + '/**/*.html'],
                    extractors: [{
                        extractor: TailwindExtractor,
                        extensions: ['html']
                    }]
                }),
                autoprefixer(),
            ],
        ))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(dist + 'assets/css'))
        .pipe(browserSync.stream());
    done();
});

【问题讨论】：

没有压缩的文件有多大？
@TheDancingCode 440KB...

标签： css sass gulp postcss

【解决方案1】：

我在 Full Stack Radio 播客上听到 Adam Wathan 和 Jeffrey Way 谈论 Brotli。它似乎将 Tailwind CSS 压缩到相当小的数量。 TBH，我自己从未使用过它。

在这里查看：https://www.npmjs.com/package/brotli

【讨论】：