Archive

Articles taggués ‘grunt’

Créez vos tâches personnalisées avec Grunt

Introduction

Dans les deux précédents articles de cette série, nous avons effectué un tour théorique de Grunt et nous avons ensuite mis en place un workflow personnalisé du build d’un projet en utilisant des plugins (ou tâches) Grunt déjà existants. Nous allons maintenant aller plus loin dans la prise en main de Grunt et créer nos propres tâches personnalisées !

Attention ! Dans l’article précédent, nous avions créé des tâches (notamment la tâche build), mais celles-ci n’étaient alors qu’un alias pour exécuter plusieurs autres tâches. Ce que je vous propose à présent, c’est de pouvoir mettre en place de nouvelles tâches lorsque vous ne trouvez pas de plugin pouvant répondre à votre besoin. Comme fil rouge de cet article, nous allons réaliser une tâche Grunt qui servira à définir des variables de configuration suivant l’environnement sur lequel nous souhaitons livrer notre projet.

Imaginons en effet que nous ayons deux environnements sur lesquels nous souhaitons livrer, par exemple un environnement de pré-production et un environnement de production. Imaginons que, pour une raison quelconque, l’adresse courante ait besoin d’être renseignée dans un fichier de configuration. Comme les différents environnements sont situés à des adresses différentes, il peut être intéressant d’automatiser le remplacement de ces paramètres dans une tâche Grunt.

A travers cet exemple, nous allons voir deux façons de déclarer des tâches Grunt, une simple puis une plus évoluée. Lire la suite…

Categories: Web Tags: , , ,

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…

Categories: Web Tags: , , , ,

Automatisez vos workflows avec Grunt

Introduction

Un bon développeur est un développeur fainéant, c’est un dicton bien connu ! Il nous est tous arrivé d’avoir à effectuer de nombreuses tâches répétitives, ou de devoir enchaîner un certain nombre d’opérations dans un ordre précis et de façon récurrente. Qu’il s’agisse de compiler votre CoffeeScript, votre Sass, ou bien de préparer un projet pour une livraison en production, toutes ces opérations entraînent une perte de temps précieuse et surtout une énorme frustration ! Mais c’est là qu’on réalise la magie du web : pour tout ce qui vous énerve, d’autres ont déjà trouvé une solution !

Grunt à la rescousse

GruntC’est là qu’intervient Grunt. Derrière ce nom étrange se cache un lanceur de tâches Javascript. Si cela est peu parlant pour certains, il faut comprendre par là que cet utilitaire en ligne de commande permet tout simplement d’automatiser toutes les tâches possibles et imaginables ! Grunt peut par exemple minifier automatiquement vos fichiers CSS ou Javascript, lancer vos tests, compiler un projet, vérifier la qualité de votre code, … Et pourquoi ne pas faire tout cela en une seule commande ? Telles sont les possibilités offertes par cet outil basé sur Node.js.

Lire la suite…

Categories: Web Tags: , , , ,