Optimizing an Existing Theme for Liferay 7
Migrating your theme from Liferay 6.2 to Liferay 7 is easier than you may think, thanks to the themes generator. This tutorial assumes that you already have the themes generator installed and a 6.2 theme that was developed with the Plugins SDK.
This tutorial demonstrates how to:
- Upgrade your theme from Liferay 6.2 to Liferay 7
Go ahead and get started.
The first thing you will need to do is import your 6.2 theme to use the new Node.js theme development tools. Follow the steps below to get your theme set up:
- Navigate to the directory you want to import your theme into and open the command line and run the following command:
- yo liferay-theme:import
This runs the import sub-generator for the themes generator.
- Enter the direct path for your theme to import and press Enter.
Note: the themes import sub-generator does not support relative paths.
The theme’s modified files are all copied and migrated to a newly created src directory. A gulpfile.js, liferay-theme.json, package.json file and a node_modules directory is added to the existing theme.
Next, the gulp init task runs and prompts you with a couple questions.
- Enter the path to your app server.
- Enter the URL to your production or development site, or press Enter to accept the default http://localhost:8080.
Your theme is now set up to use the Node.js build tools and theme gulp tasks. However, the theme is still configured for Liferay 6.2. To upgrade your theme to Liferay 7, follow the steps in the next section.