Gradle JavaScript R.js Minify Plugin

 Gradle JavaScript R.js Minify Plugin

Introduction

Minification in JavaScript is the process of removing unnecessary characters from JavaScript source code. All the extra whitespaces, comments, new line characters, etc. that is not necessary are removed and JavaScript code and file size is minimized during JavaScript minification.

Why JavaScript Minification

The main purpose of JavaScript minification is to speed up the downloading or transfer of the JavaScript code from the SERVER HOSTING.
Primary benefits of JavaScript minification are –
1. Better page load time as the data transferred across network is minimized.
2. Less bandwidth consumption.

JavaScript minification in Web Apps

In web based application we develop a lot of functionality using JavaScript. Single Page Applications developed in Backbobe.js or Angular.js uses lot of JavaScript libraries and the entire view is implemented using JavaScript only. As the number of JavaScript files increases it is also required to send multiple HTTP requests to download these JavaScript files as we may not be able to cache all the files at client browser.
The minification strategy is to combine the source files and then generate a single minified file of reasonable size to optimally use the bandwidth and minimize the page load time.

Gradle JavaScript Minify Plugin

JavaScript plugin written by Eriwen (https://github.com/eriwen/gradle-js-plugin) might be the most widely used JavaScript minify plugin if we have chosen Gradle as our build tool. Alternatively we can take the following approach –

1. Install node and node packages.

• Install node  http://nodejs.org/dist/v0.10.31/node.exe
• Install node package require js npm install -g requirejs

2. Write a shell script with the content below (<minifyJS.sh>)

r.js -o src/main/webapp/app/<app.build.js>
<app.build.js> contains all the require.js dependencies to run the application.

3. Write a java class to execute the shell script

import java.io.IOException;

import org.apache.commons.exec.CommandLine;
import org.apache.commons.exec.DefaultExecutor;
import org.apache.commons.exec.ExecuteException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class CustomJsMinifier {
private static Logger log = LoggerFactory
.getLogger(CustomJsMinifier.class);
int iExitValue;
String sCommandString;

public void runScript(String command) {
sCommandString = command;
CommandLine oCmdLine = CommandLine.parse(sCommandString);
DefaultExecutor oDefaultExecutor = new DefaultExecutor();
oDefaultExecutor.setExitValue(0);
try {
iExitValue = oDefaultExecutor.execute(oCmdLine);
} catch (ExecuteException e) {
log.debug(e.getMessage());
} catch (IOException e) {
log.debug(e.getMessage());
}
}

public static void main(String args[]) {
CustomJsMinifier minifier = new CustomJsMinifier ();
minifier.runScript("sh <path_to_shell_script>");
}
}

4. Add the code snippet below in build.gradle file

task(minifyJS, dependsOn: 'classes', type: JavaExec) {
       main = '<fully_qualified_ CustomJsMinifier_class_name>'
       classpath = sourceSets.main.runtimeClasspath
}

war.doFirst {
       tasks.minifyJS.execute()
}

5. From Windows system we have to use any shell script executor like Power Shell (like Git shell) to build the project to run R.js minify plugin.