Share
Les avantages des coureurs de tâches dans le développement de logiciels sont évidents. Ils aident à automatiser les tâches courantes, souvent fastidieuses, et vous permettent de vous concentrer sur des tâches plus importantes, telles que la rédaction de code génial. Sérieusement, la possibilité d'automatiser des tâches telles que la compression d'image, la minification, les tests unitaires et bien plus encore représente un gain de temps considérable..
Pour de nombreux développeurs front-end, le gestionnaire de tâches à ce jour a été Grunt, ce qui vous permettait de définir vos tâches à l'aide de JavaScript dans un fichier appelé Gruntfile.js (AKA un Gruntfile). Fondamentalement, si vous connaissez JavaScript, la configuration d'une tâche Grunt est un processus assez simple et la diversité des plugins tiers pour d'autres outils tels que JSHint, Sass et Uglify en fait l'un des outils les plus flexibles disponibles..
Pour la plupart, Grunt a été le coureur de choix, mais récemment, un nouveau nom, Gulp.js, a suscité beaucoup d’attention pour sa facilité d’installation et son format de fichier de configuration incroyablement simple, qui le rend facilement lisible et facile à gérer..
Dans ce tutoriel, je vais vous montrer comment installer Gulp et créer un simple fichier de configuration pour vous familiariser avec ce nouveau grand coureur de tâches..
Gulp.js est un programme d'exécution de tâches basé sur un nœud, tout comme Grunt. Vous devez donc installer Node.js pour l'utiliser. Cela peut se faire de différentes manières, notamment en fonction de votre système d'exploitation. Étant sous OS X, j'ai choisi d'utiliser nvm, le script génial de Tim Caswell pour la gestion de plusieurs versions de Node.js. Vous pouvez également télécharger les fichiers binaires directement à partir du site Node.js. Si vous êtes totalement nouveau dans Node.js, assurez-vous de consulter la série Nettuts + pour vous mettre à jour sur Node.js.
Gulp.js est livré sous forme de module Node, ce qui facilite son installation avec npm (Node Package Manager). Pour installer Gulp, ouvrez votre terminal et tapez ce qui suit:
npm install -g gulp
Cela tire Gulp de la npm registre et le configure globalement sur votre système afin que vous puissiez accéder via la ligne de commande.
À toutes fins utiles, Gulp.js est installé à ce stade et vous êtes prêt à commencer à l'utiliser avec vos projets.
Pour utiliser Gulp dans votre projet, vous devez effectuer quelques tâches essentielles:
Ces étapes doivent être effectuées dans le répertoire de votre projet afin que les packages et les fichiers de configuration soient disponibles pour Gulp..
Commençons par installer les dépendances:
npm installer --save-dev gulp gulp-util
Maintenant, nous devrons installer les plugins Gulp qui effectueront les tâches que nous définissons dans notre fichier de configuration. Ces plugins sont aussi des modules de paquetage Node donc nous allons utiliser npm à nouveau pour les installer.
npm installer --save-dev gulp-uglify gulp-concat
Dans mon cas, j'installe deux plugins qui me permettront de réduire / compresser mon code JavaScript à l'aide du compresseur Uglify.js et de concaténer tous mes fichiers JavaScipt en un seul fichier source..
Notez que j'ai utilisé le --save-dev flag pour installer les dépendances Gulp et les plugins dont j'ai besoin pour mon projet. Cela garantit qu’une entrée pour chaque élément est ajoutée à ma liste devDependencies dans mon package.json fichier comme ceci:
"devDependencies": "gulp-util": "~ 2.2.13", "gulp": "~ 3.5.0", "gulp-uglify": "~ 0.2.0", "gulp-concat": " ~ 2.1.7 "
Cela garantit que toutes les dépendances de paquet pour ce projet peuvent être facilement installées ultérieurement à l'aide de npm. Si vous n'avez pas de package.json déposer dans votre projet, il suffit de taper npm init sur la ligne de commande ou ouvrez un nouveau fichier dans votre éditeur, incluez des accolades ouvrantes et fermantes à l'intérieur et enregistrez-le sous le nom "package.json". Puis relancez le npm commandes listées ci-dessus pour le mettre à jour. Notez que l'ajout d'accolades est nécessaire. Sinon, lorsque vous essayez d'utiliser le --save-dev drapeau, npm jettera une erreur en disant que ce n'est pas un fichier JSON valide.
Alors que je n'utilise que deux plugins pour mon tutoriel, Gulp propose plus de 200 plugins pour tous les types de fonctionnalités, notamment:
et beaucoup plus.
Comme Grunt, Gulp a un fichier de configuration homonyme appelé gulpfile.js qui définit tous les plugins requis avec les tâches que vous allez exécuter. Vous devrez créer un fichier appelé à la racine du dossier de votre projet..
La syntaxe est simple et concise, ce qui la rend très lisible et facilement compréhensible:
Accentsconagua
var gulp = require ('gulp'), gutil = require ('gulp-util'), uglify = require ('gulp-uglify'), concat = require ('gulp-concat'); Cela indique simplement à Gulp quels plugins sont nécessaires pour effectuer les tâches définies.
Ensuite, nous devons définir les tâches qui seront exécutées par Gulp. Dans mon cas, je cherche à faire deux choses:
Définir une tâche est à toutes fins utiles un appel JavaScript. Nous utilisons la méthode Gulp tâche() pour définir la tâche que nous voulons exécuter:
gulp.task ('js', function () gulp.src ('./ js / *. js') .pipe (uglify ()) .pipe (concat ('all.js')) .pipe (gulp. dest ('./ js'));); En regardant le code ci-dessus, il y a un mélange d'appels de méthode à partir des plugins que j'ai spécifiés comme requis. La première méthode, tâche(), prend un nom sémantique pour la tâche (dans ce cas, 'js') et une fonction anonyme qui contient la vraie viande. Décomposons le code:
gulp.src ('./ js / *. js') le src () Cette méthode me permet de spécifier où trouver les fichiers JavaScript que je souhaite compresser et de les transformer en un flux représentant une structure de fichier pouvant être transmise aux plug-ins pour traitement. Cela fait partie de l'API Streams de Node.js et est l'une des raisons de la capacité de Gulp à disposer d'une syntaxe d'API aussi concise et concise..
.pipe (uglify ())
le tuyau() méthode prend le flux source dérivé de la src () méthode et le transmet au plugin spécifique référencé. Dans cet exemple, le plugin uglify recevrait le flux source.
.pipe (concat ('all.js')) Comme uglify, le plugin concat reçoit le flux source via le tuyau() méthode et concatène tous les fichiers JavaScript dans un seul fichier appelé "all.js"
.pipe (gulp.dest ('./ js')); Enfin, en utilisant Gulp's dest () méthode, all.js est écrit dans mon dossier cible. Le processus est très simple et très lisible.
La dernière chose à faire est de mettre à jour la tâche Gulp par défaut pour exécuter notre tâche "js".
gulp.task ('default', function () gulp.run ('js');); En revenant à la ligne de commande et en tapant 'gorgée', Gulp trouve le gulpfile.js fichier, charge tous les plugins et dépendances requis, lance la tâche par défaut et lance mon 'js' tâche. Vous pouvez voir le résultat final ici de la minification et de la concaténation de mon fichier JavaScript jQuery:
Prenant cela un peu plus loin, Gulp fournit également une autre méthode appelée regarder() qui fournit un moyen de vérifier automatiquement les modifications apportées à une ressource spécifique. Cela permet une grande automatisation des tâches plutôt que de devoir taper manuellement manuellement 'gorgée' à la ligne de commande.
gulp.watch ('./ js / *', function () gulp.run ('js');); Quand cela fonctionnera, Gulp continuera à surveiller directement les modifications apportées aux fichiers spécifiés et, si une modification survient, réexécutera le processus. 'js' tâche de réduire et concaténer les fichiers JavaScript. Très sympa!
Lorsque j'ai entendu parler de Gulp pour la première fois, ma première réaction a été "Oh mon frère, un autre outil!". Boy était je Gulp.js a vraiment une syntaxe et une API convaincantes qui facilitent la configuration de vos tâches. Bien qu'il ne dispose pas de la même quantité de plugins que Grunt, son référentiel de plugins semble se développer rapidement, particulièrement avec l'intérêt actuel des développeurs..
J'ai déjà parlé à de nombreux développeurs qui migrent activement vers ce site. Il semble donc que le moment soit propice pour entrer dans Gulp.js.
