Add Gulp Theme To Maven

Blogs

Add Gulp Theme To Maven

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