Share
Dans la première partie de cette série, j'ai donné un rapide aperçu de Grunt. J'ai également parlé des différentes technologies nécessaires à son utilisation. Après cela, je me suis un peu familiarisé avec le fichier Gruntfile et les tâches qu'il contient..
Maintenant, je veux expliquer en quoi l'utilisation de Grunt peut améliorer votre développement pour les thèmes et les plugins WordPress.
Ce que je préfère dans l’utilisation de Grunt et de npm, c’est que lorsque vous configurez votre projet, il auto-documente les dépendances de votre projet. C'est parfait pour les équipes de développement et les projets open-source. Qui veut écrire de la documentation sur la configuration d'un espace de travail de toute façon, non??
Tout d'abord, vous aurez besoin d'un fichier package.json dans votre projet. Le nom du projet, sa version et sa description doivent être configurés. Nous verrons plus en détail dans le prochain post, mais voici un exemple:
"nom": "nom-projet",
"version": "1.0.0",
"description": "Projet génial"
Une fois que vous avez cette configuration, lorsque vous installez un plugin Grunt, il vous suffit d’ajouter --save-dev à la fin et il ajoutera le plugin à votre fichier package.json sous devDependencies. Par exemple, si je voulais ajouter le grunt-contrib-watch plugin à mon projet je lancerais la commande suivante:
npm installer grunt-contrib-watch --save-dev
Vous verrez le plugin ajouté à votre node_modules dossier et cela devrait également donner à votre fichier package.json l’apparence suivante:
"nom": "nom-projet",
"version": "1.0.0",
"description": "Projet génial", "devDependencies":
"grunt-contrib-watch": "~ 0.5.x"
Lorsque vous installez d’autres plug-ins Grunt et que vous ajoutez --save-dev à la fin, vous les verrez ajoutés sous le devDependencies objet.
Pourquoi est-ce bénéfique? Comme je l’ai mentionné plus tôt, il s’agit d’une auto-documentation des dépendances de vos projets. Une fois que tous vos plugins sont installés et ajoutés à votre fichier package.json, un autre membre de l’équipe ou un contributeur peut maintenant exécuter npm installer et ils vont installer tout le nécessaire pour le projet.
Vous pouvez le tester assez facilement en supprimant l’ensemble de votre node_modules dossier et en cours d'exécution npm installer toi même. Vous verrez tout ce que vous avez installé installé automatiquement.
[note] Vous voudrez ajouter le node_modules dossier à votre .gitignore fichier afin de ne pas gonfler votre référentiel. [/ note]
J'utilise beaucoup de plugins Grunt similaires avec chaque projet, mais celui que j'installe toujours est celui que j'ai déjà mentionné, grunt-contrib-watch. Ce plugin, une fois exécuté, surveillera les fichiers de votre projet et lancera toutes les tâches que vous avez spécifiées pour ce fichier ou ce type de fichier..
Un exemple serait pour n'importe lequel de vos fichiers JavaScript. Lorsque vous apportez des modifications à l'un d'entre eux et que vous l'enregistrez, vous pouvez demander à Grunt d'exécuter une tâche JSLint, concat et minify. Vous pouvez également spécifier un ordre. Ainsi, lorsqu'une réussite est atteinte, la suivante est lancée. Si l'un échoue, il tue la séquence de tâches complète.
CodeKit a une fonctionnalité similaire, mais il exécute toutes vos tâches. Par exemple, si vous modifiez un fichier SASS ou LESS, non seulement il lance ces tâches, mais également vos tâches de fichiers JavaScript. La tâche de surveillance Grunt vous donne plus de contrôle sur les tâches exécutées lorsque des fichiers ou des types de fichiers spécifiques sont modifiés..
En plus des tâches Grunt pour les plugins que vous installez, vous pouvez créer vos propres tâches personnalisées. Souvent, lorsque je configure un projet, j'ai 3 tâches à configurer, défaut, installer, et construire.
La tâche par défaut est la tâche qui sera exécutée avec vous exécuter grognement à partir de la ligne de commande. Bien souvent, je mapperai ma tâche de veille sur la valeur par défaut. Vous pouvez ajouter n'importe quelle tâche que vous voulez exécuter.
La tâche d’installation que j’ai configurée effectue généralement les tâches qui ne doivent être exécutées que la première fois pour définir l’installation de votre projet. Souvent, j'utilise Bower pour charger des bibliothèques tierces telles que Bootstrap. Je dois les extraire puis exécuter une tâche de copie pour déplacer certains fichiers dans mon projet, puis lancer une compilation initiale des fichiers LESS et JavaScript..
La tâche de construction est utilisée pour les tâches à effectuer avant de publier ou de distribuer votre projet. Je lance toujours cela pour m'assurer que tout est concaténé, minifié et compressé. Un bon exemple consiste à exécuter grunt-contrib-imagemin pour optimiser toutes les images de votre projet. Un autre exemple consiste à utiliser grunt-contrib-compress pour créer un fichier zip de votre thème afin de faciliter son installation via l’administrateur WordPress..
Grunt est définitivement un excellent outil pour les équipes de développeurs. De la documentation automatique des dépendances de votre projet à la construction personnalisée, Grunt vous rend efficace. Utilisez Grunt pour automatiser différentes tâches dans votre projet afin que vous puissiez vous concentrer sur la construction de votre thème ou plugin WordPress.
Accentsconagua