Outils de développement

Automatisation de tâches - Gulpjs

Il est classique d’effectuer des tâches de manière récurrente lors du développement d’une application ou d’un site web. Ce sont ces tâches, souvent chronophages, qui peuvent être réalisées automatiquement.

Gulpjs (http://gulpjs.com/) est un lanceur de tâches conçu principalement pour la compilation de sources. Il assiste le développeur dans son quotidien et limite les tâches manuelles et répétitives.

Il a été architecturé pour être facile à utiliser et à configurer, en se basant sur un modèle par programmation par opposition au principe de configuration. Autrement dit, la configuration ainsi que l’assemblage des différents greffons (plugins) se fait dans le code, dans un fichier JavaScript gulpfile.js.

La communauté Gulpjs est en phase de croissance, et de plus en plus de plugins apparaissent. L’autre atout de Gulpjs, par rapport à ses concurrents, est d’utiliser massivement les flux (streams) de Node (voir le chapitre Flux).

Son fonctionnement s’articule donc autour du concept de tâches, qui sont propres à chacun des projets. On peut bien entendu réutiliser un modèle en le plaçant dans le dossier de l’application.

$ npm install --global gulp
 

Analyse du code - JSHint

JavaScript étant un langage interprété, il n’y a pas de phase de compilation. Et donc pas de possibilité de détecter des erreurs de syntaxe, d’où le risque d’obtenir un code erroné et de ne voir apparaître les problèmes qu’en production et uniquement dans certains cas. Ce qui n’est guère plaisant.

JSHint est un linter : il analyse le code de façon superficielle et il détecte les erreurs de syntaxe (mais aussi tout un ensemble de problèmes potentiels). C’est un des compagnons essentiels du développeur JavaScript.

Dans cette section, nous expliquons comment installer, utiliser et configurer JSHint ainsi que toutes les règles (ou options) disponibles car celles-ci couvrent un vaste pan des bonnes pratiques du développement JavaScript... et par conséquent du développement Node !

> npm install --global jshint
 

> jshint index.js  
index.js: line 7, col 5, 'Duplex' is defined but never used.  
index.js: line 24, col 28, 'size' is defined but never used.  
index.js: line 50, col 30, 'size' is defined but never used.  
index.js: line 75, col 42, 'size' is defined but never used.  
  
4 errors
 

Browserify

Créer des paquets et s’en servir est vraiment pratique. Mais comment utiliser tout ce code depuis un navigateur et non pas uniquement dans Node ?

C’est là qu’entre en jeu Browserify. C’est donc un outil qui convertit du code pseudo-Node (CommonJS, utilisant certains modules standards et variables globales) pour être au final utilisable dans un navigateur.

Ses points forts sont les suivants : tout d’abord, on peut organiser le code sous forme de modules. Comme on l’a vu, la conception en « programmation orientée composant » est puissante et flexible. Mais ce n’est pas tout : en plus de pouvoir réutiliser des modules conçus pour Node (via npm), on peut partager du code dans un projet, entre le serveur (Node) et l’interface (le navigateur). C’est aussi pour cela que nous parlons de cet outil, qui casse des barrières entre développeurs frontend et backend.

S’il est possible d’utiliser un grand nombre de modules développés initialement pour Node dans le navigateur, c’est que Browserify fournit des modules assurant la compatibilité avec les modules de base de Node pour toutes les fonctionnalités utilisables dans un navigateur (mais pas pour les accès au système de fichiers par exemple).

Autre point digne d’intérêt : la concaténation du code, qui permet de faire...