Share
Lorsque vous débutez dans le développement front-end et commencez à maîtriser HTML5, CSS et JavaScript, l'étape suivante évidente consiste à mettre la main à la pâte. outilsque la plupart des développeurs utilisent pour rester sains d'esprit dans cet espace complexe. Vous aussi méritez d’avoir plus de flexibilité et de fonctionnalités lors de l’écriture de vos feuilles CSS en utilisant Less. Vous aussi, vous méritez d’optimiser la bande passante en réduisant au minimum votre code JS. Vous aussi, vous méritez de pouvoir vérifier automatiquement que votre code JS est bon en utilisant JSHint.
Vous méritez toutes ces bonnes choses.
Vous commencez donc à utiliser tous ces outils à la main, en exécutant de plus en plus de lignes de commande manuellement. Parfois, vous oubliez de lancer le compilateur Less… Parfois, vous oubliez de lancer JSHint et un bogue est expédié…
Et tout à coup, vous vous demandez: existe-t-il une solution pour automatiser tous ces outils? Comment créer un workflow reproductible pour vous éviter de commettre des erreurs?
De toute évidence, une solution existe et deux outils en particulier vous attendent pour commencer: Grognement et Gorgée.
En tant que novice utilisant ces outils, vous vous demandez comment ils fonctionnent et lequel utiliser, n'est-ce pas? Bien, parfait alors, vous lisez le bon article!
Je vais vous expliquer comment utiliser Grunt et Gulp à l'aide d'un exemple très simple que vous pouvez télécharger depuis GitHub..
C'est un site web simple composé de trois fichiers:
Styles.less définit la feuille CSS de manière plus riche qu’il est possible d’utiliser un fichier CSS standard. En fin de compte, nous utilisons le compilateur Less pour créer un styles.css fichier. En utilisant Less, nous pouvons par exemple utiliser des variables dans le fichier CSS:
Obtenez plus d'informations sur Less dans ce guide de mise en route.
Le code JavaScript et HTML est très simple. La page devrait ressembler à ceci:
Vous devez d'abord comprendre le fonctionnement de Node.js Package Manager (npm)..
Npm est l'outil fourni avec Node.JS. Il est utilisé pour obtenir des outils et des frameworks tout en résolvant automatiquement leurs dépendances.
Par exemple, pour utiliser Less et le compiler dans un fichier CSS utilisable sur le Web, vous devez d'abord installer Less à l'aide de cette commande:
npm install -g less
Remarque: pour obtenir la ligne de commande npm, vous devez installer Node.js à partir du site Web Node..
Une fois que cela est fait, vous pouvez exécuter cette commande pour compiler des fichiers .less en .css:
lessc styles.less> styles.css
Npm utilise un fichier qu'il crée et stocke dans le dossier local dans lequel il travaille: package.json. Ce fichier utilise le format JSON (JavaScript Object Notation) pour indiquer à npm quel outil et quelle version sont installés, ainsi que les frameworks utilisés par le logiciel en cours. projet (qui est représenté par le dossier actuel).
Ce fichier est important pour Grunt et Gulp car il contiendra la liste des plugins téléchargés et utilisables dans votre flux de travail d'automatisation..
Pour créer un fichier package.json vide, vous pouvez utiliser la commande npm suivante:
npm init
Vous passerez en revue quelques questions auxquelles vous pourrez répondre à l’aide de l’option par défaut, puis vous serez prêt à commencer..
Dans ce fichier, vous aurez deux types de dépendances:
Npm vous propose essentiellement trois méthodes pour installer des packages:
Accentsconagua
-g ou -global option--save-dev optionLe troisième créera un devDependencies section / propriété à l'intérieur du fichier package.json.
Grunt est un pionnier dans le domaine des flux de travaux d'automatisation JavaScript. Il y a beaucoup d'utilisateurs connus de Grunt comme Twitter, jQuery et Modernizr.
Le principe de base pour Grunt est de nous donner un moyen facile de courir les tâches. Une tâche est un ensemble de fichiers de code et de fichiers de configuration déjà créés pour vous. Vous pouvez obtenir de nouvelles tâches en installant les plugins Grunt que vous obtiendrez avec npm. Vous pouvez trouver un plugin pour pratiquement tous les outils que vous pourriez utiliser, tels que Less et JSHint..
Pour exécuter Grunt, vous devez créer un fichier Grunt dans lequel vous spécifiez les tâches à exécuter et la configuration de chacune d’elles. Une fois que cela est fait, il vous suffit de lancer le grognement ligne de commande spécifiant la tâche que vous voulez exécuter (par défaut ou spécifique) et le fera automatiquement.
Passons maintenant à un guide étape par étape pour configurer tout cela..
Utilisez npm pour lancer le fichier:
npm init
Vous devrez répondre à quelques questions telles que le nom du projet et le fichier .js par défaut. Vous pouvez également choisir de créer le fichier manuellement et de définir son contenu sur:
"name": "nom-projet", "devDependencies": , "dépendances":
Vous devez installer Grunt globalement pour obtenir la ligne de commande et pour initialiser localement tout le matériel nécessaire au projet..
Courir:
npm installer -g grunt
Puis lancez-le localement:
npm installer grunt --save-dev
Note: N'oubliez pas le -dev partie pour qu'il soit spécifié comme l'un des devDependencies dans le package.json fichier.
Grunt fonctionne avec un fichier nommé gruntFile.js. Ce fichier contient tout ce dont Grunt a besoin, à savoir:
Grunt s'attend à ce que le fichier exporte une fonction unique prenant un paramètre nommé «grunt». Vous utiliserez cet objet pour effectuer toutes les actions relatives à Grunt..
Voici un fichier gruntfile minimal qui ne lit que le fichier package.json et crée un défaut tâche qui ne court rien.
Remarque: placez le fichier dans le dossier du projet, à côté du fichier package.json..
module.exports = function (grunt) // Configuration du projet. grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),); // tâche (s) par défaut. grunt.registerTask ('default', []); ; Vous pouvez l'exécuter pour vous assurer que tout est configuré correctement.
Pour ce faire, ouvrez une invite de commande sur le dossier du projet et exécutez:
grognement
Vous devriez voir quelque chose comme ça:
Maintenant que votre fichier Gruntfile est prêt, la prochaine étape consiste à ajouter un plugin et à l'utiliser. Tous les plugins peuvent être trouvés dans la liste sur le site Web de Grunt. L'une des tâches courantes effectuées dans un fichier Gruntfile consiste à vérifier si la syntaxe JavaScript est correcte. Pour ce faire, nous utilisons habituellement JSHint.
Ajoutons ceci à votre flux de travail grunt.
Si vous recherchez JSHint sur la page des plugins grunt, vous trouverez grunt-contrib-jshint, ce qui correspond à ce dont nous avons besoin.!
Dans le dossier du projet, exécutez:
npm installer grunt-contrib-jshint --save-dev
Ceci fait, vous devez l’ajouter dans votre fichier Gruntfile.js. Il y a deux étapes simples pour cela:
Pour charger le plugin, utilisez le loadNpmTasks une fonction:
// Charge le plugin qui fournit la tâche "jshint" grunt.loadNpmTasks ('grunt-contrib-jshint');La configuration est faite dans le initConfigfonction où vous devez ajouter une nouvelle propriété à l'objet indiqué dans le paramètre. Ce doit être le nom de la tâche que vous souhaitez ajouter et est lié au plugin que vous utilisez. Le meilleur moyen de connaître ce nom et la liste des options disponibles pour cette tâche consiste à consulter la documentation du plug-in. Vous trouverez toujours un échantillon bien documenté.
Par exemple, dans notre exemple, nous souhaitons vérifier tous les fichiers JavaScript sauf le fichier gruntfile.js. Nous souhaitons également activer un ensemble de règles pour archiver les fichiers JavaScript tels que eqeqeq pour assurer que nous utilisons le triple égal au besoin.
Voici la initConfig fonction modifiée:
Vous pouvez exécuter votre tâche en utilisant la ligne de commande suivante (où vous spécifiez le nom de la tâche en tant que paramètre pour grognement):
grunt jshint
Le résultat est ici:
Vous devez juste exécuter cette commande et il vous invitera automatiquement pour toutes les erreurs rencontrées.
Félicitations, vous avez maintenant une tâche automatisée dans votre flux de travail grunt!
Votre tâche JSHint fonctionne bien, mais elle est un peu seule dans le flux de travail. Habituellement, nous utilisons des outils tels que Grunt pour exécuter plusieurs tâches..
Il est très facile d’en ajouter d’autres, il suffit de suivre les mêmes étapes. Supposons que vous souhaitiez maintenant ajouter la compilation de votre fichier less dans le processus automatisé. Si vous recherchez dans les plugins Grunt, vous trouverez un grunt-contrib-less plugin que vous pouvez installer dans votre dossier de projet:
npm installer grunt-contrib-less --save-dev
Comme pour la tâche JSHint, vous devez ajouter la configuration:
Ensuite, chargez la tâche:
Vous pouvez maintenant exécuter Grunt et spécifier le Moins tâche: cela lancera seulement Less. C'est bon, mais vous voulez exécuter toutes les tâches, n'est-ce pas? C’est le rôle du défauttâche.
Quand tu viens de courir grognement sans spécifier aucune tâche, il recherchera un défaut tâche et exécutez toutes les tâches spécifiées dans son tableau. Vous pouvez le modifier pour courir Moins et jshint. Notez que pour ajouter un groupe de tâches comme défaut, vous devez appeler le registerTaskune fonction:
A partir de maintenant, quand tu cours grognement, ça va courir jshint, et alors Moins:
Vous pouvez ajouter n’importe quelle tâche et spécifier un autre groupe de tâches comme défaut et appelez-les en passant leur nom comme argument à la grognement ligne de commande.
Facile, droit?
Maintenant, vous êtes un développeur heureux. Toutes vos tâches répétitives sont automatisées dans un flux de travail grunt et il vous suffit d'exécuter grunt pour qu'elles s'exécutent. Mais cela peut être fait encore plus facilement. Cela peut être fait automatiquement.
Pour ce faire, vous pouvez ajouter une tâche spécifique nommée regarder. Cette tâche inspectera en permanence votre dossier de travail et, en fonction de règles, lorsqu'un fichier sera modifié, grunt exécutera une tâche associée..
Tout d'abord, installez regarder dans votre dossier de projet:
npm installer grunt-contrib-watch --save-dev
Chargez-le comme toutes les autres tâches à l'aide du loadNpmTasks fonction et le configurer. La partie configuration est un peu différente ici car vous devez spécifier une configuration pour chaque tâche que vous souhaitez couvrir à l'aide de regarder.
Pour plus d'informations, vous pouvez lire la documentation complète de cette tâche..
Quand vous voulez activer regarder, vous devez seulement exécuter la commande suivante:
grunt regarder
Et il exécutera des tâches chaque fois qu'un fichier est modifié et que ce fichier fait partie des fichiers surveillés pour la tâche spécifique..
Et c'est tout! Vous savez maintenant tout pour créer un flux de travail automatisé avec grunt.
Gulp est une alternative au grognement. Il est un peu plus récent et a la réputation d'être plus flexible que grunt. Avant de choisir celui que vous utiliserez, examinons le fonctionnement de gulp.
Gulp est un outil d'automatisation du flux de travail. Comme grunt, cela fonctionne avec npm et le fichier package.json. Tous les plugins disponibles seront également téléchargés avec npm et ajoutés en tant que devDependencies dans le fichier package.json.
L'une des principales différences est que Gulp utilise des flux. Un flux est un ensemble de fonctions à travers lequel un fichier ira et sera modifié en mémoire. Le fichier sera écrit sur le disque uniquement à la fin du processus, donc il est plus efficace. Les tâches Grunt, en revanche, fonctionnent comme des silos et ne peuvent pas être chaînées.
Voyons rapidement comment fonctionne Gulp en suivant quelques étapes faciles..
Semblable à Grunt, vous devez d’abord créer le fichier package.json. Vous pouvez utiliser exactement la même technique que celle utilisée pour l'échantillon Grunt..
Une fois le fichier package.json créé, installez gulp globalement et localement en utilisant:
npm install -g gulp
et
npm install gulp --save-dev
Cela installera la ligne de commande gulp et tout le nécessaire pour exécuter un flux de travail gulp.
Vous devez ensuite installer gulp utils, qui contient des fonctions communes aux autres plugins:
npm installez gulp-util --save-dev
Enfin, créez le fichier gulp minimum, qui ressemblera à ceci:
Comme vous pouvez le constater, c'est un peu différent de la syntaxe Grunt. En gulp, les plugins sont chargés en utilisant le exiger syntaxe que vous pouvez utiliser si vous êtes un développeur Node.js. Il y a aussi défaut tâche définie à l'aide du gulp.task une fonction.
Si vous exécutez le gorgéeligne de commande en utilisant une invite de commande dans le dossier du projet, vous devriez voir un résultat comme celui-ci:
Pour utiliser un plugin dans gulp, vous utilisez la même fonction que celle utilisée pour créer le défaut tâche. En effet, il n'est pas nécessaire d'utiliser un nom spécifique pour créer une tâche. Vous venez d'appeler gulp.task, définissez le nom souhaité et attribuez-lui une fonction JavaScript en tant que second paramètre. Quand gulp exécute la tâche, il exécutera cette fonction.
Pour utiliser un plugin, appelez-le en utilisant le nom que vous avez choisi lorsque vous en avez besoin. Habituellement, vous l'appelez dans le cadre d'un flux de travail en streaming qui commence généralement par une sélection de fichiers. Ceci est fait avec le gulp.src une fonction. Il sélectionnera un groupe de fichiers et retournera un flux pouvant être utilisé par une autre fonction en utilisant tuyau. C'est ainsi que vous pouvez chaîner plusieurs actions sans les écrire sur le disque. Vous venez de passer le flux d'un plugin à un autre.
Voici un exemple de base pour Less:
Nous d'abord require ('gulp-less') charger le Moins plugin pour gulp. (Nous l'avons eu en utilisant npm install gulp-less --save-dev).
ensuite gulp.src sélectionnera tous les .Moins les fichiers, nous «pipi» à la Moins()fonction et il est enfin «canalisé» à gulp.destqui indique où écrire le résultat. Comme gulp.src peut sélectionner plusieurs fichiers, gulp.dest spécifie un dossier..
Une fois que vous avez compris le modèle de tuyauterie, vous pouvez facilement obtenir le même résultat que celui obtenu avec Grunt..
La puissance de gulp réside dans le fait que vous pouvez créer des tâches personnalisées dans lesquelles vous appelez plusieurs plug-ins et que vous pouvez les associer comme vous le souhaitez..
Note: il y a évidemment aussi un gueule-montre plugin, vous pouvez utiliser pour automatiser le lancement de votre flux de travail!
J'espère que vous comprenez maintenant mieux pourquoi vous avez besoin d'un workflow d'automatisation et comment vous pouvez utiliser Grunt ou Gulp pour l'obtenir..
Le choix de l'un d'entre eux est davantage lié à la tâche que vous souhaitez accomplir..
Grunt est facile à utiliser. Vous n'êtes pas obligé de comprendre le système de tuyauterie, et la réalisation de tâches simples sera plus simple. C'est un outil vraiment mature, utilisé par beaucoup d'éditeurs et de développeurs connus, et il y a beaucoup de plugins disponibles.
Cela dit, la façon dont Gulp est conçu peut vous donner beaucoup de flexibilité. Il existe depuis un certain temps déjà, et même si vous ne trouverez pas autant de plugins que vous le ferez pour Grunt, tous les classiques sont disponibles pour Gulp.
Si vous utilisez un flux de travail vraiment standard avec des étapes courantes telles que JSHint, Uglifying, CSS, etc., Grunt est un bon choix. Si vous êtes prêt pour des tâches plus compliquées, Gulp sera un bon ailier.
Microsoft propose de nombreuses formations gratuites sur de nombreuses rubriques JavaScript open source et nous avons pour mission de créer davantage avec Microsoft Edge. En voici quelques unes à consulter:
Et quelques outils gratuits pour commencer: Code Visual Studio, Azure Trial et outils de test inter-navigateurs, tous disponibles pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
