Comment utiliser Grunt pour automatiser votre flux de travail [Tutoriels]

Je suis un grand défenseur de l'automatisation parce que cela rend la vie beaucoup plus simple. Pourquoi consacrer du temps à des tâches mesquines et monotones qui aspirent votre force de vie lorsque vous avez un ordinateur pour faire quelque chose pour vous? Cela est particulièrement vrai pour le développement Web.

De nombreuses tâches de développement peuvent être une corvée. Lors du développement, vous souhaiterez peut-être compiler du code. Lors de la publication d'une version de développement, vous pourrez concaténer et réduire au minimum les fichiers, supprimer les ressources réservées au développement, etc. Même ceux qui sont relativement simples, comme supprimer un groupe de fichiers ou renommer des dossiers peut prendre une grande partie de notre temps.

Dans cet article, je vais vous montrer comment vous simplifier la vie en tirant parti de l'excellente fonctionnalité offerte par Grunt, un gestionnaire de tâches Javascript. Je vous guiderai tout au long du processus, donc pas d'inquiétude, même si vous n'êtes pas un assistant javascript!

Plus sur Hongkiat.com:

CSSMatic rend CSS facile pour les concepteurs Web
Automatisation des tâches sous Mac avec actions de dossier
Automatisez vos fichiers Dropbox avec des actions
10 applications pour aider à automatiser les tâches sur votre appareil Android
Comment sauvegarder (automatiquement) votre site web dans Dropbox

Installer Grunt

L'installation de Grunt est assez facile car il utilise le gestionnaire de packages de nœud. Cela signifie que vous devrez peut-être également installer Node lui-même. Ouvrez un terminal ou une invite de commande (j'appellerai ce terminal à partir de maintenant) et entrez nmp -v.

Si vous voyez un numéro de version, vous avez npm installé, si vous voyez une erreur "commande introuvable", vous devrez l'installer en allant sur la page de téléchargement des noeuds et en sélectionnant la version dont vous avez besoin.

Une fois le nœud installé, obtenir Grunt consiste en une seule commande émise dans le terminal:

npm installer -g grunt-cli

Usage basique

Vous utiliserez Grunt sur une base de projet à projet puisque chaque projet aura des exigences différentes. Commençons un projet maintenant en créant un dossier et en y accédant également via notre terminal.

Deux fichiers constituent le cœur de Grunt: package.json et Gruntfile.js. Le fichier de paquet définit toutes les dépendances tierces que votre automatisation utilisera, le fichier Gruntfile vous permet de contrôler Comment exactement ceux-ci sont utilisés. Créons maintenant un fichier de package sans système d'exploitation avec le contenu suivant:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Le nom et la version sont à vous, les dépendances doivent contenir tous les packages que vous utilisez. Nous ne faisons rien pour le moment, nous allons donc simplement nous assurer que Grunt est ajouté en tant que dépendance..

Vous vous demandez peut-être ce que la ligne sinueuse (~) appelée tilde y fait.

Des versions peuvent être requises à l'aide des règles du versionneur sémantique pour npm. En un mot:

Vous spécifiez une version exacte comme 4.5.2
Vous pouvez utiliser supérieur à / inférieur à pour indiquer une version minimale ou maximale telle que > 4.0.3
L'utilisation du tilde spécifie un bloc de version. En utilisant ~ 1.2 est considéré comme 1.2.x, toute version supérieure à 1.2.0 mais inférieure à 1.3

Il existe beaucoup plus de moyens de spécifier les versions, mais cela suffit pour la plupart des besoins. La prochaine étape consiste à créer un fichier Gruntfile qui effectuera nos automatisations..

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ;

Ceci est fondamentalement le squelette d'un fichier Grunt; il y a deux lieux d'intérêt. Un endroit est à l'intérieur du initConfig () une fonction. C’est là que va toute la configuration de votre projet. Cela comprendra des tâches telles que la gestion de la compilation LESS / SASS, la minification des scripts, etc..

Le deuxième emplacement est en dessous de cette fonction où vous spécifiez des tâches. Vous pouvez voir une tâche spécifiée nommée “défaut”. Il est vide pour le moment, donc il ne fait rien, mais nous développerons cela plus tard. Les tâches mettent essentiellement en ordre des morceaux de notre configuration de projet et les exécutent.

