gulp 批量添加類名 在一個任務中使用多個文件來源

1.首先安裝環境

1.安裝gulp： npm install gulp

2.安裝gulp-clean-css npm install gulp-clean-css

3.安裝gulp-css-wrap npm install gulp-css-wrap

4.npm i gulp merge-stream //在一個任務中使用多個文件來源

 

而後再項目根目錄新建gulpfile.js文件,寫入如下代碼

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
var merge = require('merge-stream');

gulp.task('css-wrap', function () {
    var light = gulp.src(path.resolve('./src/assets/scss/theme/light/index.css'))
    /* 找須要添加命名空間的css文件，支持正則表達式 */
    .pipe(cssWrap({
        selector: '.theme-light' /* 添加的命名空間 */
    }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('./src/assets/scss/theme/css/light')); /* 存放的目錄 */

    var dark = gulp.src(path.resolve('./src/assets/scss/theme/dark/index.css'))
    /* 找須要添加命名空間的css文件，支持正則表達式 */
    .pipe(cssWrap({
        selector: '.theme-dark' /* 添加的命名空間 */
    }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('./src/assets/scss/theme/css/dark')); /* 存放的目錄 */

    return merge(light,dark);
})

　　而後在命令行運行：gulp css-wrap  就生成了添加過類名的css文件啦