Grunt voor front-end developers: Deel 1

Voor front-enders komen er steeds meer tools beschikbaar die kunnen bijdragen aan een snellere workflow. Eén daarvan is Grunt, een javascript taskrunner die wij bij FRMWRK sinds een presentatie op de Drupal Jam met open armen hebben ontvangen. In twee delen leer je meer over Grunt, hoe je het installeert en vooral, hoe het ons front-enders het leven weer ietsje makkelijker maakt.

Wat is Grunt?

Zoals gezegd is Grunt een javascript task runner. Het doel van Grunt is ‘automation’, zoals ze op de Grunt website zelf zeggen. Door handelingen die je normaal gesproken handmatig meerdere malen uitvoert, als taken in Grunt te definiëren, kun je jezelf behoorlijk wat tijd en hoofdpijn besparen. Denk aan de compilatie en compressie van SASS of LESS, compressie van javascript of het testen van javascript en/of PHP. Het mooie van Grunt is dat je deze en nog veel meer handelingen allemaal met één tool af kunt vangen. Daarnaast is Grunt niet platform afhankelijk. 

Grunt installeren

Grunt draait op Node.js en is te installeren via npm (Node package manager). Om Grunt in de command line interface aan te roepen heb je Grunt CLI nodig. Deze wil je globaal installeren met npm install -g grunt-cli. Naast Grunt CLI heb je het volgende nodig, package.json waar dependencies worden gedefinieerd, Grunt plugins en Gruntfile.js waarin je Grunt taken configureert en definieert. Bij FRMWRK kiezen wij ervoor om Grunt in de root van onze projecten te installeren omdat wij Grunt in de (nabije) toekomst ook willen gaan gebruiken voor het maken van builds en doen van deployments. Je kunt er ook voor kiezen om Grunt in de theme folder van je project te installeren.

Package.json

Package.json aanmaken kan handmatig. Het enige wat je nodig hebt zijn een naam, versie en beschrijving. Je kunt ook automatisch een package.json aanmaken via de command line met npm install. Er wordt je een walk-through voorgeschoteld waarin je enkele vragen moet beantwoorden. Als je niks invult, wordt de naam die tussen haakjes staat gebruikt. Package.json geïnstalleerd met npm ziet er dan als volgt uit:

Voorbeeld package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "Dit is een test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Stefan",
  "license": "ISC"
}

Package.json wordt onder andere gebruikt om npm packages in op te slaan. Wanneer je voor het eerst met een project begint en npm install uitvoert, worden alle dependencies in package.json vanzelf geïnstalleerd. Voordeel is dat deze dependencies dus niet in een versiebeheersysteem hoeven te staan. Grunt plugins, zoals de grunt-contrib-sass plugin, installeer je met npm install grunt-contrib-sass. Hier kun je ook npm install grunt-contrib-sass --save-dev van maken, zodat deze plugin als dev dependency wordt opgeslagen in package.json. Zoals eerder al vermeld kun je alle dependencies in één keer installeren met npm install. Een overzicht van alle Grunt plugins en beschikbare opties vind je op de npm website.

Gruntfile.js

Tenslotte heb je nog een Gruntfile.js nodig. Hier zijn templates voor beschikbaar, maar je kunt dit ook handmatig doen. Maak een nieuw bestand aan en begin met: module.exports = function(grunt){}. Daar binnen kun je taken inladen die je met npm hebt geïnstalleerd. De grunt-contrib-sass plugin laad je met grunt.loadNpmTasks('grunt-contrib-sass');. Nu heb je de initConfig functie nodig om Grunt taken te configureren. Voeg binnen de { } de volgende regel toe grunt.initconfig({ pkg: grunt.file.readJSON('package.json'), });.

Je kunt nu de geïnstalleerde SASS plugin gaan configureren. Voeg onderstaande code toe aan je Gruntfile.js.

sass: {
	dev: {
		options: {
			style: 'expanded'
		},
		files: {
			'styles.css' : 'styles.scss'
		}
	}
}

Met de sass taak spreek je de plugin aan. Daarbinnen kun je een target definiëren, in dit geval het target dev. Vervolgens kun je binnen het target diverse opties benoemen. Zie de npm website of GitHub voor een volledig overzicht van alle opties voor deze plugin. Tenslotte kun je in files volgens het destination : source principe aangeven welke bestanden gecompileerd moeten worden. Je kunt hier meerdere bestemmingen en bronbestanden aangeven, maar je kunt natuurlijk ook al je SASS in één bestand importeren met @import. Een eenvoudige Gruntfile.js kan er dan uit komen te zien zoals hieronder.

Voorbeeld Gruntfile.js

module.exports = function(grunt) {

	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),

		//Grunt-contrib-sass
		sass: {
			dev: {
				options: {
					style: 'expanded'
				},
				files: {
					'styles.css' : 'styles.scss'
				}
			},
			dist: {
				options: {
					style: 'compressed'
				},
				files: {
					'styles.css' : 'styles.scss'
				}
			}
		}

	});

	//Load Tasks
	grunt.loadNpmTasks('grunt-contrib-sass');

	//Register tasks
	grunt.registerTask('default',['sass:dev']); 

}

Zoals je ziet heb ik een tweede target dist binnen de SASS taak gemaakt met andere opties. Deze twee taken kan ik in de command line uitvoeren met grunt sass:dev of grunt sass:dist. Je kunt ook je eigen taken registreren met grunt.registerTask();. De eerste parameter is de naam van de taak. Als de naam default is, kun je deze taak al uitvoeren door alleen grunt in de command line te gebruiken. Heeft de taak een andere naam, dan kun je die aan roepen met grunt [taak-naam]. Na de komma volgt een array waarin je één of meerdere taken kunt zetten die na elkaar worden uitgevoerd. In bovenstaand voorbeeld wordt met grunt de sass:dev taak uitgevoerd. In de command line krijg je feedback welke taken er worden uitgevoerd en of deze succesvol worden uitgevoerd.

terminal-grunt-feedback.jpg

Gefeliciteerd! Je hebt nu kunnen ontdekken hoe je Grunt kunt opzetten voor een project. In deel 2 lees je binnenkort meer over de populairste grunt plugins voor front-end doeleinden.

Neem dan eens contact op met:
Stefan
Frontend Developer
010 8200 320