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

首先把官方指导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有什么变化吧！！！