gulp命令小记(换肤)-匹配对应代码并删除

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

此篇博客介绍了如何使用Gulp构建工具，通过Sass同步编译、PostCSS删除不必要的样式并压缩CSS。重点讲解了如何利用gulp-css-wrap包裹自定义主题，适用于前端开发者进行项目定制。

const gulp = require('gulp')
const path = require('path')
const cssWrap = require('gulp-css-wrap')
const sass = require('gulp-sass')(require('sass'))
const postcss = require('gulp-postcss')
// 匹配对应代码并删除
const removeStyle = require('./postcss-remove-style.js')({
  '@font-face': '*',
  html: '*',
})
const cleanCSS = require('gulp-clean-css')

function build() {
  return gulp
    .src(path.resolve('./src/assets/styles/index.scss'))
    .pipe(sass.sync())
    .pipe(postcss([removeStyle]))
    .pipe(cleanCSS())
    .pipe(
      cssWrap({
        selector: '.custom-theme',
      }),
    )
    .pipe(gulp.dest('src/assets/theme/custom-theme'))
}

exports.build = build