— Pixels Commander

JS build and deploy with Gradle

There is one extremely surprising thing – JS projects growth!

Wow! That`s cool. But…

Combining,  minimization and deploying  of this dozens of files would become larger and larger problem.

Gradle is popular and modern build system that can solve such problems for you with help of JavaScript Gradle plugins.

There are two Gradle plugins for building JavaScript – https://launchpad.net/gradle-jslib and https://github.com/eriwen/gradle-js-plugin.

At December 2011 first have nice feature to split project into modules, but it didn`t work with last Gradle version (hope someday it will). This article would be about second one – it`s simple, robust and well documented.

Let`s start from installing Gradle – it`s simple enough. Let`s download fresh version from http://gradle.org/downloads , unpack it and add “bin” subdir to path. Here is good description of how to work with PATH variables – http://stackoverflow.com/questions/7703041/editing-path-variable-on-mac.

After PATH is correct and applied we`ll check Gradle installation with executing Gradle command in console.

Next step is to write buildscript in Groovie. In fact you have not to be Groovie developer to accomplish this:

buildscript {
repositories {
mavenCentral()
}
dependencies {
//Installing plugin from Maven repository
classpath 'com.eriwen:gradle-js-plugin:0.3'
}
}

//Applying plugin
apply plugin: 'js'

//Concatination task, defining inputs and outputs
combineJs {
file1 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/core.js'])
file2 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/strings.js'])
file3 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/dom.js'])
inputs.files file1 + file2 + file3
outputs.file file("${projectDir}/min/corecombined.js")
}

//Minification, the same with inputs and outputs
minifyJs {
inputs.files fileTree(dir: "${projectDir}/min", include: "corecombined.js")
outputs.file file("${projectDir}/min/core.min.js")
}

For deploying minified JavaScript we`ll use Ant task, have to create separate file for it – deploycore.xml, and then launch from main script :

<project>
    <target name="deployFiles"> //Task would be accesible from Groovie by this name
    <echo message="ANT_HOME is set to = ${basedir}" />
    <taskdef name="ftp" classname="org.apache.tools.ant.taskdefs.optional.net.FTP">
        <classpath>
            <pathelement location="${basedir}/antlibs/ant-commons-net.jar" />
            <pathelement location="${basedir}/antlibs/commons-net-3.0.1.jar" />
            <pathelement location="${basedir}/antlibs/jakarta-oro-2.0.8.jar" />
        </classpath>
    </taskdef>
    <ftp server="staging.oggifinogi.com"          userid="administrator"          password="xxx"          port="21"          remotedir="/components"          passive="yes"          binary="no">
        <fileset dir="min/">
            <include name="*.min.js"   />
        </fileset>
    </ftp>
</target>
</project>

Let`s add last line of code to build script, it will load all files with *.min.js mask to FTP:

ant.importBuild 'deploy.xml'

And executing gradle buildscript from console:

gradle -b=core.gradle combineJs minifyJs deployFiles

Voila, JavaScript files are combined, minified and uploaded to server. Now you have more time for coding.