当前位置: 首页 > 工具软件 > api-wrap > 使用案例 >

gulp-css-wrap工具的使用之----[批量为css文件扩展命名空间]

王轶
2023-12-01

首先把官方指导API挂上

gulp入门指南
gulp-css-wrap

在研究elementUI在线切换皮肤功能时,看到大佬经验中都用到了gulp-css-wrap(批量为css文件扩展命名空间)工具。
实现思路:

1.将所有皮肤样式都通过主入口import进来
2.通过点击样式切换事件来改变body的class名

那么问题来了,所有样式都需要增加一个class拓展,手动做?神器来了,gulp-css-wrap成就你。

1.搭建gulp环境

//1.安装gulp
npm install gulp

//2.安装gulp-clean-css
npm install gulp-clean-css

//3.安装gulp-css-wrap
npm install gulp-css-wrap

2.在项目根目录下创建一个名为 gulpfile.js 的文件:

// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
    return gulp.src(path.resolve('./theme/index.css'))
    /* 找需要添加命名空间的css文件,支持正则表达式 */
        .pipe(cssWrap({
            selector: '.custom-1b1e24' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/1b1e24')) /* 存放的目录 */
})

3.执行gulp输出

//命令行
gulp css-wrap

完事!按照路径看看生成出来的css有什么变化吧!!!

 类似资料: