Share
Dans le premier article de cette série, j'ai donné un bref aperçu de Grunt et dans le prochain article, je vais vous expliquer les étapes nécessaires pour savoir comment utiliser Grunt peut améliorer vos compétences en développement WordPress..
Plus précisément, nous allons parler en détail des fichiers nécessaires comme package.json et Gruntfile.js, mais pour l'instant, nous allons créer quelques exemples de fichiers afin que vous puissiez exécuter Grunt avec votre thème WordPress ou votre projet de plug-in.
Avant de commencer, il peut être utile de revoir le contenu mentionné dans le premier article de cette série..
Une fois que vous êtes tous pris, revenez à cet article et nous commencerons par créer nos fichiers de projet. Cela nous donnera finalement un aperçu de ce à quoi cela ressemble de faire configurer Grunt pour un projet donné.
Dans le prochain article, nous verrons comment procéder spécifiquement pour WordPress, mais nous nous concentrerons sur une approche plus générique pour le moment..
La première chose à faire est de créer un package.json fichier à la racine du projet. Dans ce nouveau fichier, ajoutez les éléments suivants:
"nom": "nom-projet", "version": "1.0.0", "description": "projet génial"
Il n'y a pas besoin d'ajouter le devDependencies objet, car il sera ajouté automatiquement lorsque nous installerons des tâches Grunt via la ligne de commande.
Pour installer des tâches Grunt, vous devez basculer sur l’outil de votre choix en ligne de commande. Si vous êtes sur un Mac, ce sera Terminal ou iTerm. Si vous utilisez un PC, je vous conseillerais d'utiliser PowerShell..
Naviguez d'abord vers votre projet dossier racine ('cd development-folder / project-folder'). Ensuite, nous allons installer une tâche pour compiler les fichiers LESS. Nous allons installer la tâche grunt-contrib-less, tapez ce qui suit dans votre ligne de commande et cliquez sur Entrer:
npm installer grunt-contrib-less --save-dev
Vous allez commencer à voir un tas de lignes en cours d'impression lorsque la tâche et toutes ses dépendances sont en cours de téléchargement à partir de npm. Une fois que c'est fait, vous devriez voir quelque chose comme ça:
Maintenant, vous devriez pouvoir aller à votre package.json déposer et voir grunt-contrib-less ajouté à votre 'devDependencies' objet aussi bien. Vous ajouterez également le numéro de version à côté du nom. Je pourrais parler de la notation de version dans un tout autre article, mais pour le moment, sachez que le tilde fait référence à la version avec laquelle nous travaillons actuellement.
À ce stade, vous devriez voir ce qui suit:
"name": "nom-projet", "version": "1.0.0", "description": "Projet génial", "devDependencies": "grunt-contrib-less": "~ 0.9.0"
Ensuite, ajoutons une tâche pour surveiller les changements dans notre '.Moins' des dossiers. Nous allons utiliser la tâche Grunt-contrib-watch. Revenez à la ligne de commande et appuyez sur Entrer:
npm installer grunt-contrib-watch --save-dev
Encore une fois, vous devriez voir un résultat à l’écran et une fois terminé, il sera ajouté à votre package.json fichier. Cela devrait maintenant ressembler à quelque chose comme ça:
"name": "nom-projet", "version": "1.0.0", "description": "Projet génial", "devDependencies": "grunt-contrib-less": "~ 0.9.0", "grunt-contrib-watch": "~ 0.5.3"
J'espère que vous comprenez maintenant et que vous pouvez utiliser le même processus pour ajouter d'autres tâches Grunt. Juste un rappel de toujours ajouter le '--save-dev'.
Maintenant que nous avons quelques tâches Grunt installées, commençons à les utiliser. La première chose à faire est de créer un Gruntfile.js déposer dans le dossier racine de notre projet. C'est ici que nous allons spécifier nos tâches et les configurer.
Pour ce faire, ajoutez ce qui suit au fichier:
module.exports = fonction (grunt)
La première chose à faire est de charger nos tâches pour pouvoir les exécuter. Vous faites cela en ajoutant en utilisant le loadNpmTasks fonction pour chaque tâche. S'il vous plaît ajouter ce qui suit à l'intérieur des accolades:
grunt.loadNpmTasks ('grunt-contrib-less');grunt.loadNpmTasks ('grunt-contrib-watch');
Nous devons ensuite configurer la configuration de nos tâches Grunt installées. Nous devons utiliser le initConfig fonctionne comme ceci:
grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),);
Maintenant, après la virgule, nous allons ajouter notre configuration pour chaque tâche que nous avons installée. Vous trouverez généralement des exemples de configuration de chaque tâche dans le LISEZMOI.md fichier dans le projet sur GitHub. Chaque tâche aura différentes options de configuration, alors assurez-vous de consulter d'abord la documentation..
La première tâche que nous allons configurer est la grunt-contrib-less tâche. Celui-ci va compiler notre .Moins fichiers dans .css fichiers pour nous. Vous voudrez créer un nouveau dossier pour votre .Moins fichiers et en créer un nouveau. Je crée habituellement un css / moins dossier et mettre tous mes .Moins fichiers là-bas.
Allez-y et ajoutez un nouveau fichier nommé style.less et ajoutez du code dedans comme ceci:
a couleur: bleu; &: hover couleur: rouge;
Maintenant, revenons à notre Gruntfile.js déposer et ajouter ce qui suit:
Moins:
options:
chemins: 'css / moins',
yuicompress: true
,
des dossiers:
'style.css': 'css / less / style.less'
Une fois que vous avez enregistré le fichier, vous devriez être en mesure de passer à la ligne de commande et de taper grogner moins et frapper Entrer. Cela lancera la tâche difficile et compilera notre .Moins déposer et créer un nouveau style.css déposer dans notre projet dossier racine.
Maintenant que nous avons la tâche de compiler notre .Moins fichiers, ajoutons une tâche de surveillance pour elle. Qui veut aller à la ligne de commande et exécuter grogner moins chaque fois que nous modifions un fichier, à droite?
Après notre configuration précédente, ajoutez une virgule puis le texte suivant:
regarder:
Moins:
fichiers: 'css / less / *. less',
tâches: 'moins'
Une fois le fichier sauvegardé, retournez à la ligne de commande et tapez grunt regarder. Cela devrait voir ce qui suit:
Cela signifie que la surveillance Grunt attend toute modification de l'un des fichiers que vous avez spécifiés dans votre configuration. Aller à votre style.less déposer et faire un changement comme ceci:
a couleur: bleu; &: hover color: green;
Une fois le fichier sauvegardé, la tâche de surveillance démarrera et compilera votre .Moins des fichiers dans votre style.css fichier. Une fois terminé, il continuera à regarder ces fichiers et sera prêt pour un autre changement..
Comme il est en cours d'exécution, tout ce que vous avez à faire maintenant est de modifier un fichier, de le sauvegarder, puis de basculer vers votre navigateur pour voir les modifications..
Nous avons maintenant tout mis en place pour utiliser Grunt avec votre prochain projet. C'était une configuration assez simple et je suis sûr que vous pouvez voir toutes les tâches que vous pouvez avoir dans votre projet. Plus tard dans la série, je prévois de couvrir des fonctionnalités plus avancées avec Grunt, telles que des tâches personnalisées, une configuration imbriquée et d'autres goodies..
Mais d'abord, nous allons voir comment incorporer cela dans nos projets WordPress.
Accentsconagua