chore(devextreme): migrate compression-pipes.js (#33434)

Co-authored-by: Aliullov Vlad <vladislav.aliullov@devexpress.com>
Co-authored-by: Aliullov Vlad <91639107+GoodDayForSurf@users.noreply.github.com>

Author: chaosmirage

nx.json

@@ -45,5 +45,6 @@
   "defaultBase": "master",
   "tui": {
     "enabled": false
-  }
+  },
+  "analytics": false
 }

package.json

@@ -29,9 +29,9 @@
   "nx": {},
   "private": true,
   "devDependencies": {
-    "@nx/devkit": "22.4.5",
-    "@nx/jest": "22.4.5",
-    "@nx/js": "22.4.5",
+    "@nx/devkit": "22.7.0",
+    "@nx/jest": "22.7.0",
+    "@nx/js": "22.7.0",
     "@types/jest": "29.5.14",
     "@types/node": "20.12.8",
     "@types/shelljs": "0.8.15",
@@ -48,7 +48,7 @@
     "jest": "29.7.0",
     "jspdf-autotable": "3.8.4",
     "lint-staged": "14.0.1",
-    "nx": "22.4.5",
+    "nx": "22.7.0",
     "nx-cloud": "19.1.0",
     "postcss": "~8.5.10",
     "shelljs": "0.8.5",

packages/devextreme/build/gulp/aspnet.js

@@ -7,10 +7,10 @@ const named = require('vinyl-named');
 const notify = require('gulp-notify');
 const path = require('path');
 const plumber = require('gulp-plumber');
+const shell = require('gulp-shell');
 const webpack = require('webpack');
 const webpackStream = require('webpack-stream');
 
-const compressionPipes = require('./compression-pipes.js');
 const ctx = require('./context.js');
 const headerPipes = require('./header-pipes.js');
 const webpackConfig = require('../../webpack.config.js');
@@ -42,26 +42,11 @@ const getWebpackConfig = () => {
     return Object.assign(webpackConfig, { plugins });
 };
 
-const bundleProdPipe = lazyPipe()
-    .pipe(named)
-    .pipe(() => webpackStream(getWebpackConfig(), webpack, muteWebPack))
-    .pipe(headerPipes.useStrict)
-    .pipe(headerPipes.bangLicense)
-    .pipe(compressionPipes.minify);
-
-const jsBundlesProd = (src, dist, bundles) => (() =>
-    gulp.src(processBundles(bundles, src))
-        .pipe(bundleProdPipe())
-        .pipe(gulp.dest(dist))
-);
-
-gulp.task('js-bundles-prod',
-    jsBundlesProd(
-        ctx.TRANSPILED_PROD_RENOVATION_PATH,
-        ctx.RESULT_JS_PATH,
-        BUNDLES,
-    )
-);
+gulp.task('js-bundles-prod', shell.task(
+    ctx.uglify
+        ? 'pnpm nx run devextreme:bundle:prod -c production'
+        : 'pnpm nx run devextreme:bundle:prod'
+));
 
 function prepareDebugMeta(watch) {
     const debugConfig = Object.assign({ watch }, getWebpackConfig());
@@ -94,16 +79,17 @@ function createDebugBundlesStream(watch, displayName) {
         .pipe(webpackStream(debugConfig, webpack, muteWebPack))
         .pipe(headerPipes.useStrict())
         .pipe(headerPipes.bangLicense())
-        .pipe(gulpIf(!watch, compressionPipes.beautify()))
         .pipe(gulp.dest(destination));
 
     task.displayName = `${displayName}-worker`;
 
     return task;
 }
 
-gulp.task('js-bundles-debug', gulp.series(
-    createDebugBundlesStream(false, 'js-bundles-debug')
+gulp.task('js-bundles-debug', shell.task(
+    ctx.uglify
+        ? 'pnpm nx run devextreme:bundle:debug -c production'
+        : 'pnpm nx run devextreme:bundle:debug'
 ));
 
 gulp.task('js-bundles-watch', gulp.parallel(

packages/devextreme/build/gulp/compression-pipes.js

@@ -11,8 +11,8 @@ const replace = require('gulp-replace');
 const lazyPipe = require('lazypipe');
 const gulpFilter = require('gulp-filter');
 const gulpRename = require('gulp-rename');
+const shell = require('gulp-shell');
 
-const compressionPipes = require('./compression-pipes.js');
 const ctx = require('./context.js');
 const env = require('./env-variables.js');
 const dataUri = require('./gulp-data-uri').gulpPipe;
@@ -96,7 +96,6 @@ const sources = (src, dist, distGlob) => (() => merge(
         .src(src)
         .pipe(licenseValidator())
         .pipe(headerPipes.starLicense())
-        .pipe(compressionPipes.beautify())
         .pipe(gulp.dest(dist)),
 
     gulp
@@ -181,7 +180,12 @@ gulp.task('npm-sources', gulp.series(
             .src('../devextreme-dist/LICENSE.md')
             .pipe(gulp.dest(distPath)),
     ),
-    sources(srcGlobs, packagePath, distGlobs))
+    sources(srcGlobs, packagePath, distGlobs),
+    shell.task(
+        ctx.uglify
+            ? 'pnpm nx run devextreme:compress:npm-sources -c production'
+            : 'pnpm nx run devextreme:compress:npm-sources'
+    ))
 );
 
 gulp.task('npm-dist', () => gulp

packages/devextreme/build/gulp/js-bundles.js

@@ -5,14 +5,16 @@ const gulp = require('gulp');
 const notify = require('gulp-notify');
 const path = require('path');
 const plumber = require('gulp-plumber');
+const replace = require('gulp-replace');
 const watch = require('gulp-watch');
 
-const removeDebug = require('./compression-pipes.js').removeDebug;
 const ctx = require('./context.js');
 const testsConfig = require('../../testing/tests.babelrc.json');
 const transpileConfig = require('./transpile-config');
 const createTsCompiler = require('./typescript/compiler');
 
+const REMOVE_DEBUG_REGEXP = /\/{2,}\s{0,}#DEBUG[\s\S]*?\/{2,}\s{0,}#ENDDEBUG/g;
+
 const src = [
     'js/**/*.*',
     '!js/**/*.d.ts',
@@ -48,7 +50,7 @@ const watchJsTask = () => {
         .pipe(babel(transpileConfig.cjs))
         .pipe(gulp.dest(ctx.TRANSPILED_PATH));
     watchTask
-        .pipe(removeDebug())
+        .pipe(replace(REMOVE_DEBUG_REGEXP, ''))
         .pipe(babel(transpileConfig.cjs))
         .pipe(gulp.dest(ctx.TRANSPILED_PROD_RENOVATION_PATH));
     return watchTask;
@@ -67,7 +69,7 @@ const watchTsTask = async() => {
         }))
         .pipe(babel(transpileConfig.tsCjs))
         .pipe(gulp.dest(ctx.TRANSPILED_PATH))
-        .pipe(removeDebug())
+        .pipe(replace(REMOVE_DEBUG_REGEXP, ''))
         .pipe(gulp.dest(ctx.TRANSPILED_PROD_RENOVATION_PATH));
 };
 watchTsTask.displayName = 'transpile TS watch';

packages/devextreme/build/gulp/npm.js

@@ -6,10 +6,10 @@ const footer = require('gulp-footer');
 const concat = require('gulp-concat');
 const path = require('path');
 const replace = require('gulp-replace');
+const shell = require('gulp-shell');
 const ts = require('gulp-typescript');
 const context = require('./context.js');
 const headerPipes = require('./header-pipes.js');
-const compressionPipes = require('./compression-pipes.js');
 const MODULES = require('./modules_metadata.json');
 const { packageDir } = require('./utils');
 
@@ -105,26 +105,27 @@ gulp.task('ts-check-modules', function() {
         .pipe(compileTS());
 });
 
-gulp.task('ts-copy-modules', function() {
-    const BUNDLE_IMPORT = 'import DevExpress from \'../bundles/dx.all\';';
-
-    return gulp.src(src)
-        /* legacy modules */
-        .pipe(file('events/click.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/contextmenu.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/dblclick.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/drag.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/hold.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/hover.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/pointer.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/swipe.d.ts', BUNDLE_IMPORT))
-        .pipe(file('events/transform.d.ts', BUNDLE_IMPORT))
-        .pipe(file('integration/jquery.d.ts', 'import \'jquery\';'))
-
-        .pipe(compressionPipes.removeDebug())
-        .pipe(headerPipes.starLicense())
-        .pipe(gulp.dest(packagePath));
-});
+gulp.task('ts-copy-modules', gulp.series(
+    function tsCopyModulesCopy() {
+        const BUNDLE_IMPORT = 'import DevExpress from \'../bundles/dx.all\';';
+
+        return gulp.src(src)
+            /* legacy modules */
+            .pipe(file('events/click.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/contextmenu.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/dblclick.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/drag.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/hold.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/hover.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/pointer.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/swipe.d.ts', BUNDLE_IMPORT))
+            .pipe(file('events/transform.d.ts', BUNDLE_IMPORT))
+            .pipe(file('integration/jquery.d.ts', 'import \'jquery\';'))
+            .pipe(headerPipes.starLicense())
+            .pipe(gulp.dest(packagePath));
+    },
+    shell.task('pnpm nx run devextreme:compress:ts-modules')
+));
 
 gulp.task('ts-sources', gulp.series('ts-copy-modules', 'ts-copy-bundle'));