chore: optimizing package size

Author: anlyyao

.eslintignore

@@ -2,4 +2,5 @@
 src/common/lib
 miniprogram_dist
 node_modules
-common
+common
+_example

.prettierignore

@@ -1,2 +1,3 @@
 **/*.md
 src/_common
+_example

example/components/demo-block/index.less

@@ -1,4 +1,4 @@
-@import '../../../src/common/index.less';
+@import '../../../src/common/style/index.less';
 
 .demo-block {
   margin: @spacer-4 0 0;

package.json

@@ -66,6 +66,7 @@
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.2",
     "cz-conventional-changelog": "^3.3.0",
+    "dayjs": "^1.10.7",
     "del": "^6.1.1",
     "eslint": "^7.0.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -76,14 +77,19 @@
     "gray-matter": "^4.0.3",
     "gulp": "^4.0.2",
     "gulp-changed": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-htmlmin": "^5.0.1",
     "gulp-if": "^3.0.0",
+    "gulp-insert": "^0.5.0",
+    "gulp-jsonminify": "^1.1.0",
     "gulp-less": "^5.0.0",
     "gulp-mp-npm": "^1.9.7",
     "gulp-plumber": "^1.2.1",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.0.0",
     "gulp-replace-task": "^2.0.1",
     "gulp-sourcemaps": "^3.0.0",
+    "gulp-terser": "^2.1.0",
     "gulp-typescript": "^6.0.0-alpha.1",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
@@ -92,6 +98,7 @@
     "less": "^4.1.1",
     "lint-staged": "^10.0.0-1",
     "lodash": "^4.17.21",
+    "merge2": "^1.4.1",
     "miniprogram-api-typings": "^3.4.6",
     "miniprogram-automator": "^0.10.0",
     "miniprogram-simulate": "^1.6.0",
@@ -104,6 +111,7 @@
     "tdesign-icons-view": "^0.3.2",
     "tdesign-publish-cli": "^0.0.12",
     "tdesign-site-components": "^0.15.2",
+    "tinycolor2": "^1.4.2",
     "typescript": "~4.7.2",
     "vite": "^2.7.6",
     "vite-plugin-tdoc": "^2.0.1",
@@ -122,9 +130,5 @@
     "{src,example}/**/*.{js,ts}": [
       "eslint --fix"
     ]
-  },
-  "dependencies": {
-    "dayjs": "^1.10.7",
-    "tinycolor2": "^1.4.2"
   }
 }

script/gulpfile.base.js

@@ -1,18 +1,27 @@
+const path = require('path');
 const gulp = require('gulp');
 const del = require('del');
 const replace = require('gulp-replace');
 const plumber = require('gulp-plumber');
 const changed = require('gulp-changed');
 const gulpTs = require('gulp-typescript');
+const merge2 = require('merge2');
 const sourcemaps = require('gulp-sourcemaps');
 const gulpLess = require('gulp-less');
+const cssmin = require('gulp-clean-css');
+const gulpInsert = require('gulp-insert');
+const jsmin = require('gulp-terser');
+const jsonmin = require('gulp-jsonminify');
+const wxmlmin = require('gulp-htmlmin');
 const rename = require('gulp-rename');
 const replaceTask = require('gulp-replace-task');
 const mpNpm = require('gulp-mp-npm');
 const gulpIf = require('gulp-if');
 
 const config = require('./config');
 
+const baseCssPath = path.resolve(__dirname, '../src/common/style/index.wxss');
+
 const isProduction = process.env.NODE_ENV === 'production';
 
 // set displayName
@@ -35,20 +44,28 @@ const generateConfigReplaceTask = (replaceConfig, options = {}) => {
   });
 };
 
