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-cssnpm install gulp-clean-css//3.安装gulp-css-wrapnpm install gulp-css-wrap

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

// gulpfile.jsvar 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