gulp build for style, scripts and umd

2026-06-28 13:10:03 +00:00 · 2018-01-18 21:49:33 +08:00
parent 5d0b0af97a
commit 41d76a08ce
5 changed files with 601 additions and 324 deletions
--- a/build.js
+++ b/build.js
@@ -1,29 +0,0 @@
-/* eslint no-console: 0 */
-import rimraf from 'rimraf';
-import * as path from 'path';
-
-import webpack from 'webpack';
-
-import config from './webpack.prod.config.babel';
-
-const build = () => {
-  [
-    path.join(__dirname, 'packages/react-bootstrap-table2/dist'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-editor/dist'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-filter/dist'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-overlay/dist'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-paginator/dist')
-  ].forEach((dir) => {
-    rimraf.sync(dir);
-  });
-  webpack(config).run((err) => {
-    if (err) {
-      console.error('Failed to compile.', [err]);
-      process.exit(1);
-    } else {
-      console.info('Compiled successfully');
-    }
-  });
-};
-
-build();
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -2,59 +2,83 @@ import gulp from 'gulp';
 import babel from 'gulp-babel';
 import sass from 'gulp-sass';
 import cleanCSS from 'gulp-clean-css';
+import cleanDir from 'gulp-clean';
 import rename from 'gulp-rename';
-import rimraf from 'rimraf';
-import * as path from 'path';
+import shell from 'gulp-shell';

-gulp.task('default', ['prod']);
+const LIB = 'lib';
+const DIST = 'dist';
+const TEST = 'test';
+const PKG_PATH = './packages';
+const NODE_MODULES = 'node_modules';

