使用Gulp,PostCSS和PurgeCSS的Minifiy SASS

时间:2019-04-19 11:06:03

标签: css sass gulp postcss

尽管我遇到了麻烦,但我的.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();
});

1 个答案:

答案 0 :(得分:0)

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

在此处查看:https://www.npmjs.com/package/brotli