Running the Upgrade Task for 6.2 Themes

You can upgrade a Liferay Portal 6.2 theme to the new DXP version, regardless of the development environment you use. This tutorial uses the Liferay JS Theme Toolkit’s Gulp upgrade task to automate much of the steps. Because the theme was built on Liferay DXP 6.2, the Gulp upgrade task must be run three times to bring it up to the new DXP version.

The Liferay Theme Generator is available in a few different versions. To update the Liferay DXP 6.2 theme to Liferay DXP 7.0, you must install v8.x.x of the liferay-theme-tasks dependency. After the theme is updated to 7.1, you must then install v9.x.x of the liferay-theme-tasks dependency to complete the upgrade process.

Here’s what the Upgrade Task does:

Follow these steps to take the theme through the upgrade process:

  1. Navigate to the theme’s root directory and run the command below to update the theme’s liferay-theme-tasks dependency to version 8.x.x:

    npm install --save-dev liferay-theme-tasks@8.x.x
    
  2. Run the command below to initially upgrade it from 6.2 to 7.0.

    gulp upgrade
    

    Here’s what the 6.2 to 7.0 upgrade task does:

    The task continues upgrading CSS files, prompting you to update CSS file names. For the new DXP version, Sass files should use the .scss extension, and file names for Sass partials should start with an underscore (e.g., _custom.scss). The upgrade task prompts you for each CSS file to rename.

    The upgrade task automatically upgrades CSS code that it can identify. For everything else, it suggests upgrades.

  3. Run the gulp upgrade command again to upgrade the 7.0 theme to 7.1.

    Here’s what it does:

  4. You must update the theme’s liferay-theme-tasks dependency to version 9.x.x to complete the upgrade process. Install the latest version of the Liferay Theme Generator as well while you’re at it, so future uses of the tool will be compatible with the the new DXP version theme. Both commands are shown below. Run them separately:

    npm install --save-dev liferay-theme-tasks@9.x.x
    
    npm install -g generator-liferay-theme@9.x.x
    
  5. With the 9.x.x versions of the liferay-theme-tasks and Liferay Theme Generator installed, run the gulp upgrade command for the final time to upgrade the 7.1 theme to 7.2:

    Here’s what it does:

The Gulp upgrade task lists any deprecated or removed variables. For other areas of the code it suspects might need updates, it logs suggestions. The task also reports changes that may affect theme templates.

The Gulp upgrade task jump-starts the upgrade process, but it doesn’t complete it. Manual updates are required. The remaining portion of this tutorial covers these manual steps.