How to minify the CSS and Javascript resources by customization

Issue

• How to perform the minification of the CSS and Javascript resources by using the Liferay theme builder.

Environment

• Liferay DXP 7.4

Resolution

• How to make Gradle call gulp build in themes

  Essentially, the idea is to replace the Gradle theme build process with gulp, which should make it very similar, if not identical, to the node.js version of the build process.

  1. Create an empty folder somewhere on the file system.
  2. In this empty folder, follow all the instructions from Setting Up an Environment and Creating a Theme up through the yo liferay-theme step, making sure to specify the same theme name and theme base as the Gradle-based theme you originally created.
  3. Copy the following files from the generated theme to your Gradle-based theme.
     
     • liferay-theme.json
     • package.json
     • package-lock.json
  4. Create a new file gulpfile.js at the top level of your Gradle-based theme that it contains the following:

  'use strict';
  
  var gulp = require('gulp');
  var liferayThemeTasks = require('liferay-theme-tasks');
  
  liferayThemeTasks.registerTasks({
   gulp: gulp,
   pathDist: 'build/libs/',
   pathSrc: 'src/main/webapp/'
  });

  • when installing the Liferay theme generator, built via gulp directly. Then, add the below line to the gulp.js file at the beginning of the file:
     

  process.env.NODE_ENV = 'production';

  • Add the following to the end of your document build.gradle, which will do the following:
    
    • ensure that the NODE_ENV the variable is set to production so that gulp build minifies CSS
    • replace the buildCSS task with an invocation to gulp build
    • clear the actions in the war task since we already generated a war with gulp build

  apply plugin: "com.liferay.node"
  tasks.getByPath('packageRunBuild').configure {
  environment "NODE_ENV", "production"
  }
  tasks.getByPath('buildCSS').configure {
  actions.clear()
  finalizedBy packageRunBuild
  }
  tasks.getByPath('war').configure {
  actions.clear()
  }

  • Run blade gw deploy as normal.

Additional Information

• Minification of CSS and JavaScript resource