feat(pri): component构建添加less编译

Author: zaizhou.sym

package.json

@@ -43,7 +43,7 @@
     "@babel/plugin-transform-runtime": "7.7.5",
     "@babel/preset-env": "7.7.5",
     "@babel/preset-react": "7.7.4",
-    "@babel/preset-typescript": "7.7.4",
+    "@babel/preset-typescript": "7.9.0",
     "@babel/runtime": "7.7.5",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/lint": "^8.2.0",
@@ -54,6 +54,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/eslint": "^6.1.3",
     "@types/fs-extra": "8.0.1",
+    "@types/gulp-less": "^0.0.31",
     "@types/highlight.js": "9.12.3",
     "@types/jest": "24.0.23",
     "@types/koa": "2.11.0",

src/utils/babel-options.ts

@@ -32,7 +32,11 @@ export function getBabelOptions(options?: Partial<DefaultOptions>) {
   return {
     babelrc: false,
     comments: globalState.isDevelopment,
-    presets: [[babelPresetEnv, { modules: mergedOptions.modules }], [babelPresetReact], [babelPresetTypescript]],
+    presets: [
+      [babelPresetEnv, { modules: mergedOptions.modules }],
+      [babelPresetReact],
+      [babelPresetTypescript, { onlyRemoveTypeImports: true }],
+    ],
     plugins: [
       [transformRuntime],
       ...(globalState.isDevelopment ? [[babelPluginReactHotLoader]] : []),

src/utils/ts-plus-babel.ts

@@ -2,6 +2,7 @@ import * as gulp from 'gulp';
 import * as fs from 'fs-extra';
 import * as gulpBabel from 'gulp-babel';
 import * as gulpSass from 'gulp-sass';
+import * as gulpLess from 'gulp-less';
 import * as gulpWatch from 'gulp-watch';
 import * as gulpStripCssComments from 'gulp-strip-css-comments';
 import * as gulpConcatCss from 'gulp-concat-css';
@@ -20,9 +21,17 @@ function getGulpByWatch(watch: boolean, filesPath: string) {
   if (watch) {
     return gulpWatch(filesPath);
   }
+  /** 文件匹配 */
   return gulp.src(filesPath);
 }
 
+function getCssByWatch(watch: boolean, filesPath: Array<any>) {
+  if (watch) {
+    return gulpWatch(filesPath);
+  }
+  /** 文件匹配 */
+  return gulp.src(filesPath);
+}
 const buildTs = (watch: boolean, outdir: string, babelOptions: any, wholeProject: boolean, sourcePath: string) => {
   const targetPath = wholeProject
     ? path.join(pri.projectRootPath, '{src,packages}/**/*.{ts,tsx}')
@@ -47,19 +56,28 @@ const buildTs = (watch: boolean, outdir: string, babelOptions: any, wholeProject
   });
 };
 
-const buildSass = (watch: boolean, outdir: string, wholeProject: boolean, sourcePath: string) => {
-  const targetPath =
-    wholeProject || (pri.selectedSourceType === 'root' && pri.sourceConfig.cssExtract)
-      ? path.join(pri.projectRootPath, '{src,packages}/**/*.scss')
-      : path.join(sourcePath || pri.sourceRoot, srcPath.dir, '**/*.scss');
-  const a = 1;
+/** 获取样式文件路径 */
+function getStyleFilePath(suffix: string, wholeProject: boolean, sourcePath: string) {
+  return wholeProject || (pri.selectedSourceType === 'root' && pri.sourceConfig.cssExtract)
+    ? path.join(pri.projectRootPath, `{src,packages}/**/*.${suffix}`)
+    : path.join(sourcePath || pri.sourceRoot, srcPath.dir, `**/*.${suffix}`);
+}
+
+const buildSassAndLess = (watch: boolean, outdir: string, wholeProject: boolean, sourcePath: string) => {
+  const targetScssPath = getStyleFilePath('scss', wholeProject, sourcePath);
+  const targetLessPath = getStyleFilePath('less', wholeProject, sourcePath);
   return new Promise((resolve, reject) => {
-    getGulpByWatch(watch, targetPath)
+    getCssByWatch(watch, [targetScssPath, targetLessPath])
       .pipe(
         gulpSass({
           includePaths: path.join(pri.projectRootPath, 'node_modules'),
         }),
       )
+      .pipe(
+        gulpLess({
+          paths: [path.join(pri.projectRootPath, 'node_modules', 'includes')],
+        }),
+      )
       .pipe(gulpIf(pri.sourceConfig.cssExtract, gulpConcatCss(pri.sourceConfig.outCssFileName)))
       .pipe(gulpStripCssComments())
       .on('error', reject)
@@ -171,8 +189,8 @@ export const tsPlusBabel = async (watch = false, wholeProject = false, packageIn
   }
 
   return Promise.all([
-    pri.sourceConfig.componentEntries ? null : buildSass(watch, mainDistPath, wholeProject, sourcePath),
-    pri.sourceConfig.componentEntries ? null : buildSass(watch, moduleDistPath, wholeProject, sourcePath),
+    pri.sourceConfig.componentEntries ? null : buildSassAndLess(watch, mainDistPath, wholeProject, sourcePath),
+    pri.sourceConfig.componentEntries ? null : buildSassAndLess(watch, moduleDistPath, wholeProject, sourcePath),
 
     buildTs(
       watch,