Configurer Grunt pour votre premier build en javascript

Introduction

Dans le précédent article, je présentais Grunt d’un point de vue fonctionnel, sans rentrer dans les détails techniques. Ce second article va donc s’intéresser plus directement à l’installation et à la configuration de Grunt pour parvenir à réaliser ses tâches et workflows personnalisés afin de faciliter au mieux le développement du projet. Plus tard, un troisième article vous apprendra comment définir vos propres tâches complexes.

Pour des raisons pratiques, nous allons utiliser comme fil rouge la mise en place des workflows d’une application web présente sous la forme d’une unique page index.html avec du javascript et du CSS.

 

Mise en place

Prérequis

Pour ceux qui n’ont jamais eu l’occasion de travailler avec Node.js / npm, nous allons voir comment les installer. Le mieux serait de l’installer en téléchargeant la dernière version sur le site officiel. Cependant, vous pouvez également l’installer rapidement via votre gestionnaire de paquets si vous être sous un OS Debian-like (pour les autres, voir ce tutoriel), même s’il ne s’agira pas forcément de la version la plus à jour :

Le package npm sera installé automatiquement avec. Il s’agit du gestionnaire de paquets de Node.js. Il va nous permettre d’installer très simplement des tâches Grunt qui sont pour la quasi-totalité référencées sur npm. Il faut savoir qu’il existe deux façons d’installer un package :

  • en global avec npm install -g nomDuPackage, ce qui le rend accessible partout sur votre ordinateur
  • en local avec npm install nomDuPackage, ce qui va l’installer dans un sous-dossier node_modules.

Pour exécuter un fichier javascript avec Node.js, il suffit d’utiliser la commande node monFichier.js.

Lire la suite