Liferay Gulp tasks

In this tutorial, we will look into what are available gulp tasks for liferay theme generator.  you can access complete list of gulp tasks under folder  liferay-theme-tasks. you need to install liferay theme generator and you found the tutorial on this “Install liferay theme generator steps”.

Note: All Theme,layout creation, themelet and theme imports creations  are need to run through yo command

Liferay Theme Tasks

1.   yo liferay-theme              –  For   Liferay Theme Creation:
2.   yo liferay-theme:import     –  Used to  import  plugins SDK theme into themes generator theme
3.   yo liferay-theme:layout     –  Used to create layouts
4.   yo liferay-theme:themelet  –   Used to create themelet

Liferay gulp Tasks:

Below are list of gulp tasks in java script:

1. gulp status :  This shows extended theme details
2. gulp init:  init command used to  update liferay theme deployment configuration and server URL details 
3. gulp watch :   This command used to build by taking modified changes only  and displays in the logs.
   1. By default theme generator used ftl as default template language.we will change this to vm and will re deploy.
4. gulp build :
   •  build command used to create liferay theme structure by compiling sass files into CSS
   • Create war file and copied to dist folder 
5. gulp deploy :  Deploy command used to deploy the war file to Liferay Server. Deploy command takes server path from  liferay-theme.json and copies to deploy folder
6. gulp upgrade  :  upgrade used to migrate liferay 6.2 themes to liferay DXP theme and you can find the complete tutorial here: Liferay DXP theme up-gradation.
7. gulp extend: This command used to change extended theme. by default liferay extends styled theme.We will run extend command  on javasavvy-theme to extend base-theme
   1. Now we created two themes base-theme and javasavvy-theme.
   2. Go base theme folder and run below commands
      1. gulp build
      2. npm link   –  This will install the theme on npm modules lists and will available to extend this.
   3. Go Javasavy theme and run below commands
      1. gulp extend
      2. select options “unstyled, themelet or search globally
      3. select base-theme and thats it. javasavvy-theme is extended base-theme
8. gulp kickstart :   kickstart is same as of extend, but it will copies theme elements such as images,templates,js and css from another theme and creates new themes.

Gulp uses liferay-theme.json object holds meta data about theme and holds below information:

liferay-theme.json:

{
 "LiferayTheme": {
       "appServerPath": "D:\\liferay-work\\LR7EE\\liferay-dxp-digital-enterprise-7.0-sp1\\tomcat-8.0.32",
        "deployPath": "D:\\liferay-work\\LR7EE\\liferay-dxp-digital-enterprise-7.0-sp1\\deploy",
         "url": "http://localhost:8080",
        "appServerPathPlugin": "D:\\liferay-work\\themes\\javasavvy-theme\\.web_bundle_build",
       "deployed": true,
    "pluginName": "javasavvy-theme"
 }
}

you can refer here also : https://github.com/liferay/liferay-theme-tasks