Add Gulp Theme To Maven

Michael Chen

April 07, 2022

Less Than a Minute Read

Many UI teams prefer building Liferay DXP Theme using gulp instead of the Liferay Theme Builder. For example,

cd themes/my-themenpm installgulp build

However, Liferay has not documented ways to integrate the above to a Maven project pom.xml. Here is a sample solution:

{
	"name": "my-theme",
	"version": "1.0.0",
	"main": "package.json",
	"keywords": [
		"liferay-theme"
	],
	"liferayTheme": {
		"baseTheme": "styled",
		"fontAwesome": false,
		"screenshot": "",
		"templateLanguage": "ftl",
		"version": "7.3"
	},
	"devDependencies": {
		"compass-mixins": "0.12.10",
		"gulp": "4.0.2",
		"liferay-frontend-common-css": "1.0.4",
		"liferay-frontend-theme-styled": "6.0.31",
		"liferay-frontend-theme-unstyled": "6.0.27",
		"liferay-theme-tasks": "11.2.2"
	},
	"scripts": {
		"init": "gulp init",
		"build": "gulp build",
		"deploy": "gulp deploy",
		"extend": "gulp extend",
		"kickstart": "gulp kickstart",
		"status": "gulp status",
		"upgrade": "gulp upgrade",
		"watch": "gulp watch"
	},
	"dependencies": {}
}

Here is the pom.xml file, which includes calling 'gulp build:clean' for command 'mvn clean':

<?xml version="1.0"?>
<project
	xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
>
	<modelVersion>4.0.0</modelVersion>
	<groupId>my-theme</groupId>
	<artifactId>my-theme</artifactId>
	<version>1.0.0</version>
	<name>My Theme</name>
	<packaging>war</packaging>

    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.9.1</version>
                <configuration>
                    <workingDirectory>./</workingDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v11.15.0</nodeVersion>
                            <npmVersion>6.7.0</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>gulp build</id>
                        <goals>
                            <goal>gulp</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>gulp clean</id>
                        <goals>
                            <goal>gulp</goal>
                        </goals>
                        <phase>clean</phase>
                        <configuration>
                            <arguments>build:clean</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.2</version>
                <configuration>
                    <outputDirectory>${project.basedir}/dist</outputDirectory>
                    <warSourceDirectory>${project.basedir}/build</warSourceDirectory>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                    <packagingExcludes>.tmp/**</packagingExcludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

With above two files, your theme can now be built by Maven comand:

mvn package

which creates 'dist/my-theme-1.0.0.war' side by side with the version created by gulp 'dist/my-theme.war'. This command also does its job:

mvn clean