Theme projects that use the liferay JS Theme Toolkit, such as those created with the Liferay Theme Generator have access to several gulp tasks that you can execute to manage and deploy your theme.
Here are the gulp tasks you can execute:
build: generates the base theme files, compiles Sass into CSS, and zips all theme files into a WAR file that you can deploy to a Liferay server.
deploy: runs the
buildtask and deploys the WAR file to the configured local app server.
extend: allows you to specify a base theme or themelet to extend. By default, themes created with the Liferay Theme Generator are based off of the styled theme.
You first are prompted if you want to extend a Base theme or Themelet, then you’re prompted for where you would like to search for modules. Selecting Globally installed npm modules searches globally accessible npm modules on your computer. Selecting npm registry searches for published modules on npm. If you have v8.x.x of the Liferay JS Theme Toolkit installed, you can also Specify a package URL to locate a themelet.
After you’ve selected modules from the options it provides, the modules are added to your
package.jsonfile as dependencies. Run
npm installto install them.
kickstart: allows you to copy the CSS, images, JS, and templates from another theme into the
srcdirectory of your own. While this is similar to the
extendtask, kickstarting from another theme is a one time inheritance, whereas extending from another theme is a dynamic inheritance that applies your src files on top of the base theme on every build.
init: prompts you for local and remote app server information to use in theme deployment.
status: displays the name of the base theme/themelets your theme extends.
watch: allows you to preview the changes you make to your theme without requiring a full redeploy. After invoking the
watchtask, every time you save any changes to a file in your theme, applicable changes are compiled and they’re copied directly to a proxy port (e.g.
9080) for you to preview live. Note: you must have Developer Mode enabled to use the
watchtask. Once you’re happy with the live preview, deploy your theme to apply the changes.