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—such as minifying your JavaScript files—on your theme’s
files prior to deploying the theme to the server. 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:
-
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 thetasks
folder of theliferay-theme-tasks
package. For example, the gulpbuild
task and sub tasks are defined in thebuild.js
file:'build:clean', 'build:base', 'build:src', 'build:web-inf', 'build:liferay-look-and-feel', 'build:hook', 'build:themelets', 'build:rename-css-dir', 'build:prep-css', 'build:compile-css', 'build:fix-url-functions', 'build:move-compiled-css', 'build:remove-old-css-dir', 'build:fix-at-directives', 'build:r2', 'build:war',
-
Open your theme’s
gulpfile.js
file and locate theliferayThemeTasks.registerTasks()
method. This method registers the default gulp theme tasks. Add thehookFn
property to theregisterTasks()
method’s configuration object, making sure to pass in thegulp
instance:liferayThemeTasks.registerTasks({ gulp: gulp, hookFn: function(gulp) { } });
-
Inside the
hookFn()
function, use thegulp.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 thebefore:
orafter:
keywords. Alternatively, you can use thegulp.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 invokesdone
or returns a stream with the logic that you want to inject. A few example configuration patterns are shown below:liferayThemeTasks.registerTasks({ 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');
liferayThemeTasks.registerTasks({
gulp: gulp,
hookFn: function(gulp) {
gulp.hook('before:build:war', function(done) {
// Fires before build `war` task
gulp.src('./build/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
.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!