Developing Liferay-7.1.0 Theme using Node, NPM, Yeoman and Gulp

Hi

In this post I am going to discuss how to develop liferay-7.1.0 theme using Node, NPM, Yeoman and Gulp

Prerequisites
Name	Version	Download Page	Direct Link
Node	11.15.0	Node Package Manager Download Page	Click to Download Directly

Installation of Node Package Manager

Download the Node Package Manager archive from the links given in the prerequisite section.... the installation of Node Package Manager has been described in an other blog for you to refer, please refer the link below for the installation.

Though the versions are different, the installation procedure is same as that of the one given in the link.

Node Package Manager Installation

The following sections or the portions of the blog assumes the Node Package Manager is installed and working as expected...

Installation of Yeoman and Gulp

For the Installation of Yeoman and Gulp, you can refer the next blog post from the link given below...

Yeoman and Gulp Installation

Installation of Liferay Theme Generator

After installing the required packages for creating themes in Liferay-7.1.0, now is the time to install the Theme Generator... to do this

Open up a terminal and execute the command given below

> npm install -g generator-liferay-theme@^8.x.x

The execution of the above command would result something like the one given in the image below...

With that we have concluded the installation of Liferay Theme Generator

The following sections details the actual theme creation for Liferay-7.1.0

Creating Themes...

Open a terminal window and move to any directory of your choice to create themes

Fire the command below to have your theme created

> yo liferay-theme

the above command would ask you a set of questions provide answers to those for the successful creation of one, the sampled one is given below for you to refer...

This concludes the successful creation of the theme...

Now the next part is important, i.e deploying the theme.. please follow the section below to deploy the theme created.

Deploying the Theme

Move to the root directory of the theme which we did create and fire the command below...

Make sure your liferay portal is up and running.

> gulp deploy

if the command execution is successful, then you would have something as depicted in the images given below...

On the server console, the deployment of the new theme can be verified as depicted below...

With that we have concluded the theme development of liferay-7.1.0 using NPM, Yeoman and Gulp.

Hope you find this article useful.

Thanks.