Par exemple, une tâche nommée “des scripts” peut concaténer tous nos scripts, puis réduire le fichier résultant, puis le déplacer à son emplacement final. Ces trois actions sont toutes définies dans la configuration du projet mais sont “Tirés ensemble” par la tâche. Si ce n'est pas encore clair, ne vous inquiétez pas, je vais vous montrer comment faire..

Notre première tâche

Créons une tâche qui minimise un fichier javascript pour nous.

Il y a quatre choses que nous devons faire chaque fois que nous voulons ajouter une nouvelle tâche:

Installer un plugin si nécessaire
Exigez-le dans le fichier Grunt
Écrire une tâche
Ajoutez-le à un groupe de tâches si nécessaire

(1) Trouver et installer le plugin

Le moyen le plus simple de trouver le plugin dont vous avez besoin est de taper quelque chose comme ceci dans Google: “minify plugin javascript grunt”. Le premier résultat devrait vous mener au plugin grunt-contrib-uglify qui est exactement ce dont nous avons besoin.

La page Github vous dit tout ce que vous devez savoir. L'installation est une seule ligne dans le terminal, voici ce que vous devez utiliser:

 npm installer grunt-contrib-uglify --save-dev

Vous devrez peut-être exécuter ceci avec les privilèges d'administrateur. Si vous obtenez quelque chose comme npm ERR! S'il vous plaît essayez de réexécuter cette commande en tant que root / administrateur. Chemin faisant, tapez simplement sudo avant la commande et entrez votre mot de passe lorsque vous y êtes invité:

 sudo npm installe grunt-contrib-uglify --save-dev

Cette commande analyse en fait votre package.json fichier et l'ajoute comme une dépendance là-bas, vous n'aurez pas à le faire manuellement.

(2) Require dans le fichier Grunt

La prochaine étape consiste à ajouter votre Gruntfile en tant qu’exigence. J'aime ajouter des plugins en haut du fichier, voici mon Gruntfile complet après avoir ajouté grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ;

(3) Créer une tâche pour minifier les scripts

Comme nous en avons discuté, cela devrait se faire dans le initConfig () une fonction. La page Github pour le plugin (et la plupart des autres plugins) vous fournit de nombreuses informations et exemples. Voici ce que j'ai utilisé dans mon projet de test.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js'

C'est assez simple, j'ai spécifié le scripts.js fichier dans le répertoire js de mon projet et la destination du fichier modifié. Il y a plusieurs façons de spécifier les fichiers source, nous y reviendrons plus tard..

Pour l'instant, jetons un coup d'œil à l'intégralité du fichier Grunt après l'ajout de celui-ci, afin de vous assurer que tout se passe bien..

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ;

(4) Ajouter cette configuration à un groupe de tâches

Pour le moment, vous pouvez aller sur votre terminal et taper grogner uglify mais nous aurons besoin de groupes de tâches pour exécuter plusieurs tâches ultérieurement. Nous avons la tâche par défaut vide, attendant juste que quelque chose soit ajouté, modifions-le comme suit:

 grunt.registerTask ('default', ['uglify']);

A ce stade, vous devriez pouvoir aller au terminal, tapez grognement et voir la minification avoir lieu. N'oubliez pas de créer un scripts.js dossier de cours!

Cela n'a pas pris beaucoup de temps à mettre en place l'a fait? Même si vous êtes novice dans ce domaine et qu'il vous a fallu un certain temps pour suivre les étapes, le gain de temps économisé dépassera celui consacré à quelques utilisations.

Concaténer des fichiers

Regardons concaténer des fichiers et apprendre à spécifier plusieurs fichiers en tant que cible le long du chemin.

La concaténation est le processus consistant à combiner le contenu de plusieurs fichiers en un seul fichier. Nous aurons besoin du plugin grunt-contrib-concat. Travaillons à travers les étapes:

