Gradle-Builds im Frontendprojekt mit CoffeeScript, Sass und Jade

All-in

In einem unserer aktuellen Projekte nutzen wir für das Web-Frontend einen bunten Mix verschiedener Technologien und Frameworks. Mit dabei sind CoffeeScript, Sass, Jade und AngularJS. Mittels Gradle bauen wir daraus ein WAR-File, das auf einem Wildfly Application-Server läuft.

Angezogen vom Versprechen das Gute von Ant und Maven übernommen und weitere tolle Featuress hinzugefügt zu haben, wollten wir Gradle eine Chance geben. Ein übersichtliches Build-Skript ganz ohne XML, dazu noch mit einer eigenen flexiblen auf Groovy basierenden domänenspezifischen Sprache (DSL) zur Beschreibung der zu bauenden Projekte ausgestattet…. klingt doch verlockend.

Compile them all

Sowohl CoffeeScript, Sass, als auch Jade müssen compiliert werden, damit der Browser damit etwas anfangen kann.

• CoffeeScript zu JavaScript
• Sass zu CSS
• Jade zu HTML

Gradle lässt sich über Plugins erweitern. Von daher lag es nahe, die passenden Plugins zum Compilieren einzubinden. Google wartete dann auch prompt mit folgenden Treffern auf

• http://www.cameronstokes.com/2013/01/21/using-gradle-to-build-coffeescript/
• https://github.com/zilluss/gradle-jade-plugin
• https://github.com/robfletcher/gradle-compass

Allein alle drei Plugins in einem Build-Script zum Laufen zu bekommen, wollte einfach nicht funktionieren, bzw. wurde die Kette an aufzulösenden Abhängigkeiten immer länger.

Letztendlich haben wir uns dafür entschieden Gradles “Exec”-Funktion zu nutzen und damit die lokal installierten nativen Compiler von CoffeeScript, Sass und Jade zu steuern. Nicht der schönste aber ein pragmatischer und funktionaler Ansatz (Zwinkern) Für Windows und Ubuntu haben wir eine kleine Installationsanleitung für die zu installierenden Programme zusammengetragen.

// Windows prerequisites:
// install node.js from https://nodejs.org/ and use node.js' package manager npm to install further dependencies from your shell
// $ npm install -g jade
// $ npm install -g coffee-script
// install ruby from http://rubyinstaller.org/ and use ruby's gem installer to solve further dependencies from your shell
// $ gem install sass
// Restart your windows machine, if necessary
//
// Ubuntu prerequisites:
// sudo apt-get install nodejs
// sudo apt-get install npm
// sudo gem install sass
// sudo npm install -g jade
// sudo npm install -g coffee-script
//
// if jade and node.js don't start properly you might work around this by setting symbol links
// sudo ln -s /usr/local/bin/jade /usr/bin/jade
// sudo ln -s /usr/bin/nodejs /usr/bin/node
// sudo ln -s /usr/local/bin/coffee /usr/bin/coffee
//
// Check your jade, sass and coffee compiler by running them inside your shell eg. $ jade

import org.apache.tools.ant.taskdefs.condition.Os

apply plugin: 'war'

war {
	archiveName 'MyProject.war'
}

def jsDir = "src/main/webapp/js"
def viewsDir = "src/main/webapp/views"
def cssDir = "src/main/webapp/css"
def globalCl = []

defaultTasks 'setOsCommandLineEnv'

task setOsCommandLineEnv() {
	if ( Os.isFamily(Os.FAMILY_WINDOWS) ) {
		globalCl = ['cmd', '/c']
	}
}

task compileCoffee(type:Exec) {
	workingDir jsDir
	commandLine = globalCl + ['coffee', '--compile', './']
}

task compileJade(type:Exec) {
	workingDir viewsDir
	commandLine = globalCl + ['jade', './']
}

task compileSass(type:Exec) {
	workingDir cssDir
	commandLine = globalCl + ['sass', 'styles.sass', 'styles.css']
}

task watchCoffee(type:Exec) {
	workingDir jsDir
	commandLine = globalCl + ['coffee', '--watch', '--compile', './']
}

task watchJade(type:Exec) {
	workingDir viewsDir
	commandLine = globalCl + ['jade', '--watch', './']
}

task watchSass(type:Exec) {
	workingDir cssDir
	commandLine = globalCl + ['sass', '--watch', './', './']
}

Aktuell lassen sich mit dem Skript alle drei Dateiformate manuell oder mittels Watchern bei Änderungen automatisch compilieren.

Ausblick

Das Stoppen der Watcher wäre auch eine logische Ausbaustufe. Da das Skript aber tut, was es soll und die Watcher auch über die IDE oder das CLI gestoppt werden können, haben wir es vorerst bei diesem Stand belassen.

Hat euch dieser Post geholfen oder habt ihr Anregungen für uns? Dann freuen wir uns über euer Feedback und neue Versionen des Build-Skripts.