Overwriting and Extending Liferay Theme Tasks

Themes created with the Liferay Theme Generator have access to several default gulp theme tasks that provide the standard features required to develop and build your theme (build, deploy, watch, etc.). You may, however, want to run additional processes on your theme’s files prior to deploying the theme to the server—such as minifying your JavaScript files. The Liferay Theme Generator’s APIs expose a hookFn property that lets you hook into the default gulp theme tasks to inject your own logic.

Follow these steps to hook into the default Liferay theme tasks:

  1. Identify the gulp task or sub task that you want to hook into or overwrite. The tasks and their sub tasks are listed in their [task-name].js file in the tasks folder of the liferay-theme-tasks package. For example, the gulp build task and sub tasks are defined in the build.js file:

    gulp.task('build', function(cb) {
  2. Open your theme’s gulpfile.js file and locate the liferayThemeTasks.registerTasks() method. This method registers the default gulp theme tasks. Add the hookFn property to the registerTasks() method’s configuration object, making sure to pass in the gulp instance:

      gulp: gulp,
      hookFn: function(gulp) {
  3. Inside the hookFn() function, use the gulp.hook() method to specify the theme task or sub task that you want to hook into. You can inject your code before or after a task by prefixing it with the before: or after: keywords. Alternatively, you can use the gulp.task() method to overwrite a gulp task. Both methods have two parameters: the task or sub task you want to hook into and a callback function that invokes done or returns a stream with the logic that you want to inject. A few example configuration patterns are shown below:

      gulp: gulp,
      hookFn: function(gulp) {
        gulp.hook('before:build:src', function(done) {
          // Fires before build:src task
        gulp.hook('after:build', function(done) {
          // Fires after build task
        gulp.task('build:base', function(done) {
          // Overwrites build:base task

The example below fires before the build:war sub-task and reads the JavaScript files in the theme’s build folder, minifies them with the gulp-uglify module, places them back in the ./build/js folder, invokes done, and finally logs that the JavaScript was minified. To follow along, replace your theme’s gulpfile.js with the contents shown below, install the gulp-uglify module and the fancy-log module, and run gulp deploy:

'use strict';

var gulp = require('gulp');
var log = require('fancy-log');
var uglify = require('gulp-uglify');
var liferayThemeTasks = require('liferay-theme-tasks');

   gulp: gulp,
   hookFn: function(gulp) {
     gulp.hook('before:build:war', function(done) {
      // Fires before build `war` task
      .on('end', done);
      log('Your JS is now minified...');

You should see something similar to the output shown below:

[15:58:07] Finished 'build:r2' after 198 ms
[15:58:07] Starting 'build:war'...
[15:58:07] Your JS is now minified...
[15:58:07] Starting 'plugin:version'...
[15:58:07] Finished 'plugin:version' after 2.52 ms

Now you know how to hook into and overwrite the default Liferay theme tasks!

« Listing Your Theme's ExtensionsClay CSS and Themes »
Was this article helpful?
0 out of 0 found this helpful