Pour installer le plugin, utilisez npm installer grunt-contrib-concat --save-dev dans le terminal. Une fois cela fait, assurez-vous de l'ajouter à votre Gruntfile comme avant d'utiliser grunt.loadNpmTasks ('grunt-contrib-concat');.

La prochaine étape est la configuration. Associons trois fichiers spécifiques, la syntaxe sera familière.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,,

Le code ci-dessus prend les trois fichiers donnés comme source et les combine dans le fichier donné comme destination..

C'est déjà assez puissant mais que se passe-t-il si un nouveau fichier est ajouté? Avons-nous besoin de revenir ici tout le temps? Bien sûr que non, nous pouvons spécifier un dossier complet de fichiers à concaténer.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,,

Désormais, tous les fichiers javascript du dossier dev / js seront fusionnés en un seul gros fichier: js / scripts.js, beaucoup mieux!

Il est maintenant temps de créer une tâche pour pouvoir concaténer certains fichiers..

 grunt.registerTask ('mergejs', ['concat']);

Ce n’est plus la tâche par défaut, nous devrons donc taper son nom dans le terminal lorsque nous émettrons le message. grognement commander.

 grunt mergejs

Automatiser notre automatisation

Nous avons déjà fait beaucoup de progrès mais il y a plus! Pour l'instant, lorsque vous voulez concaténer ou réduire, vous devez vous rendre sur le terminal et taper la commande appropriée. Il est grand temps de jeter un coup d'œil au regarder commande qui fera cela pour nous. Nous allons aussi apprendre à exécuter plusieurs tâches en même temps.

Pour commencer, nous devons nous saisir de grunt-contrib-watch. Je suis sûr que vous pouvez l'installer et l'ajouter au Gruntfile vous-même, donc je vais commencer par vous montrer ce que j'utilise dans mon projet de test..

 regarder: scripts: fichiers: ['dev / js / *. js'], tâches: ['concat', 'uglify'],,

J'ai nommé un ensemble de fichiers à regarder “des scripts”, juste pour que je sache ce que ça fait. Dans cet objet, j'ai spécifié des fichiers à surveiller et des tâches à exécuter. Dans l'exemple de concaténation précédent, nous avons rassemblé tous les fichiers du répertoire dev / js..

Dans l'exemple de minification, nous avons minifié ce fichier. Il est judicieux d’observer les modifications dans le dossier dev / js et d’exécuter ces tâches chaque fois que vous en avez besoin..

Comme vous pouvez le constater, plusieurs tâches peuvent être appelées facilement en les séparant par des virgules. Elles seront effectuées en séquence, d’abord la concaténation, puis la minification dans ce cas. Cela peut aussi être fait avec des groupes de tâches, ce qui explique pourquoi ils existent.

Nous pouvons maintenant modifier notre tâche par défaut:

 grunt.registerTask ('default', ['concat', 'uglify']);

Nous avons maintenant deux choix. Chaque fois que vous voulez concaténer et réduire vos scripts, vous pouvez basculer vers le terminal et taper grognement. Vous pouvez également utiliser la commande watch pour lancer le visionnage de vos fichiers: grunt regarder.

Il restera là à attendre que vous modifiiez ces fichiers. Une fois que vous avez fait, il effectuera toutes les tâches qui lui sont assignées, allez-y, essayez-le.

C'est beaucoup mieux, aucune contribution nécessaire de notre part. Vous pouvez maintenant travailler avec vos fichiers et tout sera bien fait pour vous.

Vue d'ensemble

Avec cette connaissance rudimentaire de la manière dont les plugins peuvent être installés et utilisés et du fonctionnement de la commande watch, vous êtes tous prêts à devenir vous-même un accro de l'automatisation. Il y a beaucoup plus à Grunt que ce dont nous avons discuté mais rien que vous ne puissiez gérer vous-même.

Utiliser des commandes pour compiler SASS, optimiser les images, auto-préfixer, etc. consiste simplement à suivre les étapes décrites précédemment et à lire la syntaxe requise par le plug-in..

Si vous connaissez des utilisations particulièrement intéressantes de Grunt, veuillez nous l'indiquer dans les commentaires. Nous sommes toujours intéressés par votre utilisation d'outils tels que Grunt.!