Grunt wordt tegenwoordig veel gebruikt door (front-end) webdevelopers. Hoewel populair, zien veel mensen er tegen op (waaronder ik zelf) om Grunt te gaan gebruiken. Toch is het niet zo moeilijk en kan Grunt je helpen om veel zaken te automatiseren en het ontwikkelingsproces makkelijk te maken. In dit een artikel hoe je Grunt kunt installeren op Windows, en hoe je Grunt kunt gebruiken.
Grunt is een zogenaamde task runner en kan verschillende zaken bij het webdevelopment proces automatiseren. Hierbij kun je denken aan het verkleinen van CSS en javascript bestanden (minify), het optimaliseren van afbeeldingen, of het gelijk updaten van een pagina in een browser zonder eerst te refreshen. Erg handig dus! Het opzetten van Grunt kost even tijd, maar zodra je alles onder de knie hebt kan Grunt je een hoop tijd besparen.
Grunt draait op Node.js, dus het is noodzakelijk eerst deze te downloaden en te installeren. Ga naar de Node.js website, en klik op de grote “install” button op de website. Draai het installatieprogramma en volg de verschillende stappen in het installatieproces.
De volgende stap bestaat uit het installeren van de command line interface van Grunt. In Windows, open de command prompt. Dit doe je door naar start->uitvoeren te gaan en vervolgens het volgende te typen: “cmd”. Dit opent de command prompt. Navigeer in de command prompt naar de map waar je Node hebt geïnstalleerd, meestal is dit c:program filesnodejs. Dit kun je gemakkelijk doen door het volgende te typen: “cd c:program filesnodejs” . Druk hierna op enter. Vervolgens, typ het volgende commando en druk op “enter”.
npm install -g grunt-cli
Maak nu een projectmap aan. Plaats hierin een Json bestand, genaamd “package.json”. Plak hierin de volgende code:
{
"name": "test_project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}
Dit is je configuratie bestand. Let op! Je projectnaam mag geen spaties bevatten.
Grunt moet bij ieder project lokaal geïnstalleerd worden via de command prompt. Start de command prompt en navigeer naar je projectmap. Typ nu het volgende commando:
Npm install
Grunt wordt nu geïnstalleerd! In de volgende stap kunnen we verschillende Grunt plug-ins installeren en een configuratiebestand aanmaken.
In dit voorbeeld gaan we een stylesheet automatisch compressen. Hierbij worden alle regel-breaks en dergelijke uit een stylesheet gehaald, zodat alle code achter elkaar komt te staan. Dit zorgt weliswaar voor een onleesbaar bestand voor mensen, maar de bestandsgrootte van je stylesheet wordt verkleind. Dit komt de performance van je website ten goede. Met Grunt behoud je echter ook je originele stylesheet voor wanneer je wijzigingen wilt aanbrengen.
We gaan eerst de plug-in installeren. Open de command prompt en zorg er weer voor dat je naar je projectmap navigeert. Type het volgende commando:
npm install grunt-contrib-cssmin --save-dev
Maak vervolgens in je projectmap een bestand aan genaamd gruntfile.js. Hierin kun je de verschillende taken voor Grunt configureren. Ik heb hierin de volgende code:
module.exports = function(grunt) {
// Configuratie
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// configuratie voor het minify-en van je stylesheet
cssmin: {
minify: {
expand: true,
cwd: 'src/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}
}
});
// Laden van de css minify plugin
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Het commando registreren
grunt.registerTask('default', ['cssmin']);
};
We hebben onze originele stylesheets in de map “src” staan. Wanneer we in de command prompt het commando “grunt” typen en op enter drukken, worden de stylesheets in deze map gecompressed in de map “css” geplaatst. Bovendien krijgen deze stylesheets de extensie “min.css”.
Bovenstaand is slechts een voorbeeld van wat je met Grunt kan. Er zijn uiteraard vele plug-ins beschikbaar. Kijk voor een overzicht op de Grunt website.
