Share
Dans ce tutoriel, nous allons examiner comment utiliser Grunt, spécifiquement pour aider et accélérer votre flux de travail de développement WordPress..
Grunt est un exécuteur de tâches JavaScript installé via NPM qui s'exécute sur votre serveur. Pour utiliser les informations de ce didacticiel, vous devez avoir un accès en ligne de commande à un serveur. Par souci de brièveté, je vous renvoie à ce tutoriel pour que Grunt soit opérationnel et opérationnel..
Grunt est un coureur de tâches éprouvé, utilisé de nombreuses manières différentes, sur de nombreuses plateformes différentes. Ici, nous allons chercher à définir une base solide sur laquelle baser votre développement WordPress..
La communauté de Grunt est incroyablement forte, ce qui a conduit au développement d'un immense catalogue de plugins. Il est facile de se perdre et de passer beaucoup de temps à chercher et à déterminer lesquels utiliser..
Alors, quelles sont les tâches courantes que tout thème ou plugin WordPress doit accomplir ou fournir??
Grunt a un package de localisation spécifique à WordPress très réussi appelé grunt-wp-i18n. Ce paquet Grunt est inestimable, car il va scanner votre dossier thème / plugin, trouver toutes les chaînes de traduction et compiler une .pot fichier à l'emplacement spécifié. Ce .pot le fichier peut ensuite être utilisé pour convertir .po et .mo fichiers pour que d'autres utilisateurs traduisent votre thème / plugin.
Pour configurer le paquet, ajoutez ce qui suit à votre Gruntfile.js initConfig options:
makepot: cible: options: inclure: ['chemin / vers / certains / fichier.php'], tapez: 'wp-plugin' // ou 'wp-theme'
Appelez ensuite la tâche Grunt comme suit (dans la Gruntfile.js dossier):
grognement makepot
Votre dossier entier en cours d'analyse et toutes les chaînes sont conformes à un fichier pot.
Tous les thèmes et plugins utilisent régulièrement des fichiers JavaScript et CSS. Malheureusement, les besoins en versions de développement et de production des fichiers sont souvent négligés..
En prenant exemple sur WordPress, je souhaite être sûr d'avoir des fichiers entièrement commentés et minifiés:
Accentsconagua
filename.jsfilename.min.jsfilename.cssfilename.min.cssPourquoi? J'aime savoir ce qui se passe dans ces fichiers, mais j'aime aussi savoir que mes visiteurs reçoivent des versions optimisées des fichiers..
Le faire sans une sorte de gestionnaire de tâches signifierait changer les URL des ressources enregistrées dans WordPress pendant le développement pour afficher la version modifiée non modifiée, en utilisant une forme de compresseur JavaScript et CSS avant de publier une mise à jour, puis en inversant les URL enregistrées. . Et ce n'est pas amusant.
Avec Grunt, vous pouvez utiliser le paquet Uglify pour réduire et optimiser les fichiers JavaScript à la volée. Pour aller plus loin dans CSS, nous pouvons également utiliser la tâche Sass pour compiler des fichiers Sass en CSS à la volée. Pour ce que ça vaut, j'utilise Sass parce que c'est ce que WordPress utilise sous le capot, mais il y a aussi un compilateur MOINS pour Grunt.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', report:' gzip ', fichiers: ' assets / js / nomfichier.min.js ': [' assets / chemin / à / fichier.js ',' assets / chemin / à / un autre / fichier.js ',' actifs / dynamique / chemins / ** / *. js '], dev: options: bannière:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', embellir: true, compresser: false, mangle: false, fichiers:' 'assets / js / nomfichier.js': ['assets / chemin / vers / fichier.js', 'assets / chemin / vers / un autre / fichier.js ',' actifs / dynamique / chemins / ** / *. js '] sass: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' compressé ', fichiers: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: options: bannière:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' expand ', fichiers: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '] Conseil: si vous utilisez la tâche sass, ajoutez .sass-cache à ton .gitignore pour empêcher le cache du compilateur d'être ajouté à votre référentiel.
Nous avons couvert deux domaines clés que Grunt peut aider au développement de WordPress, mais allons un peu plus loin et trouvons le pouvoir supplémentaire d’utiliser un gestionnaire de tâches..
Nous fournissons déjà des tâches pour travailler sur des fichiers, alors pourquoi ne pas les optimiser? Avec la tâche ci-dessus, nous aurions besoin de courir grunt *** chaque fois que nous apportons un changement, pourquoi ne pas installer le paquet grunt-contrib-watch? Une fois configuré, ceci demandera à Grunt d'exécuter ces tâches chaque fois qu'un changement de fichier est détecté..
grunt regarder
Presto! Plus besoin de lancer Grunt à chaque changement de fichier, il suffit de démarrer l'observateur et de modifier vos fichiers.
Ne serait-il pas agréable d’exécuter JSHint sur nos fichiers JavaScript pour repérer ces bogues ou les points-virgules manquants? Installez simplement la tâche grunt-contrib-jshint et connectez-la à la tâche de surveillance avant la compilation des fichiers. Maintenant, Grunt vous avertira de toute erreur et cessera d'exécuter d'autres tâches..
jshint: fichiers: ['actifs / js / nom_fichier.js', 'actifs / dynamique / chemins / ** / *. js'], options: expr: true, globals: jQuery: true, console: true, module: true, document: true
Cela m’a été particulièrement utile lors du développement du framework Fluent. Le framework Fluent est un ensemble de classes qui, entre autres choses, créent des pages d’options et des boîtes à méta..
Pour faciliter le développement de champs uniques, j'ai une structure de fichier comme celle-ci:
actifs / ├── js / | ├── nomfichier.js champs / ├── texte / | Js / | ├── text.js ├── select / ├── js / ├── select.js
Il est donc très facile de trouver le champ sur lequel je travaille et de ne modifier que le JavaScript nécessaire à ce champ..
D'un point de vue utilisateur, je souhaite simplement servir un seul fichier JavaScript avec tous les codes JavaScript communs et basés sur les champs. Utilisons la tâche grunt-contrib-uglify pour accomplir cela.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', report:' gzip ', fichiers: ' assets / js / nomfichier.min.js ': [' assets / chemin / à / fichier.js ',' assets / chemin / à / un autre / fichier.js ',' actifs / dynamique / chemins / ** / *. js '], dev: options: bannière:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', embellir: true, compresser: false, mangle: false, fichiers:' 'assets / js / nomfichier.js': ['assets / chemin / vers / fichier.js', 'assets / chemin / vers / un autre / fichier.js ',' actifs / dynamique / chemins / ** / *. js '] Avec cette configuration, après avoir passé JSHint, il combinera tous les fichiers JavaScript dans un fichier de développement et un fichier de production..
WordPress.org nécessite un Readme.txt fichier détaillant les informations de thème / plugin, mais les systèmes de contrôle de version comme GitHub et BitBucket préfèrent Lisezmoi.md des dossiers. Nous n'avons pas besoin de dupliquer manuellement ni de synchroniser ces fichiers. Laissons simplement Grunt le faire pour nous!
Installez la tâche grunt-contrib-copy et configurez-la comme suit:
copie: dist: src: 'readme.txt', dest: 'README.md'
Une autre tâche Grunt utile est le paquet Grunt cURL. L'un des champs de la structure Fluent avait besoin d'accéder aux données de l'API Google Fonts. Si Google le recommande, il s’agit d’une requête HTTP à chaque chargement de la page. Sinon, si vous copiez manuellement le contenu du fichier, vous courez le risque de devenir obsolète. Le meilleur des deux mondes est d'utiliser Grunt Curl pour nous enregistrer une requête et obtenir des mises à jour..
Pour rester à jour, nous avons simplement chargé la tâche cURL, lui avons donné l'URL à partir de laquelle extraire les données de police et l'emplacement d'enregistrement de la réponse..
curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=********', destin: 'assets / vendor / google -fonts-source.json '
Maintenant, chaque fois que nous exécutons la tâche, la dernière liste de polices est téléchargée et enregistrée dans le fichier de structure..
Cette tâche est mieux utilisée sur les thèmes, les plugins et les frameworks où de nombreux yeux de développeurs vont être indiscrets. Et le contexte n’est jamais une mauvaise chose pour ceux qui s’intéressent à la base de code.
PHP Documentor est un excellent outil pour générer automatiquement ces données. Cela vous aide également à fournir des DocBlocks significatifs dans votre code..
phpdocumentor: dist: options: ignore: 'node_modules'
Astuce: Ajouter docs à ton .gitignore si vous ne voulez pas valider la documentation et tous ses fichiers de cache.
Voici la package.json et le Gruntfile.js pour les tâches détaillées ci-dessus.
package.json
"name": "nom_package", "version": "1.0.0", "description": "…", "main": "nomfichier.php", "scripts": "test": "echo \ "Erreur: aucun test spécifié \" && exit 1 "," référentiel ": " type ":" git "," url ":" http://repo-url.com "," keywords ": [ "wordpress"], "author": "Votre nom", "license": "GPL", "devDependencies": "grunt": "~ 0.4.2", "grunt-contrib-copy": "~ 0.5. 0 "," grunt-contrib-jshint ":" ~ 0.8.0 "," grunt-contrib-sass ":" ^ 0.7.3 "," grunt-contrib-uglify ":" ~ 0.3.3 "," grunt -curl ":" * "," grunt-phpdocumentor ":" ~ 0.4.1 "," grunt-wp-i18n ":" ~ 0.4.0 "
Gruntfile.js
module.exports = fonction (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')), copie: dist: src: 'readme.txt', dest: 'README.md' , curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google-fonts-source.json ', makepot: cible: options: inclure: [' chemin / vers / quelque / fichier.php ']], tapez:' wp-plugin '// ou' wp -theme ', jshint: fichiers: [' actifs / js / nom_fichier.js ',' actifs / dynamique / chemins / ** / *. js '], options: expr: true, globals: jQuery : true, console: true, module: true, document: true, phpdocumentor: dist: options: ignore: 'node_modules', sass: dist: options: bannière: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' compressé ', fichiers: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: options: bannière:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' expand ', fichiers: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '], uglify: dist: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', report:' gzip ', fichiers: ' assets / js / nomfichier.min.js ': [' assets / chemin / à / fichier.js ',' assets / chemin / à / un autre / fichier.js ',' actifs / dynamique / chemins / ** / *. js '], dev: options: bannière:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', embellir: true, compresser: false, mangle: false, fichiers:' 'assets / js / nomfichier.js': ['assets / chemin / vers / fichier.js', 'assets / chemin / vers / un autre / fichier.js ',' actifs / dynamique / chemins / ** / *. js ']); grunt.loadNpmTasks ('grunt-contrib-copy'); grunt.loadNpmTasks ('grunt-contrib-jshint'); grunt.loadNpmTasks ('grunt-contrib-sass'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-curl'); grunt.loadNpmTasks ('grunt-phpdocumentor'); grunt.loadNpmTasks ('grunt-wp-i18n'); grunt.registerTask ('default', ['jshint', 'uglify: dev', 'uglify: dist', 'sass: dev', 'sass: dist', 'makepot', 'copie']); grunt.registerTask ('docs', ['phpdocumentor: dist']); grunt.registerTask ('googlefonts', ['curl: google-fonts-source']); ; Astuce: Ajouter node_modules et npm-debug.log à ton .gitignore pour empêcher les tâches en tant que fichiers associés d'être ajoutées à votre référentiel.
Comme vous pouvez le constater grâce aux tâches ci-dessus, Grunt peut aider à automatiser le développement de WordPress et vous donner plus de temps pour vous concentrer sur l'écriture de code et non sur sa gestion..
Nous n’avons détaillé que quelques tâches pour WordPress, mais il existe de nombreux autres packages pour les besoins spécifiques du projet, tels que les tâches d’optimisation d’image et bien d’autres encore, alors allez explorer!
Grunt est maintenant un gestionnaire de tâches bien établi, et la documentation est à égalité avec WordPress, pourquoi ne pas envisager de créer une tâche qui n’a pas déjà été pensée et de la partager avec la communauté??
