Grunt - Pour commencer

Pour utiliser Grunt, vous devez avoir installé Node.js. L'installation de Node.js a été expliquée dans le chapitre précédent . Vous pouvez installer les plugins Grunt et Grunt en utilisant le gestionnaire de packages Node.js.

Avant de configurer Grunt sur le système, vous pouvez mettre à jour le gestionnaire de packages Node à l'aide de la commande suivante -

npm update -g npm

Si vous utilisez Mac ou Linux, vous devez utiliser sudo word au début de la ligne de commande pour accorder l'accès administrateur comme indiqué ci-dessous -

sudo npm update -g npm

Installation de la CLI

CLI signifie Command Line Interface qui exécute la version de Grunt qui a été installée. Pour commencer avec Grunt, vous devez installer l'interface de ligne de commande (CLI) de Grunt globalement comme indiqué ci-dessous -

npm install -g grunt-cli

L'exécution de la commande ci-dessus placera la commande grunt dans votre chemin système, ce qui la fera fonctionner à partir de n'importe quel répertoire. Vous ne pouvez pas installer le gestionnaire de tâches Grunt en installant grunt-cli . Il permet à une machine d'installer simultanément plusieurs versions de Grunt.

Fonctionnement de la CLI

La CLI recherche le Grunt installé sur votre système en utilisant le système require () chaque fois que Grunt est exécuté. En utilisant grunt-cli , vous pouvez exécuter Grunt à partir de n'importe quel répertoire de votre projet. Si vous utilisez Grunt installé localement, grunt-cli utilise la bibliothèque Grunt installée localement et applique la configuration à partir du fichier Grunt.

Travailler avec un projet existant et nouveau

Si vous travaillez avec un projet déjà configuré qui inclut package.json et Gruntfile , suivez les étapes simples comme spécifié ci-dessous -

Recherchez le chemin d'accès au répertoire racine du projet.
Vous pouvez installer des dépendances à l'aide de la commande npm install .
Exécutez Grunt en utilisant la commande grunt .

Si vous créez un nouveau projet, incluez les deux fichiers package.json et Gruntfile à votre projet.

package.json- Le fichier package.json est placé dans le répertoire racine du projet et il est utilisé pour exécuter chaque dépendance répertoriée chaque fois que vous exécutez la commande npm install dans le même dossier.
Gruntfile.js - Le fichier Gruntfile.js est utilisé pour écrire les paramètres de configuration du projet.

package.json

Le fichier package.json est placé dans le répertoire racine du projet, à côté du fichier Grunt et est utilisé pour exécuter chaque dépendance répertoriée chaque fois que vous exécutez la commande npm install dans le même dossier.

Vous pouvez créer le package.json de différentes manières, comme indiqué ci-dessous -

Vous pouvez grunt-init pour créer le fichier package.json.
Vous pouvez également créer un fichier package.json à l'aide de la commande npm-init .

Vous pouvez écrire les spécifications comme indiqué ci-dessous -

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

Vous pouvez ajouter Grunt et gruntplugins dans un fichier pacakge.json existant en utilisant la commande suivante -

npm install <module> --save-dev

Ici, <module> représente le module à installer localement. La commande ci-dessus installera le module spécifié et l'ajoutera automatiquement à la section devDependencies .

Par exemple, la commande suivante installera la dernière version de Grunt et l'ajoutera à vos devDependencies -

npm install grunt --save-dev

Gruntfile

Le fichier Gruntfile.js est un emplacement par défaut où vos paramètres de configuration iront pour Grunt. Le fichier Grunt comprend les parties suivantes -

La fonction wrapper
Configuration de projet et de tâche
Chargement des plugins et des tâches Grunt
Tâches personnalisées

Le fichier de base Gruntfile.js est comme indiqué ci-dessous -

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

   // Load the plugin that provides the "uglify" task
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s)
   grunt.registerTask('default', ['uglify']);
};

Fonction wrapper

Dans le code ci-dessus, module.exports est une fonction wrapper où toute la configuration entre dans cette fonction. C'est une façon d'afficher la configuration au reste de l'application.

module.exports = function(grunt) {
   //do grunt-related things here
}

Configuration de projet et de tâche

Vous pouvez configurer les tâches Grunt, une fois que votre configuration Grunt est prête. La configuration du projet peut être écrite dans la section grunt.initConfig () . Dans la fonction grunt.initConfig () , prenez les informations de configuration du fichier package.json et enregistrez-les dans pkg . Vous pouvez appeler le nom de votre projet en utilisant pkg.name et version avec pkg.version .

Chargement des plugins et des tâches Grunt

Chargez les tâches à partir d'un plugin spécifié à l'aide de la méthode grunt.loadNpmTasks . Vous pouvez installer le plugin localement en utilisantnpmet il doit être relatif au Gruntfile. Vous pouvez charger le plugin avec une simple commande comme indiqué ci-dessous -

grunt.task.loadNpmTasks(pluginName)

Tâches personnalisées

Lorsque vous exécutez Grunt via la ligne de commande, le Grunt recherchera la tâche par défaut . Dans le code ci-dessus, nous utilisons une tâche appelée uglify qui peut être exécutée à l'aide de la commande grunt . Cela revient à exécuter explicitement la commande grunt uglify et vous pouvez spécifier le nombre de tâches dans le tableau.

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