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

前言：
我们要对css文件的所有选择器添加命名空间
如我们给所有的加上.custom-1b1e24
原css文件：
.header{height:100px;}
.content{color:#fff;}
=>输出
.custom-1b1e24 .header{height:100px;}
.custom-1b1e24 .content{color:#fff;}

gulp使用指南
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文件，此后又不会再用到这个模块，完全可以不用引入此到自己的项目中。
对，我来打广告了。
你们可以去run我的代码然后本地运行反正我们最终也只是要生成的css而已[逃

o(*≧▽≦)ツ

祭上我github：https://github.com/EmilyYoung71415/tool-gulpcsswrap