您现在的位置：首页 >> 前端 >> 内容

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

时间：2017/11/22 15:11:55 点击：

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

前言：

我们要对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')) /* 存放的目录 */
})