-gulp.task('clean', () => {
-  [
-    path.join(__dirname, 'packages/react-bootstrap-table2/lib'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-editor/lib'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-filter/lib'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-overlay/lib'),
-    path.join(__dirname, 'packages/react-bootstrap-table2-paginator/lib')
-  ].forEach((dir) => {
-    rimraf.sync(dir);
-  });
-});
+const JS_PKGS = [
+  'react-bootstrap-table2',
+  'react-bootstrap-table2-editor',
+  'react-bootstrap-table2-filter',
+  'react-bootstrap-table2-overlay',
+  'react-bootstrap-table2-paginator'
+].reduce((pkg, curr) => `${curr}|${pkg}`, '');

-gulp.task('build-js', () => {
-  [
-    'react-bootstrap-table2',
-    'react-bootstrap-table2-editor',
-    'react-bootstrap-table2-filter',
-    'react-bootstrap-table2-overlay',
-    'react-bootstrap-table2-paginator'
-  ].forEach((pkg) => {
-    gulp.src([
-      `./packages/${pkg}/**/*.js`,
-      `!packages/${pkg}/+(test|dist|node_modules)/**/*.js`
+const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
+
+const STYLE_PKGS = [
+  'react-bootstrap-table2',
+  'react-bootstrap-table2-paginator'
+].reduce((pkg, curr) => `${curr}|${pkg}`, '');
+
+const STYLE_SKIPS = `+(${NODE_MODULES})`;
+
+
+function clean() {
+  return gulp
+    .src(`./packages/+(${JS_PKGS})/+(${LIB}|${DIST})`, { allowEmpty: true })
+    .pipe(cleanDir());
+}
+
+function scripts() {
+  return gulp
+    .src([
+      `./packages/+(${JS_PKGS})/**/*.js`,
+      `!packages/+(${JS_PKGS})/${JS_SKIPS}/**/*.js`
    ])
-      .pipe(babel())
-      .pipe(gulp.dest(`./packages/${pkg}/lib`));
-  });
-});
+    .pipe(babel())
+    .pipe(rename((path) => {
+      if (path.dirname.indexOf('src') > -1) {
+        path.dirname = path.dirname.replace('src', `${LIB}/src`);
+      } else {
+        path.dirname += `/${LIB}`;
+      }
+    }))
+    .pipe(gulp.dest(PKG_PATH));
+}

-gulp.task('build-sass', () => {
-  [
-    'react-bootstrap-table2',
-    'react-bootstrap-table2-paginator'
-  ].forEach((pkg) => {
-    gulp
-      .src([
-        `./packages/${pkg}/style/**/*.scss`,
-        `!packages/${pkg}/+(dist|node_modules)/**/*.scss`
-      ])
-      .pipe(sass().on('error', sass.logError))
-      .pipe(gulp.dest(`./packages/${pkg}/dist`))
-      .pipe(cleanCSS({ compatibility: 'ie8' }))
-      .pipe(rename((path) => {
-        path.extname = '.min.css';
-      }))
-      .pipe(gulp.dest(`./packages/${pkg}/dist`));
-  });
-});
+function styles() {
+  return gulp
+    .src([
+      `./packages/+(${STYLE_PKGS})/style/**/*.scss`,
+      `!packages/+(${STYLE_PKGS})/${STYLE_SKIPS}/**/*.scss`
+    ])
+    .pipe(sass().on('error', sass.logError))
+    .pipe(rename((path) => {
+      path.dirname = path.dirname.replace('style', DIST);
+    }))
+    .pipe(gulp.dest(PKG_PATH))
+    .pipe(cleanCSS({ compatibility: 'ie8' }))
+    .pipe(rename((path) => {
+      path.extname = '.min.css';
+    }))
+    .pipe(gulp.dest(PKG_PATH));
+}

-gulp.task('prod', ['clean', 'build-js', 'build-sass']);
+function umd() {
+  return gulp.src('./webpack.prod.config.babel.js')
+    .pipe(shell(['webpack --config <%= file.path %>']));
+}
+
+const buildJS = gulp.parallel(umd, scripts);
+const buildCSS = styles;
+const build = gulp.series(clean, gulp.parallel(buildJS, buildCSS));
+
+gulp.task('prod', build);
+gulp.task('default', build);
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
  "scripts": {
    "postinstall": "lerna bootstrap",
    "publish": "lerna run build && lerna publish --silent",
-    "build": "node -r babel-register build.js && ./node_modules/.bin/gulp prod",
+    "build": "./node_modules/.bin/gulp prod",
    "start": "node -r babel-register ./node_modules/.bin/webpack-dev-server --config webpack.config.babel.js",
    "lint": "eslint ./packages --ext .js --ext .jsx --ignore-path .gitignore",
    "pretest": "yarn lint --cache",
@@ -46,11 +46,13 @@
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.2.1",
-    "gulp": "3.9.1",
+    "gulp": "4.0.0",
    "gulp-babel": "7.0.0",
+    "gulp-clean": "0.4.0",
    "gulp-clean-css": "3.9.2",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "3.1.0",
+    "gulp-shell": "0.6.5",
    "html-webpack-plugin": "2.30.1",
    "jest": "20.0.4",
    "jsdom": "11.2.0",
@@ -59,7 +61,6 @@
    "lerna-changelog": "^0.7.0",
    "node-sass": "4.5.3",
    "react-test-renderer": "16.0.0",
-    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "sinon": "3.2.1",
    "style-loader": "0.17.0",
--- a/webpack.prod.config.babel.js
+++ b/webpack.prod.config.babel.js
@@ -1,21 +1,18 @@
 import * as path from 'path';
 import webpack from 'webpack';

-const sourceStylePath = path.join(__dirname, 'packages/react-bootstrap-table2/style');
-const paginationSourceStylePath = path.join(__dirname, 'packages/react-bootstrap-table2-paginator/style');
-
 module.exports = {
  entry: {
-    'react-bootstrap-table2/dist/react-bootstrap-table2': ['./packages/react-bootstrap-table2'],
-    'react-bootstrap-table2/dist/react-bootstrap-table2.min': ['./packages/react-bootstrap-table2'],
-    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor': ['./packages/react-bootstrap-table2-editor'],
-    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min': ['./packages/react-bootstrap-table2-editor'],
-    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter': ['./packages/react-bootstrap-table2-filter'],
-    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min': ['./packages/react-bootstrap-table2-filter'],
-    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay': ['./packages/react-bootstrap-table2-overlay'],
-    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min': ['./packages/react-bootstrap-table2-overlay'],
-    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator': ['./packages/react-bootstrap-table2-paginator'],
-    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min': ['./packages/react-bootstrap-table2-paginator']
+    'react-bootstrap-table2/dist/react-bootstrap-table2': './packages/react-bootstrap-table2/index.js',
+    'react-bootstrap-table2/dist/react-bootstrap-table2.min': './packages/react-bootstrap-table2/index.js',
+    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor': './packages/react-bootstrap-table2-editor/index.js',
+    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min': './packages/react-bootstrap-table2-editor/index.js',
+    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter': './packages/react-bootstrap-table2-filter/index.js',
+    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min': './packages/react-bootstrap-table2-filter/index.js',
+    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay': './packages/react-bootstrap-table2-overlay/index.js',
+    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min': './packages/react-bootstrap-table2-overlay/index.js',
+    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator': './packages/react-bootstrap-table2-paginator/index.js',
+    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min': './packages/react-bootstrap-table2-paginator/index.js'
  },
  devtool: 'source-map',
  output: {
@@ -44,17 +41,11 @@ module.exports = {
      enforce: 'pre',
      test: /\.js?$/,
      exclude: /node_modules/,
-      // include: [sourcePath],
      loader: 'eslint-loader'
    }, {
      test: /\.js?$/,
      use: ['babel-loader'],
      exclude: /node_modules/
-      // include: [sourcePath]
-    }, {
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
-      include: [sourceStylePath, paginationSourceStylePath]
    }]
  },
  plugins: [
--- a/yarn.lock
+++ b/yarn.lock