feat: support style loading on demand

Author: ProfBramble

gulpfile.js

@@ -1,7 +1,13 @@
-const { src, dest, parallel } = require('gulp');
+const { src, dest, parallel, series } = require('gulp');
 const through = require('through2');
 const sass = require('gulp-sass');
 const concat = require('gulp-concat');
+const del = require('del');
+const ts = require('gulp-typescript');
+const cleanCSS = require('gulp-clean-css');
+const rename = require('gulp-rename');
+// const tsProject = ts.createProject('./tsconfig.build.json');
+
 function outputStyleTask() {
   return src(['src/components/**/*.scss'])
     .pipe(
@@ -13,8 +19,11 @@ function outputStyleTask() {
     )
     .on('data', data => {
       convertStyles(data);
+      jsForCss(data);
+      jsForScss(data);
     });
 }
+
 function convertStyles(data) {
   return src(['src/components/' + String(data) + '/*.scss'])
     .pipe(dest('lib/' + String(data) + '/style/'))
@@ -28,11 +37,27 @@ function globalSass() {
     .pipe(concat('index.scss'))
     .pipe(dest('lib/style'));
 }
-
+async function clean(cb) {
+  await del(['lib']);
+  await cb();
+}
 function globalCss() {
-  return src('src/components/**/*.scss')
+  return src('lib/**/*.scss')
     .pipe(concat('index.css'))
     .pipe(sass())
+    .on('error', sass.logError)
+    .pipe(cleanCSS({ compatibility: 'ie11' }))
     .pipe(dest('lib/style'));
 }
-exports.default = parallel(outputStyleTask, globalCss, globalSass);
+function jsForScss(data) {
+  return src('src/index.tsx')
+    .pipe(ts({ declaration: true, target: 'ES5' }))
+    .pipe(dest('lib/' + String(data) + '/style/'));
+}
+function jsForCss(data) {
+  return src('src/index.tsx')
+    .pipe(rename('style.tsx'))
+    .pipe(ts({ target: 'ES5' }))
+    .pipe(dest('lib/' + String(data) + '/style/'));
+}
+exports.default = series(clean, parallel(outputStyleTask, globalSass), globalCss);

package.json

@@ -11,7 +11,7 @@
     "increase-memory-limit": "cross-env LIMIT=8096 increase-memory-limit",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "build-storybook": "export NODE_ENV='production' && build-storybook -c .storybook -o dist",
-    "compile": "rm -rf lib && npm run build-ts && npm run build-css",
+    "compile": "npm run build-css && npm run build-ts",
     "build-ts": "tsc -p tsconfig.build.json",
     "release": "./scripts/release.sh",
     "deploy-storybook": "storybook-to-ghpages",
@@ -96,6 +96,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^3.1.0",
     "cz-conventional-changelog": "^3.0.2",
+    "del": "^5.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^5.16.0",
@@ -111,9 +112,12 @@
     "eslint-plugin-standard": "^4.0.0",
     "file-loader": "^6.0.0",
     "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
     "gulp-eslint": "^6.0.0",
+    "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.1.0",
+    "gulp-typescript": "^6.0.0-alpha.1",
     "husky": "^1.2.0",
     "increase-memory-limit": "^1.0.7",
     "jest": "^24.9.0",

src/index.tsx

@@ -0,0 +1 @@
+import './index.css'; // 此文件用于适配babel插件按需导入样式,勿改