build: fix Load missing styles on demand

fix Load missing styles on demand

Author: zhangtengjin

gulpfile.js

@@ -1,4 +1,4 @@
-const { src, dest, parallel, series } = require('gulp');
+const { src, dest, parallel, series, task } = require('gulp');
 const fs = require('fs');
 const through = require('through2');
 const sass = require('gulp-sass');
@@ -8,7 +8,87 @@ const ts = require('gulp-typescript');
 const cleanCSS = require('gulp-clean-css');
 const rename = require('gulp-rename');
 const babel = require('gulp-babel');
+const mergeStream = require('merge-stream');
 
+function difference(array, arrCompare) {
+  return array.concat(arrCompare).filter(function (v, i, arr) {
+    return arr.indexOf(v) === arr.lastIndexOf(v);
+  });
+}
+function unique (arr) {
+  return Array.from(new Set(arr));
+}
+/**
+ * existStyleCatalogName ---- The name of the component catalog where the style exists
+ * componentCatalogName ---- All component catalog names
+ */
+let existStyleCatalogName = [];
+let componentCatalogName = [];
+
+function writeStyleFile(catalogArr) {
+  for (let catalogName of catalogArr) {
+    fs.writeFile(`src/components/${catalogName}/style.scss`, "", { 'flag': 'wx' }, (err) => {
+      if (err) {
+        throw err;
+      }
+    })
+  }
+}
+
+function delStyleFile(catalogArr) {
+  for (let catalogName of catalogArr) {
+    del([`src/components/${catalogName}/style.scss`])
+  }
+}
+/**
+ * traverse files
+ * @param isDelete Distinguish between write and delete style file
+ */
+function traverseExistStyleFile(isDelete) {
+  return src(['src/components/*/*.scss'])
+    .pipe(through.obj(function (file, enc, callback) {
+      isExist = Boolean(file.contents.toString())
+      if (isExist) {
+        existStyleCatalogName.push(file.relative.split('/')[0]);
+      }
+      callback();
+    })).on('end', function () {
+      const noStyleComp = difference(unique(componentCatalogName), unique(existStyleCatalogName));
+      if (isDelete) {
+        delStyleFile(noStyleComp)
+        console.log('delStyleFile exec end')
+      } else {
+        writeStyleFile(noStyleComp)
+        console.log('writeStyleFile exec end')
+      }
+    })
+}
+function traverseComponent() {
+  console.warn('Do not edit or modify the source file when the project is compiled !!!')
+  return src(['src/components/*/', '!src/components/utils/']) // exclude utils/
+    .pipe(through.obj(function (file, enc, callback) {
+      componentCatalogName.push(file.relative.split('/')[0]);
+      callback();
+    })).on('end', function () {
+      console.log('traverseComponent exec end ~')
+    })
+}
+
+function mergeTraverseStream (type) {
+  return mergeStream(traverseComponent(), traverseExistStyleFile(type))
+}
+
+function generateStyleFile () {
+  return mergeTraverseStream(false)
+}
+
+function cleanUselessStyleFile() {
+  return mergeTraverseStream(true)
+}
+/**
+ * TODO optimize outputStyleTask
+ * outputStyleTask Function Time-consuming to execute..
+ */
 function outputStyleTask() {
   fs.writeFile('src/index.tsx',"import './style.scss';",{'flag':'a'},(err)=>{
     if(err){
@@ -44,7 +124,8 @@ function globalSass() {
     .pipe(dest('lib/style'));
 }
 async function clean(cb) {
-  await del(['lib','src/index.tsx']);
+  await cleanUselessStyleFile()
+  await del(['lib', 'src/index.tsx']);
   await cb();
 }
 function globalCss() {
@@ -67,4 +148,4 @@ function jsForCss(data) {
     .pipe(babel())
     .pipe(dest('lib/' + String(data) + '/style/'));
 }
-exports.default = series(clean, parallel(outputStyleTask, globalSass), globalCss);
+exports.default = series(clean, generateStyleFile, parallel(outputStyleTask, globalSass), globalCss, cleanUselessStyleFile);

package.json

@@ -12,7 +12,7 @@
     "storybook": "start-storybook -p 9001 -c .storybook",
     "build-storybook": "export NODE_ENV='production' && build-storybook -c .storybook -o dist",
     "compile": "npm run build-css && npm run build-ts",
-    "build-ts": "tsc -p tsconfig.build.json",
+    "build-ts": "tsc -p tsconcfig.build.json",
     "release": "./scripts/release.sh",
     "deploy-storybook": "storybook-to-ghpages",
     "deploy": "./scripts/deploy.sh",
@@ -131,6 +131,7 @@
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "lint-md": "^0.1.1",
+    "merge-stream": "^2.0.0",
     "node-sass": "^4.12.0",
     "react-docgen-typescript-loader": "^3.1.1",
     "react-icons": "^3.10.0",