element-plus/packages/theme-chalk/gulpfile.ts
云游君 6f9d55471b
docs: add dark mode usage & compile dark/css-vars.css (#7513)
* docs: add dark mode usage & compile dark/css-vars.css

* docs: add example link
2022-05-05 19:56:10 +08:00

89 lines
2.3 KiB
TypeScript

import path from 'path'
import chalk from 'chalk'
import { dest, parallel, series, src } from 'gulp'
import gulpSass from 'gulp-sass'
import dartSass from 'sass'
import autoprefixer from 'gulp-autoprefixer'
import cleanCSS from 'gulp-clean-css'
import rename from 'gulp-rename'
import consola from 'consola'
import { epOutput } from '@element-plus/build-utils'
const distFolder = path.resolve(__dirname, 'dist')
const distBundle = path.resolve(epOutput, 'theme-chalk')
/**
* compile theme-chalk scss & minify
* not use sass.sync().on('error', sass.logError) to throw exception
* @returns
*/
function buildThemeChalk() {
const sass = gulpSass(dartSass)
const noElPrefixFile = /(index|base|display)/
return src(path.resolve(__dirname, 'src/*.scss'))
.pipe(sass.sync())
.pipe(autoprefixer({ cascade: false }))
.pipe(
cleanCSS({}, (details) => {
consola.success(
`${chalk.cyan(details.name)}: ${chalk.yellow(
details.stats.originalSize / 1000
)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
)
})
)
.pipe(
rename((path) => {
if (!noElPrefixFile.test(path.basename)) {
path.basename = `el-${path.basename}`
}
})
)
.pipe(dest(distFolder))
}
/**
* Build dark Css Vars
* @returns
*/
function buildDarkCssVars() {
const sass = gulpSass(dartSass)
return src(path.resolve(__dirname, 'src/dark/css-vars.scss'))
.pipe(sass.sync())
.pipe(autoprefixer({ cascade: false }))
.pipe(
cleanCSS({}, (details) => {
consola.success(
`${chalk.cyan(details.name)}: ${chalk.yellow(
details.stats.originalSize / 1000
)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
)
})
)
.pipe(dest(`${distFolder}/dark`))
}
/**
* copy from packages/theme-chalk/dist to dist/element-plus/theme-chalk
*/
export function copyThemeChalkBundle() {
return src(`${distFolder}/**`).pipe(dest(distBundle))
}
/**
* copy source file to packages
*/
export function copyThemeChalkSource() {
return src(path.resolve(__dirname, 'src/**')).pipe(
dest(path.resolve(distBundle, 'src'))
)
}
export const build = parallel(
copyThemeChalkSource,
series(buildThemeChalk, buildDarkCssVars, copyThemeChalkBundle)
)
export default build