Une introduction à l'automatisation JavaScript avec Gulp

En tant que développeurs Web, nous nous retrouvons parfois à répéter encore et encore les mêmes tâches fastidieuses. Si vous considérez combien de temps est perdu en exécutant une commande de construction ou en appuyant sur l'actualisation de votre navigateur, vous vous rendrez compte que vous pouvez gagner beaucoup de temps. De plus, en automatisant vos processus, vous pouvez rester concentré sur la tâche à accomplir au lieu de quitter temporairement « la zone » (votre état de productivité).

Dans ce didacticiel d'automatisation JavaScript, vous apprendrez à automatiser votre processus de conception et de développement avec Gulp. Si vous êtes plus orienté design, je vous encourage à surmonter toutes vos peurs et à continuer à lire. D'un autre côté, si vous êtes un développeur, vous pourrez balayer tout cela une fois que vous aurez compris la logique qui le sous-tend.

Gulp est un système de construction qui utilise les flux de Node.js pour implémenter une approche source-destination asynchrone de l'automatisation. Tout est écrit en JavaScript, il est donc facile pour quiconque ayant des connaissances de codage intermédiaires de se lancer. Un processus de construction Gulp consiste en une collection d'observateurs et de tâches. De plus, la communauté derrière Gulp maintient un énorme répertoire de plugins dans npm qui aide à accomplir n'importe quelle tâche, de la concaténation de JavaScript à la création de polices d'icônes à partir de SVG.

Alternatives à Gulp

Il existe de nombreuses alternatives, dont la plupart sont apparues au cours des deux dernières années - la plus notable étant Grunt. Le concours entre Gulp et Grunt n'aura jamais de gagnant clair, car ils ont tous les deux leurs avantages et leurs inconvénients, donc j'éviterai d'approfondir cela. En un mot, la forte dépendance de Grunt à la configuration est ce qui oriente les gens vers l'approche JavaScript de Gulp. Entre-temps, les implémentations d'interface graphique natives telles que Koala ont gagné du terrain, principalement grâce à des personnes qui retiennent de se lancer dans le codage. Cependant, avec les applications groupées, il est impossible d'atteindre le niveau de personnalisation et d'extensibilité offert par Gulp.

Fondamentaux de l'automatisation des processus

Plugins

Les plugins sont les moyens par lesquels gulp accomplit chaque processus. Les plugins sont installés via npm et lancés à l'aide de "require".

Tâches

Pour Gulp, les tâches ont toujours une source et une destination. Entre eux se trouvent les tuyaux qui appellent chaque plugin et envoient les résultats transmutés au tuyau suivant.

Globes

Les globs sont des modèles génériques qui font référence à des fichiers. Des globs ou des tableaux de globs sont utilisés comme entrées dans la source de la tâche.

Observateurs

Les observateurs surveillent les fichiers source pour détecter les modifications et appellent des tâches chaque fois qu'une modification est détectée.

gulpfile.js

Il s'agit du fichier JavaScript vers lequel pointe la commande "gulp". Il contient tout, des tâches aux observateurs ou autres morceaux de code utilisés par les tâches.

Une tâche simple

Pour commencer, vous avez besoin de Node.js et d'un shell de ligne de commande avec un accès administrateur. Vous pouvez télécharger Node.js à partir d'ici. Une fois installé, vous pouvez exécuter la commande suivante pour vous assurer que npm est à jour.

 sudo npm install npm -g

L'indicateur -g indique que l'installation sera globale.

Vous êtes maintenant prêt à installer Gulp et à commencer à appeler des tâches simples. Utilisez la commande suivante pour installer Gulp globalement.

 sudo npm install gulp -g

Notez que vous pouvez également utiliser la même commande pour mettre à jour.

Vous pouvez télécharger le kit de démarrage qui vous aidera dans votre première tâche à partir de toptal-gulp-tutorial/step1. Il comprend une tâche très simple qui compile les fichiers SCSS en CSS. Il utilise le plugin gulp-sass, qui utilise libsass. J'ai choisi libsass ici car il est beaucoup plus rapide que l'alternative Ruby, bien qu'il lui manque certaines fonctionnalités. Une fois dans le répertoire racine de votre projet, vous pouvez utiliser la commande suivante pour installer tous les plugins nécessaires.

 npm install

Cette commande lit le fichier package.json et installe toutes les dépendances requises. Nous utilisons ici "npm install" comme raccourci pour les éléments suivants :

 npm install gulp --save-dev npm install gulp-sass --save-dev

Le drapeau "-save-dev" ajoute les plugins sélectionnés aux devDependencies de package.json afin que la prochaine fois que vous souhaitez tout installer, vous puissiez utiliser le pratique "npm install".

À ce stade, vous pouvez exécuter votre première tâche. Exécutez la commande suivante et observez que tous les fichiers SCSS du dossier /scss sont compilés en CSS dans le répertoire correspondant :

 gulp scss

Notez que dans cet exemple, nous spécifions la tâche à exécuter. Si nous avons omis le nom de la tâche, celle nommée "default" serait exécutée.

Procédure pas à pas

Ce qui précède est accompli en seulement 7 lignes de code JavaScript. Vous vous sentirez sûrement chez vous une fois que vous en saisirez la simplicité :

 var gulp = require('gulp'); var scss = require('gulp-sass');

