Node.js
grognement
Recherche…
Remarques
Lectures complémentaires:
Le Guide d'installation de Grunt contient des informations détaillées sur l'installation de versions spécifiques, en production ou en développement, de Grunt et de grunt-cli.
Le guide de configuration des tâches contient des explications détaillées sur la configuration des tâches, des cibles, des options et des fichiers dans le Gruntfile, ainsi qu’une explication des modèles, des modèles de globalisation et de l’importation de données externes.
Le guide Création de tâches répertorie les différences entre les types de tâches Grunt et présente plusieurs exemples de tâches et de configurations.
Introduction aux GruntJs
Grunt est un gestionnaire de tâches JavaScript, utilisé pour automatiser des tâches répétitives telles que la minification, la compilation, les tests unitaires, le linting, etc.
Pour commencer, vous devez installer l'interface de ligne de commande (CLI) de Grunt globalement.
npm install -g grunt-cli
Préparation d'un nouveau projet Grunt: Une configuration typique implique l'ajout de deux fichiers à votre projet: package.json et le fichier Gruntfile.
package.json: ce fichier est utilisé par npm pour stocker les métadonnées des projets publiés en tant que modules npm. Vous allez lister les plugins Grunt et Grunt dont votre projet a besoin en tant que devDependencies dans ce fichier.
Gruntfile: Ce fichier s'appelle Gruntfile.js et permet de configurer ou de définir des tâches et de charger des plugins Grunt.
Example package.json:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
Exemple: gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
Installation de gruntplugins
Ajout de la dépendance
Pour utiliser un gruntplugin, vous devez d'abord l'ajouter en tant que dépendance à votre projet. Utilisons le plugin jshint comme exemple.
npm install grunt-contrib-jshint --save-dev
L'option --save-dev est utilisée pour ajouter le plugin dans le package.json , ainsi le plugin est toujours installé après une npm install .
Charger le plugin
Vous pouvez charger votre plug-in dans le fichier gruntfile en utilisant loadNpmTasks .
grunt.loadNpmTasks('grunt-contrib-jshint');
Configuration de la tâche
Vous configurez la tâche dans le gruntfile en ajoutant une propriété appelée jshint à l'objet passé à grunt.initConfig .
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js']
}
});
N'oubliez pas que vous pouvez avoir d'autres propriétés pour d'autres plugins que vous utilisez.
Exécuter la tâche
Pour exécuter la tâche avec le plug-in, vous pouvez utiliser la ligne de commande.
grunt jshint
Ou vous pouvez ajouter jshint à une autre tâche.
grunt.registerTask('default', ['jshint']);
La tâche par défaut s'exécute avec la commande grunt dans le terminal sans aucune option.