Grunt est basé sur Node.js et est développé dans JS. De cette façon, vous pouvez utiliser Node.js pour réaliser des opérations de bureau transversal et multiplateforme, telles que les opérations de fichiers, etc. En outre, le grognement et ses plug-ins sont tous utilisés comme un package qui peut être géré à l'aide de l'installation NPM.
Par conséquent, le fichier de projet package.json généré par NPM peut enregistrer le plug-in grunt utilisé dans le projet actuel, et Grunt appellera le fichier gruntfile.js, analyser les tâches (tâches) et effectuer des opérations correspondantes.
Installer Grunt-Cli
En fait, il s'agit d'installer Grunt-Cli, où l'interface de ligne de commande de Grunt (CLI) est installée. Après cela, la commande grunt sera reconnue dans l'invite de commande. L'installation de grunt-CLI n'est pas appelée l'installation de grognement. En effet, le grognement lui-même n'est pas utilisé à l'échelle mondiale. Si vous souhaitez utiliser Grunt, vous devez installer un grogne une fois pour un répertoire de travail spécifique. Cela est également dû au fait que différents répertoires de travail nécessitent un travail d'automatisation différent via Grunt, il doit donc être configuré indépendamment.
NPM Install -g Grunt-CLI
Le paramètre ―Save-DEV, indiquant que la chose nouvellement installée sera ajoutée au fichier package.json.
Générer un fichier package.json
NPM a une exigence pour le répertoire de travail. Cette exigence est: il existe un package.json à l'emplacement du répertoire racine.
document. Ce fichier définit certaines informations de projet (nom, description) correspondant au répertoire de travail, ainsi que les dépendances du package (c'est-à-dire le module NPM).
Exécutez la commande suivante pour initialiser
npm init
Installez les plugins grogn et requis pour le répertoire de travail actuel
Méthode 1
Nous avons déjà installé Grunt dans le répertoire mondial, et nous devons maintenant le présenter sur le chemin du projet actuel. Dans le même temps, les plugins requis peuvent les inclure:
Faire des fichiers: grunt-contrib-contrat
Vérification de la syntaxe: grunt-contrib-jshint
SCSS compilé: grogn-contrib-Sass
Fichier compressé: grunt-contrib-uglify
Écoutez les modifications de fichiers: grogn-contribe-watch
Créer un serveur local: Grunt-Contrib-Connect
La façon dont ils peuvent être installés est:
Installation NPM - Save-Dev Gruntnpm Installation - Save-DEV PLUGIN 1 PLUGIN 2 PLUGIN 3
À l'heure actuelle, il y a un code supplémentaire dans le dossier package.json.
"DevDependces": {"grunt": "0.4.1"},Méthode 2 - Modifier le package.json manuellement
"DevDependces": {"grogn": "~ 0.4.1", "grunt-contrib-cssmin": "~ 0.7.0"}Ajoutez manuellement ce champ dans le fichier package.json et ajoutez les packages qui doivent être dépendants. Si vous avez seulement besoin d'installer la dernière version, vous pouvez le modifier en * puis exécuter NPM Install. Vous constaterez qu'il existe un dossier Node_Modules dans le dossier, qui stocke les plug-ins dont nous avons besoin.
Configuration
D'une manière générale, utilisez directement des modèles comme fichiers de configuration.
module.exports = fonction (grunt) {"Utiliser Strict"; grunt.initconfig ({// Zone de configuration du plugin}); // Chargez des tâches de plugin, ajoutez qui vous souhaitez utiliser grunt.loadnpmtasks («grunt-contrib-uglify»); grunt.loadnpmtasks («grunt-contrib-cssmin»); grunt.loadnpmtasks («grunt-contrib-iMagemin»); // Enregistrer la tâche grunt.registerTask («Default», [«cssmin», «imagemin», «uglify»]);};grunt.loadnpmtasks () est une tâche de plugin de chargement. En fait, si vous souhaitez utiliser la fonction de quel plugin, veuillez utiliser ce code pour ajouter la tâche du plugin dans cette pièce.
Grunt.registerTask () est une tâche enregistrée, et il y a un défaut par défaut. La valeur par défaut signifie que lorsque vous l'utilisez en dernier, vous pouvez saisir directement le grognement dans l'invite de commande dans le répertoire pour exécuter la tâche enregistrée, ce qui équivaut à exécuter la tâche par défaut.
Utilisation de tâches personnalisées
Plus de commandes de tâches peuvent être enregistrées et d'autres noms peuvent être utilisés. Par exemple
Grunt.RegisterTask («Custom», [«CSSMIN», «Imagemin»]);
Lorsque vous l'utilisez, entrez:
Custom de grognement