gulpfile.ts 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import path from 'path'
  2. import chalk from 'chalk'
  3. import { dest, parallel, series, src } from 'gulp'
  4. import gulpSass from 'gulp-sass'
  5. import dartSass from 'sass'
  6. import autoprefixer from 'gulp-autoprefixer'
  7. import cleanCSS from 'gulp-clean-css'
  8. import rename from 'gulp-rename'
  9. import consola from 'consola'
  10. import { epOutput } from '@element-plus/build-utils'
  11. const distFolder = path.resolve(__dirname, 'dist')
  12. const distBundle = path.resolve(epOutput, 'theme-chalk')
  13. /**
  14. * compile theme-chalk scss & minify
  15. * not use sass.sync().on('error', sass.logError) to throw exception
  16. * @returns
  17. */
  18. function buildThemeChalk() {
  19. const sass = gulpSass(dartSass)
  20. const noElPrefixFile = /(index|base|display)/
  21. return src(path.resolve(__dirname, 'src/*.scss'))
  22. .pipe(sass.sync())
  23. .pipe(autoprefixer({ cascade: false }))
  24. .pipe(
  25. cleanCSS({}, (details) => {
  26. consola.success(
  27. `${chalk.cyan(details.name)}: ${chalk.yellow(
  28. details.stats.originalSize / 1000
  29. )} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
  30. )
  31. })
  32. )
  33. .pipe(
  34. rename((path) => {
  35. if (!noElPrefixFile.test(path.basename)) {
  36. path.basename = `el-${path.basename}`
  37. }
  38. })
  39. )
  40. .pipe(dest(distFolder))
  41. }
  42. /**
  43. * Build dark Css Vars
  44. * @returns
  45. */
  46. function buildDarkCssVars() {
  47. const sass = gulpSass(dartSass)
  48. return src(path.resolve(__dirname, 'src/dark/css-vars.scss'))
  49. .pipe(sass.sync())
  50. .pipe(autoprefixer({ cascade: false }))
  51. .pipe(
  52. cleanCSS({}, (details) => {
  53. consola.success(
  54. `${chalk.cyan(details.name)}: ${chalk.yellow(
  55. details.stats.originalSize / 1000
  56. )} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
  57. )
  58. })
  59. )
  60. .pipe(dest(`${distFolder}/dark`))
  61. }
  62. /**
  63. * copy from packages/theme-chalk/dist to dist/element-plus/theme-chalk
  64. */
  65. export function copyThemeChalkBundle() {
  66. return src(`${distFolder}/**`).pipe(dest(distBundle))
  67. }
  68. /**
  69. * copy source file to packages
  70. */
  71. export function copyThemeChalkSource() {
  72. return src(path.resolve(__dirname, 'src/**')).pipe(
  73. dest(path.resolve(distBundle, 'src'))
  74. )
  75. }
  76. export const build = parallel(
  77. copyThemeChalkSource,
  78. series(buildThemeChalk, buildDarkCssVars, copyThemeChalkBundle)
  79. )
  80. export default build