iview 切换主题集成到项目

iview 是很不错的ui控件库，从第一版本发出后，我就一直在跟进并多次在项目中使用，不过我从来没有用过iview的修改主题，而是写一套样式，直接覆盖

前几天iview升级到4.0了，字体，间距等发生了变化，不得已，我才去看看iview的主题修改[https://www.iviewui.com/docs/guide/theme]，

简单来说，就是几个命令：

npm install iview-theme -g     //全局安装
iview-theme init my-theme   // 初始化主题
//修改主题  custom.less  
@font-size-base 14px 改 12px
cd my-theme //进入主题目录
iview-theme build -o dist/   //编译到指定目录
//main.js 引入主题
import '../my-theme/dist/iview.css';

看似很简单，但是每次修改的时候都需要走这么多步骤，才能看效果，我就决定不合理。于是乎，我想把它集成到项目中

过程还算顺利，直接上结果吧：

npm install iview-theme -g     //全局安装
iview-theme init my-theme   // 初始化主题
//修改主题  custom.less  
@font-size-base 14px 改 12px
//上面的几个步骤无法省略

项目目录结构

-rootdir
  -mock
  -public
  -shell
    -buildTheme.js
  -src
  -theme
    -theme   //初始化的主题目录
    -theme_dist //编译后的主题目录
  -package.json

以下为集成步骤

// 在项目中安装 iview-theme
cd yourprojectdir
 npm install iview-theme -D
// 安装 npm run all
npm install npm-run-all -D
//package.json scripts 增加
"buildTheme": "node ./shell/buildTheme.js",  //执行主题编译
"buildForThem": "npm-run-all -l -p -s buildTheme build", //编译主题并打包项目
"startForTheme": "npm-run-all -l -p -s buildTheme serve",//编译主题并启动项目

buildTheme.js 中的内容 ,这是我从iview-theme中复制出来修改的

const gulp = require('gulp')
const cleanCSS = require('gulp-clean-css')
const less = require('gulp-less')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')
const series = require('run-sequence').use(gulp)
const path = require('path')
const ora = require('ora')

const process = require('process');
var output = path.join(process.cwd(), "theme", "theme_dist")
process.chdir(path.join(process.cwd(), "theme", "theme"));
console.log(process.cwd())

function build(output) {
    console.log("开始编译主题")
    // 编译less
    console.log("编译less...")
    const spinner = ora('compiling less').start()
    gulp.task('css', function () {
        gulp.src('./index.less')
            .pipe(less())
            .pipe(autoprefixer({
                browsers: ['last 2 versions', 'ie > 8']
            }))
            .pipe(cleanCSS())
            .pipe(rename('iview.css'))
            .pipe(gulp.dest(output))
            .on('err', err => {
                console.log("编译less失败")
                console.log(err);
                spinner.failed(err)
            })
            .on('end', () => {
                console.log("编译less成功")
                spinner.succeed()
            })
    })

    // 拷贝字体文件
    console.log("拷贝字体文件...")
    const spinner2 = ora('copying fonts').start()
    gulp.task('fonts', function () {
        gulp.src('./common/iconfont/fonts/*.*')
            .pipe(gulp.dest(path.resolve(output, './fonts')))
            .on('err', err => {
                console.log("拷贝字体文件失败")
                console.log(err);
                spinner.failed(err)
            })
            .on('end', () => {
                console.log("拷贝字体文件成功")
                spinner2.succeed()
            })
    })

    series('css', 'fonts')
}

build(output); //执行主题打包

main.js

import ViewUI from 'view-design'; //引入iview 4.x
import 'view-design/dist/styles/iview.css'; //引入iview.css
import '../theme/theme_dist/iview.css'; //引入主题

启动或编译项目

npm run buildForTheme //编译项目
npm run startFormTheme //启动项目