chore(build): remove useless dependencies & use ts for gulp & add progressbar (#2792)

* refactor(theme-chalk): upgrade to ts & renive gulp-mincss with gulp-clean-css

* feat(build): add clean-css colorful log && add progressbar for webpack

package.json

@@ -19,7 +19,7 @@
     "build:utils": "cross-env BABEL_ENV=utils babel packages/utils --extensions .ts --out-dir lib/utils",
     "build:locale": "cross-env BABEL_ENV=utils babel packages/locale --extensions .ts --out-dir lib/locale",
     "build:locale-umd": "node ./build/build-locale.js",
-    "build:theme": "rimraf packages/theme-chalk/lib && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk && rimraf packages/theme-chalk/lib",
+    "build:theme": "cd packages/theme-chalk && yarn clean && yarn build",
     "build:helper": "node build/build-helper.js",
     "build:indices": "node build/build-indices.js",
     "format": "yarn format:scss",
@@ -63,7 +63,6 @@
     "chalk": "^4.1.0",
     "clipboard-copy": "^4.0.1",
     "components-helper": "^1.0.2",
-    "cp-cli": "^2.0.0",
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
     "css-minimizer-webpack-plugin": "^1.1.5",
@@ -87,6 +86,7 @@
     "markdown-it-container": "^3.0.0",
     "mini-css-extract-plugin": "^0.11.2",
     "ora": "^5.4.1",
+    "progress-bar-webpack-plugin": "^2.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.28.2",
     "rollup-plugin-css-only": "^2.1.0",
@@ -101,6 +101,7 @@
     "transliteration": "^2.1.11",
     "ts-loader": "^8.0.3",
     "ts-morph": "^11.0.3",
+    "ts-node": "^10.1.0",
     "typescript": "^4.0.2",
     "url-loader": "^4.1.0",
     "vue": "3.1.1",

packages/theme-chalk/README.md

@@ -1,33 +1,41 @@
 # element-theme-chalk
+
 > element component chalk theme.
 
-
 ## Installation
+
 ```shell
-npm i element-theme-chalk -S
+npm i element-plus
 ```
 
 ## Usage
 
 Use Sass import
+
 ```css
-@import 'element-theme-chalk';
+@import 'element-plus/lib/theme-chalk/index.scss';
 ```
 
-Or Use webpack
+Or Use vite/webpack
+
 ```javascript
-import 'element-theme-chalk';
+import 'element-plus/lib/theme-chalk/index.css'
 ```
 
 Or
+
 ```html
-<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/lib/index.css">
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"
+/>
 ```
 
-##  Import on demand
+## Import on demand
+
 ```javascript
-import 'element-theme-chalk/lib/input.css';
-import 'element-theme-chalk/lib/select.css';
+import 'element-plus/lib/theme-chalk/input.css'
+import 'element-plus/lib/theme-chalk/select.css'
 
 // ...
 ```

packages/theme-chalk/gulpfile.js

@@ -1,30 +0,0 @@
-'use strict'
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { series, src, dest } = require('gulp')
-const sass = require('gulp-dart-sass')
-const autoprefixer = require('gulp-autoprefixer')
-const cssmin = require('gulp-cssmin')
-const rename = require('gulp-rename')
-
-const noElPrefixFile = /(index|base|display)/
-
-function compile() {
-  return src('./src/*.scss')
-    .pipe(sass.sync())
-    .pipe(autoprefixer({ cascade: false }))
-    .pipe(cssmin())
-    .pipe(rename(function (path) {
-      if(!noElPrefixFile.test(path.basename)) {
-        path.basename = `el-${path.basename}`
-      }
-    }))
-    .pipe(dest('./lib'))
-}
-
-function copyfont() {
-  return src('./src/fonts/**')
-    .pipe(cssmin())
-    .pipe(dest('./lib/fonts'))
-}
-
-exports.build = series(compile, copyfont)

packages/theme-chalk/gulpfile.ts

@@ -0,0 +1,58 @@
+import chalk from 'chalk'
+import gulp 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 path from 'path'
+
+const noElPrefixFile = /(index|base|display)/
+
+const sass = gulpSass(dartSass)
+export const distFolder = './lib'
+
+function compile() {
+  return gulp
+    .src('./src/*.scss')
+    .pipe(sass.sync().on('error', sass.logError))
+    .pipe(autoprefixer({ cascade: false }))
+    .pipe(
+      cleanCSS({}, details => {
+        console.log(
+          `${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(gulp.dest(distFolder))
+}
+
+function copyfont() {
+  return gulp
+    .src('./src/fonts/**')
+    .pipe(cleanCSS())
+    .pipe(gulp.dest(`${distFolder}/fonts`))
+}
+
+/**
+ * copy to packages/lib/theme-chalk
+ */
+function copyToLib() {
+  return gulp
+    .src(distFolder + '/**')
+    .pipe(gulp.dest(path.resolve(__dirname, '../../lib/theme-chalk')))
+}
+
+export const build = gulp.series(compile, copyfont, copyToLib)
+
+export default build

packages/theme-chalk/package.json

@@ -1,6 +1,7 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.11.1",
+  "private": "true",
+  "version": "0.0.0",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
@@ -9,11 +10,12 @@
     "src"
   ],
   "scripts": {
+    "clean": "rm -rf lib",
     "build": "gulp build"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ElementUI/theme-chalk.git"
+    "url": "git+https://github.com/element-plus/element-plus.git"
   },
   "keywords": [
     "element",
@@ -22,15 +24,25 @@
   "author": "yi.shyang@ele.me",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ElementUI/theme-chalk/issues"
+    "url": "https://github.com/element-plus/element-plus#issues"
   },
-  "homepage": "https://github.com/ElementUI/theme-chalk#readme",
+  "homepage": "https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/README.md",
   "devDependencies": {
+    "@types/gulp": "^4.0.9",
+    "@types/gulp-autoprefixer": "^0.0.33",
+    "@types/gulp-clean-css": "^4.3.0",
+    "@types/gulp-rename": "^2.0.1",
+    "@types/gulp-sass": "^5.0.0",
+    "@types/sass": "^1.16.1",
+    "chalk": "^4.1.2",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^7.0.1",
-    "gulp-cssmin": "^0.2.0",
-    "gulp-dart-sass": "^1.0.2",
-    "gulp-rename": "^2.0.0"
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.0.0",
+    "sass": "^1.37.0",
+    "ts-node": "^10.1.0",
+    "typescript": "^4.3.5"
   },
   "dependencies": {}
 }

packages/theme-chalk/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

website/webpack.config.js

@@ -5,6 +5,7 @@ const { VueLoaderPlugin } = require('vue-loader')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
@@ -81,6 +82,7 @@ const config = {
       favicon: './website/favicon.ico',
     }),
     // new BundleAnalyzerPlugin(),
+    new ProgressBarPlugin(),
   ],
   devServer: {
     inline: true,
@@ -94,9 +96,7 @@ const config = {
   },
   optimization: {
     minimize: true,
-    minimizer: [
-      new CssMinimizerPlugin(),
-    ],
+    minimizer: [new CssMinimizerPlugin()],
   },
 }