Par Stephen Afam-Osemene Introduction
Avec la complexité croissante des projets Javascript et le besoin d’automatiser les tâches, de suivre les performances des apps et d’exécuter certaines activités de maintenance, il est devenu très saillant de décider quel type d’outil de build adopter.Avant que les outils de build ne deviennent une nécessité, il n’était pas clair comment gérer les tâches de routine. Ce n’était pas très nécessaire parce que Javascript n’avait pas particulièrement besoin d’être compilé ; cependant, avec des projets comme les applications à page unique, et l’avènement des outils build, les tâches qui se répètent sont maintenant automatisées.Voyant qu’il est devenu plus qu’une nécessité d’utiliser des outils build, les développeurs de logiciels dans ce temps présent sont confrontés au défi de choisir un qui est parfait pour leur projet.
Dans cet article, nous allons comparer Grunt, Gulp et Webpack par rapport aux caractéristiques suivantes :
- Facilité d’utilisation
- Popularité
- Fiabilité
- Extensibilité
Grunt et Gulp sont des task runners, tandis que Webpack est un bundler de modules. Les task runners sont essentiellement utilisés pour automatiser les tâches dans un processus de développement. Certaines de ces tâches comprennent la compression des fichiers JS, la compilation des fichiers Sass, la surveillance des modifications de fichiers, la réduction des fichiers et la préfixation automatique. Les bundlers de modules effectuent la tâche des task runners, et vont plusieurs étapes plus loin.Espérons qu’à la fin de l’article, il sera plus clair quel outil de build utiliser pour votre projet.
Facilité d’utilisation
Plus un outil est complexe, plus il est difficile de l’utiliser. En tant que task runners, Gulp et Grunt offrent des fonctionnalités telles que la minification du code, le prétraitement CSS, les tests unitaires et une liste d’autres.
Par rapport à Grunt ou Webpack, Gulp est beaucoup plus facile à utiliser. Il est possible de démarrer un projet en utilisant Gulp en quelques minutes. Grunt, cependant, présente moins de tracas de configuration que Webpack.
Pour configurer Gulp, on procède comme suit
- Vérifier que node, npm et npx sont installés
- Installer la CLI de Gulp en utilisant
npm install --global gulp-cli - Créer un paquet.json pour devDependencies
- Installer le paquet gulp dans les devDependencies en utilisant
npm install --save-dev gulp@next - Créer un fichier gulp.js où les tâches seront écritesfonction defaultTask(cb) { // placez le code pour votre tâche par défaut ici cb();}exports.default = defaultTask
Pour utiliser Grunt, vous devez faire ce qui suit :
- Mettre à jour votre npm en utilisant
npm update -g npm - Installer Grunt CLI en utilisant npm install -g grunt-cli
- Configurer votre paquet.json où vos devDependencies sont listées
- Créer un fichier Gruntfile.js où les tâches sont écrites. Les tâches sont toujours écrites à l’intérieur de ce bloc:module.exports = function(grunt) { // Les tâches Grunt vont ici};
Les processus de configuration de Gulp et de Grunt sont similaires. Cependant, Gulp est plus expressif ; il vous permet d’écrire du code qui énonce clairement sa fonction. Gulp est basé sur les flux Node, ce qui permet le pipelining. Grunt, quant à lui, s’appuie sur des fichiers de configuration de données où chaque fichier source et de destination doit être déclaré. Lorsque le projet devient plus important, Grunt devient encore plus lourd à gérer.
Si, par exemple, vous devez compiler Sass, minifier le fichier CSS résultant et Uglifier votre fichier JS en utilisant Grunt, le fichier Gruntfile.js ressemblera à ceci
module.exports = function (grunt) { grunt.initConfig({ sass: { dist: { files: { 'dist-grunt/css/style.css': 'assets/scss/style.scss' } } }, cssmin: { dist: { files: { 'dist-grunt/css/styles.min.css': } } }, uglify: { dist: { files: { 'dist-grunt/js/scripts.min.js': } } }, grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', );};En revanche, si le même processus doit être effectué avec Gulp, le gulp.js ressemblera à ceci:
var gulp = require('gulp');var sass = require('gulp-sass');var cleanCSS = require('gulp-clean-css');var uglify = require('gulp-uglify');gulp.task('sass', function () { return gulp.src('assets/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('css', , function () { return gulp.src() .pipe(cleanCSS()) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('default', );Gulp et Grunt sont tous deux plus faciles à configurer par rapport à Webpack.
Pour utiliser Webpack, vous devez faire ce qui suit :
- Installer Nodejs et Npm
- Dans votre terminal, créez un dossier Webpack en utilisant
mkdir folder-name - Initialisez le projet Nodejs en utilisant
npm init -y - Créez les fichiers suivants
touch index.html webpack.config.js index.js - Installez Webpack et le serveur de développement Webpack en utilisant
npm i--save-dev webpack@latest webpack-dev-server@latest - Installer Webpack globalement
npm i -g webpack@latest -
Écrire la configuration de Webpack dans le fichier
webpack.config.js.const webpack = require(‘webpack’);
let config = { entry : ‘./index.js’, output : { filename : ‘output.js’ }}module.exports = config;
La mise en place ci-dessus est le démarrage de base de Webpack. Webpack a diverses fonctionnalités utiles et peut faire tellement plus. La pléthore de possibilités découvertes avec Webpack pourrait justifier ses complexités. Il faut plus de temps pour comprendre le fonctionnement de Webpack ; cela peut aussi devenir encombrant lorsqu’il s’agit de gérer plusieurs configurations pour plusieurs environnements.
Popularité
Les métriques pour mesurer la popularité de chacun de ces outils diffèrent. Grunt existe depuis longtemps avant Gulp, et de nombreux développeurs l’ont largement utilisé. Cependant, selon l’enquête State of JavaScript 2018, Webpack est mieux classé que Gulp et Grunt.
On constate un intérêt croissant pour l’apprentissage de Webpack ; cela se justifie en voyant le large éventail de possibilités rendues disponibles par son utilisation.
En utilisant également les statistiques de Github, Webpack, Gulp et Grunt ont plus de 41 000, 30 000 et 11 000 étoiles respectivement.
Fiabilité
Gulp, Grunt et Webpack ont une grande dépendance aux plugins. Ces trois outils ont de grandes communautés où les problèmes pourraient être abordés et corrigés. Pour Gulp et Grunt, il y a une forte dépendance à l’auteur du plugin pour maintenir les plugins, et parfois, il y a peu ou pas de documentation sur laquelle se rabattre lorsqu’un problème est rencontré. Le résultat est généralement d’attendre que ces auteurs fassent des mises à jour ou de se résoudre à les corriger soi-même. Cependant, la plupart des plugins Webpack sont maintenus par l’équipe centrale de Webpack, tandis que le reste est géré par la communauté de Webpack ; et cela le rend plus fiable.
Extensibilité
Gulp, Grunt et Webpack ont été améliorés au cours des dernières années. Ils ont tous plus de place pour des plugins plus récents, encore plus efficaces et standardisés.
Certains utilisateurs de Grunt commencent à adopter Gulp parce qu’il permet le piping, et cela explique pourquoi Grunt aurait bientôt une mise à jour qui permet également le piping. Le piping permet aux utilisateurs de gulp d’attacher la sortie d’une tâche à une autre dépendance, ce qui rend le code plus court et permet de travailler plus rapidement.
Pour l’instant, Gulp semble plus extensible que Grunt car lorsque le projet évolue, il n’est pas si difficile de gérer le fichier gulp. Gulp utilise des plugins qui effectuent chacun une seule tâche, par opposition à Grunt où un plugin peut effectuer plusieurs tâches.
Webpack peut être étendu même au-delà de ses fonctionnalités de base à l’aide de plugins et de chargeurs, le seul problème étant les complications qui peuvent survenir lors de sa configuration. Cependant, puisque Webpack regroupe tous les modules qui ont des dépendances, il n’est pas si pénible de travailler sur des projets Webpack, même de grande envergure.
Au moment de la rédaction, Grunt a 6 459 plugins dans son registre de plugins, tandis que Gulp a 3 672 plugins répertoriés sur son propre registre de plugins. Avec autant de plugins pour les deux, vous êtes susceptible de trouver un plugin pour faire tout ce dont vous avez besoin.Webpack a son propre ensemble de plugins officiels répertoriés ici, et une liste d’autres plugins tiers qui pourraient être trouvés à awesome-webpack.
Conclusion
Webpack est similaire à une combinaison de Gulp/Grunt et Browserify. Webpack est en quelque sorte nécessaire pour les projets qui ont l’intention de passer à l’échelle. C’est pourquoi il est souvent utilisé avec React ou Angular.
Grunt et Gulp pourraient être utilisés lorsque le projet est modéré, ou assez grand. Si vous êtes vraiment à l’aise pour écrire des fonctions JS, alors Gulp est conseillé, mais, si vous allez plutôt écrire des configurations de tâches, alors Grunt suffira.