Au début, nous initialisons tous les plugins que nous utiliserons. Gulp est le seul dont on ne peut pas se passer :

 gulp.task('scss', function() {

Nous définissons la tâche nommée "scss":

 return gulp.src('scss/*.scss')

Définissez les fichiers source de la tâche. Ceux-ci sont définis comme des globs. Dans cet exemple, nous faisons référence à tous les fichiers du dossier "scss/" qui se terminent par ".scss".

 .pipe(scss())

À ce stade, nous appelons le plugin gulp-sass que nous avons défini précédemment :

 .pipe(gulp.dest('css'));

Enfin, nous utilisons « gulp.dest » pour définir le dossier de destination de nos fichiers. Il peut également s'agir d'un nom de fichier unique si les fichiers sont concaténés.

Pour améliorer encore cette implémentation de l'automatisation des processus, vous pouvez essayer d'inclure quelques autres plugins Gulp. Par exemple, vous souhaiterez peut-être réduire le produit final de votre tâche à l'aide de gulp-minify-css et ajouter automatiquement des préfixes de fournisseur avec gulp-autoprefixer.

Employer un observateur

J'ai créé un kit de démarrage Watcher que vous pouvez utiliser immédiatement. Vous pouvez le télécharger à partir de toptal-gulp-tutorial/step2. Il comprend une version améliorée de la tâche SCSS créée précédemment et un observateur qui surveille les fichiers source et appelle la tâche. Pour le démarrer, utilisez la commande suivante :

 gulp

Cette commande démarre la tâche "par défaut" qui lance l'observateur. À ce stade, vous pouvez modifier n'importe lequel des fichiers SCSS et observer la recompilation des fichiers CSS. Vous pourrez voir les notifications de Gulp dans la ligne de commande.

Procédure pas à pas

Nous avons mis en place un observateur pour notre tâche avec seulement 3 lignes de code supplémentaires. Cela dit, le kit de démarrage Watcher ne diffère pas beaucoup de l'exemple d'introduction. Dans cette section, nous passerons en revue tous les ajouts et modifications.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

Dans cet exemple, la source Gulp est fournie avec un tableau de globs. Le premier inclut tous les fichiers qui se terminent par ".scss" également dans les sous-dossiers, et le second exclut ceux qui commencent par "_". De cette façon, nous pouvons utiliser la fonction intégrée @import de SCSS pour concaténer le fichier _page.scss.

 gulp.task('default', ['scss'], function() {

Ici, nous définissons la tâche "par défaut". La tâche "scss" est exécutée en tant que dépendance avant "default".

 gulp.watch('scss/**/*.scss', ['scss']);

Enfin, nous appelons la fonction watch de Gulp pour pointer vers n'importe quel fichier se terminant par ".scss" et chaque fois qu'un événement de modification se produit, pour exécuter la tâche "scss".

Vous êtes maintenant prêt à créer de nouveaux observateurs pour d'autres processus automatisés tels que la concaténation JavaScript, l'indication de code, la compilation CoffeeScript ou tout ce qui pourrait venir à l'esprit. Pour approfondir cette implémentation d'automatisation JavaScript, je propose d'ajouter gulp-notify qui vous avertira lorsqu'une tâche est exécutée. En outre, vous pouvez créer une tâche distincte pour réduire le code CSS résultant et faire en sorte que la tâche "scss" s'exécute en dépendance de celle-ci. Enfin, vous pouvez utiliser gulp-rename pour ajouter le suffixe ".min" aux fichiers résultants.

Plugins Gulp avancés pour l'automatisation JavaScript

Il existe des milliers de plugins dans la base de plugins de Gulp, dont certains vont bien au-delà de la simple automatisation JavaScript d'un processus de construction. Voici quelques exemples remarquables :

NavigateurSync

BrowserSync injecte CSS, JavaScript et actualise automatiquement le navigateur chaque fois qu'une modification est apportée. De plus, il contient une fonctionnalité ghostMode qui peut être utilisée pour effrayer vos collègues ou pour accélérer considérablement les tests de votre navigateur.

Naviguer

Browserify analyse les appels "require" dans votre application et les convertit en un fichier JavaScript groupé. En outre, il existe une liste de packages npm pouvant être convertis en code de navigateur.

Webpack

Semblable à Browserify, Webpack vise à convertir des modules avec des dépendances en fichiers statiques. Celui-ci donne plus de liberté à l'utilisateur quant à la façon dont les dépendances du module seront définies et ne vise pas à suivre le style de code de Node.js.

Karma

Gulp-karma apporte le tristement célèbre environnement de test à Gulp. Karma suit l'approche de moindre configuration que Gulp approuve également.

Conclusion

Dans ce didacticiel d'automatisation de processus, j'ai démontré la beauté et la simplicité de l'utilisation de Gulp comme outil de construction. En suivant les étapes décrites dans le didacticiel, vous serez maintenant prêt à automatiser entièrement votre processus de développement logiciel à la fois dans vos projets futurs et hérités. Investir du temps dans la mise en place d'un système de construction pour vos anciens projets vous fera certainement gagner un temps précieux à l'avenir.

Restez à l'écoute pour un tutoriel Gulp plus avancé à venir.