Vue的elementUI实现自定义主题（二）-- gulp-css-wrap（附截图详细步骤）

依旧先上官方链接 https://www.gulpjs.com.cn/docs/getting-started/

安装

这里比较清楚，按照入门指南来

1. 全局安装 gulp：

npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

npm install --save-dev gulp

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

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4. 运行 gulp：

gulp

效果图如下，博主使用的是上次生成主题的项目，这里项目并无特殊限制

打包主题

参考了gulb中文网，在一个任务中使用多个文件来源，代码如下：

// 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 css = gulp.src(path.resolve('./theme/index.css'))
    /* 找需要添加命名空间的css文件，支持正则表达式 */
        .pipe(cssWrap({ selector: '.custom-FF0033' /* 添加的命名空间 */ }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('assets/theme/FF0033'))
    /* 存放的目录 */
    var font = gulp.src('./theme/fonts/**')
        .pipe(gulp.dest('assets/theme/FF0033/fonts'));
    return merge(css, font)
});

注：在运行代码前需要安装

npm install --save-dev gulp merge-stream    // 安装merge-stream
npm install gulp-clean-css   //安装gulp-clean-css
npm install gulp-css-wrap  //安装gulp-css-wrap

运行结果如下图。