+const isComponentFolder = (dir) => {
+  return dir === 'src';
+};
+
 /* return gulpfile base tasks */
 module.exports = (src, dist, moduleName) => {
   const tsProject = gulpTs.createProject('tsconfig.json', {
     declaration: true,
     removeComments: isProduction,
+    importHelpers: true,
+    noEmitHelpers: true,
   });
 
   // options
   const ignore = ['**/__test__', '**/__test__/**', '**/_example/**', '**/_common/**'];
   const srcOptions = { base: src, ignore };
   const watchOptions = { events: ['add', 'change'] };
   const gulpErrorPath = 'example/utils/gulpError.js';
+
   // 文件匹配路径
   const globs = {
+    wxml: `${src}/**/*.wxml`, // 匹配 wxml 文件
     ts: `${src}/**/*.ts`, // 匹配 ts 文件
     js: `${src}/**/*.js`, // 匹配 js 文件
     wxs: `${src}/**/*.wxs`, // 匹配 wxs 文件
@@ -57,6 +74,7 @@ module.exports = (src, dist, moduleName) => {
     wxss: `${src}/**/*.wxss`, // 匹配 wxss 文件
     md: `${src}/**/*.md`, // 匹配 md 文件
   };
+
   // 匹配需要拷贝的文件
   globs.copy = [
     `${src}/**`,
@@ -66,6 +84,7 @@ module.exports = (src, dist, moduleName) => {
     `!${globs.json}`,
     `!${globs.less}`,
     `!${globs.wxss}`,
+    `!${globs.md}`,
     '!**/_example/**',
   ];
 
@@ -104,11 +123,30 @@ module.exports = (src, dist, moduleName) => {
       .pipe(changed(dist)) // 过滤掉未改变的文件
       .pipe(gulp.dest(dist));
 
+  /** `gulp wxml`
+   * 处理 wxml
+   * */
+  tasks.wxml = () =>
+    gulp
+      .src(globs.wxml, { ...srcOptions, since: since(tasks.wxml) })
+      .pipe(
+        gulpIf(
+          isComponentFolder(src) && isProduction,
+          wxmlmin({
+            removeComments: true,
+            collapseWhitespace: true,
+            keepClosingSlash: true,
+            caseSensitive: true,
+          }),
+        ),
+      )
+      .pipe(gulp.dest(dist));
+
   /** `gulp ts`
    * 处理ts
    * */
-  tasks.ts = () =>
-    gulp
+  tasks.ts = () => {
+    const tsResult = gulp
       .src(globs.ts, srcOptions)
       .pipe(
         plumber({
@@ -119,10 +157,17 @@ module.exports = (src, dist, moduleName) => {
       )
       .pipe(generateConfigReplaceTask(config, { stringify: true }))
       .pipe(gulpIf(!isProduction, sourcemaps.init()))
-      .pipe(tsProject()) // 编译ts
-      .pipe(mpNpm())
-      .pipe(gulpIf(!isProduction, sourcemaps.write('.')))
-      .pipe(gulp.dest(dist));
+      .pipe(tsProject()); // 编译ts
+
+    return merge2(
+      tsResult.js
+        .pipe(mpNpm())
+        .pipe(gulpIf(isComponentFolder(src) && isProduction, jsmin()))
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest(dist)),
+      tsResult.dts.pipe(gulp.dest(dist)), // 直接输出.d.ts文件
+    );
+  };
 
   /** `gulp js`
    * 处理js
@@ -131,6 +176,7 @@ module.exports = (src, dist, moduleName) => {
     gulp
       .src(globs.js, { ...srcOptions, since: since(tasks.js) })
       .pipe(generateConfigReplaceTask(config, { stringify: true }))
+      .pipe(gulpIf(isComponentFolder(src) && isProduction, jsmin()))
       .pipe(gulp.dest(dist));
 
   /** `gulp wxs`
@@ -145,7 +191,11 @@ module.exports = (src, dist, moduleName) => {
   /** `gulp json`
    * 处理json
    * */
-  tasks.json = () => gulp.src(globs.json, { ...srcOptions, dot: true, since: since(tasks.json) }).pipe(gulp.dest(dist));
+  tasks.json = () =>
+    gulp
+      .src(globs.json, { ...srcOptions, dot: true, since: since(tasks.json) })
+      .pipe(gulpIf(isComponentFolder(src) && isProduction, jsonmin()))
+      .pipe(gulp.dest(dist));
 
   /** `gulp less`
    * 处理less
@@ -164,6 +214,21 @@ module.exports = (src, dist, moduleName) => {
       .pipe(generateConfigReplaceTask(config, { stringify: false }))
       .pipe(gulpIf(!isProduction, sourcemaps.init()))
       .pipe(gulpLess()) // 编译less
+      .pipe(gulpIf(isComponentFolder(src) && isProduction, cssmin()))
+      .pipe(
+        gulpIf(
+          isComponentFolder(src),
+          gulpInsert.transform((contents, file) => {
+            if (!file.path.includes(`src${path.sep}common`)) {
+              const relativePath = path
+                .relative(path.normalize(`${file.path}${path.sep}..`), baseCssPath)
+                .replace(/\\/g, '/');
+              contents = `@import '${relativePath}';${contents}`;
+            }
+            return contents;
+          }),
+        ),
+      )
       .pipe(rename({ extname: '.wxss' }))
       .pipe(gulpIf(!isProduction, sourcemaps.write('.')))
       .pipe(gulp.dest(dist));
@@ -187,14 +252,15 @@ module.exports = (src, dist, moduleName) => {
   tasks.build = gulp.series(
     tasks.clear,
     tasks.resetError,
-    gulp.parallel(tasks.copy, tasks.ts, tasks.js, tasks.wxs, tasks.json, tasks.less, tasks.wxss),
+    gulp.parallel(tasks.copy, tasks.wxml, tasks.ts, tasks.js, tasks.wxs, tasks.json, tasks.less, tasks.wxss),
   );
 
   /** `gulp watch`
    * 监听
    * */
   tasks.watch = () => {
     gulp.watch(globs.copy, watchOptions, tasks.copy);
+    gulp.watch(globs.wxml, watchOptions, tasks.wxml);
     gulp.watch(globs.ts, watchOptions, gulp.series(tasks.resetError, tasks.ts));
     gulp.watch(globs.js, watchOptions, tasks.js);
     gulp.watch(globs.wxs, watchOptions, tasks.wxs);

src/action-sheet/action-sheet.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @action-sheet: ~'@{prefix}-action-sheet';
 

src/avatar-group/avatar-group.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 //组合头像偏移量
 @avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -16rpx);

src/avatar/avatar.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @avatar-bg-color: var(--td-avatar-bg-color, @brand-color-light-active);
 @avatar-content-color: var(--td-avatar-content-color, @brand-color);

src/back-top/back-top.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @backtop: ~'@{prefix}-back-top';
 @back-top-text-font-size: @font-size;

src/badge/badge.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @badge-text-color: var(--td-badge-text-color, @text-color-anti);
 @badge-content-text-color: var(--td-badge-content-text-color, @text-color-primary);

src/button/button.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @button-border-width: var(--td-button-border-width, 4rpx);
 @button-border-radius: var(--td-button-border-radius, @radius-default);

src/calendar/calendar.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @calendar-radius: var(--td-calendar-radius, 24rpx);
 @calendar-bg-color: var(--td-calendar-bg-color, @bg-color-container);

src/cascader/cascader.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @cascader: ~'@{prefix}-cascader';
 

src/cell-group/cell-group.less

@@ -1,5 +1,5 @@
 // @import (css) '../common/index.wxss';
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @cell-group-title-font-size: var(--td-cell-group-title-font-size, 28rpx);
 @cell-group-title-line-height: var(--td-cell-group-title-line-height, 90rpx);

src/cell/cell.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @cell-height: var(--td-cell-height, auto);
 @cell-line-height: var(--td-cell-line-height, 48rpx);

src/check-tag/check-tag.less

@@ -1,4 +1,4 @@
-@import '../common/index.less';
+@import '../common/style/base.less';
 
 // themes
 @tag-default-color: var(--td-tag-default-color, @bg-color-component);

src/checkbox/checkbox.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @checkbox: ~'@{prefix}-checkbox';
 

src/col/col.less

@@ -1,4 +1,4 @@
-@import '../common/index.less';
+@import '../common/style/base.less';
 
 .@{prefix}-col {
   display: block;

src/collapse-panel/collapse-panel.less

@@ -1,4 +1,4 @@
-@import '../common/index.less';
+@import '../common/style/base.less';
 
 @collapse-header-text-color: var(--td-collapse-header-text-color, @text-color-primary);
 @collapse-content-text-color: var(--td-collapse-content-text-color, @text-color-primary);

src/collapse/collapse.less

@@ -1,4 +1,4 @@
-@import '../common/index.less';
+@import '../common/style/base.less';
 
 .@{prefix}-collapse {
   &--card {

src/color-picker/color-picker.less

@@ -1,4 +1,4 @@
-@import '../common/style/index.less';
+@import '../common/style/base.less';
 
 @color-picker-panel-width: var(--td-color-picker-panel-width, 750rpx);
 @color-picker-panel-padding: var(--td-color-picker-panel-padding, 32rpx);

src/common/index.less

@@ -1,5 +1,4 @@
-import isString from 'lodash/isString';
-import isNull from 'lodash/isNull';
+import { isString, isNull } from '../../validator';
 /* eslint-disable no-param-reassign */
 /**
  * 用于反解析渐变字符串为对象