Accélérer le développement du thème

Avant de commencer, laissez – moi vous poser une question. Quelles sont vos activités les plus courantes lors du développement de thèmes WordPress (ou de tout type de site Web)? Qu’est – ce que tu fais si souvent que tu ne le remarques pas parce que c’est dans ta mémoire musculaire? Mettre à jour le navigateur. Que se passe – t – il si je vous dis que c’est automatisé et que le navigateur est automatiquement mis à jour chaque fois que vous changez de fichier? C’est facile de boire. Non seulement il peut être mis à jour, mais il peut également automatiser la compilation Sass, la fusion de fichiers, la vérification syntaxique, la distribution, etc.
Par conséquent, dans ce tutoriel, je vais vous montrer comment configurer gulp et certaines des tâches les plus courantes que les développeurs de sujets accomplissent quotidiennement. Conditions préalables tous les composants utilisés dans ce tutoriel sont basés sur des noeuds. JS, c’est la seule exigence. Il est livré avec un gestionnaire de paquets appelé gestionnaire de paquets de noeuds ou NPM. Installez le noeud, puis lancez $NPM – V pour vous assurer qu’il fonctionne correctement (il vous donnera le numéro de version). Bien sûr, vous devriez également avoir un environnement de développement WordPress, que ce soit VVV, HGV, mamp ou tout autre environnement de votre choix. Si vous pouvez exécuter WordPress, tout ira bien.
Vous devez également fournir des extensions liveload pour les navigateurs en développement. Il est recommandé d’avoir au moins un Sass \/ scss dur (la différence est dans la syntaxe, donc je peux choisir un nom interchangeable) Note: aux fins de ce tutoriel, je vais créer un thème souligné vide, mais n’hésitez pas à ajouter ce que vous allez apprendre au thème existant: vous ne ferez aucun mal. Selon le site officiel, Streaming Media Building System n’est qu’un mot fantaisiste, essentiellement un gestionnaire de tâches. Ce que je veux dire par activité, c’est tout ce que vous devez faire manuellement pour automatiser (sauf
Et écrire du Code, c’est – à – dire que vous ne pouvez pas l’éviter). Quelques – unes des tâches les plus courantes lors de la création de thèmes WordPress:
Compiler Sass dans CSS (si vous l’utilisez) Compiler coffeescript dans JavaScript (si vous l’utilisez) zoomer, connecter ou Lint (linting est un processus de vérification de code pour les mauvaises pratiques de codage) CSS et Javascript optimiser les images créer, supprimer ou compresser des fichiers et des dossiers surveiller les changements et… Si le fichier est modifié, le navigateur est mis à jour, une tâche souvent appelée liveload. Hello Hello CMD + r d’un point de vue plus technique, gulp est un paquet NPM (prise en charge des plug – INS), ce qui signifie qu’il a besoin de noeuds. JS à exécuter. Comme gulp, Bower (développé à l’origine sur Twitter) est un paquet NPM qui gère les paquets frontaux et leurs dépendances pour vous. Qu’est – ce que le paquet fait face? Jquery l’Est. Il en va de même pour la plupart des plug – ins jquery: En fait, toutes les bibliothèques JavaScript qui fonctionnent dans un navigateur et qui sont généralement accompagnées de fichiers CSS (ou plus) sont des paquets frontaux. C’est aussi mon point de référence personnel en matière de qualité; Si les bibliothèques JavaScript sont également des paquets NPM, cela signifie généralement que les auteurs suivent des pratiques et des méthodes modernes. Pas toujours, mais souvent.
Par exemple, sur notre page d’atterrissage, nous utilisons jquery et un plug – in de curseur appelé slick (pour recommandation) (ne le confondez pas avec le plug – in WordPress). Le problème résolu par Bauer? Dépendances et obsolescence de ces bibliothèques \/ paquets. Vous pouvez facilement exécuter $Bower Update, qui récupère automatiquement la dernière version. Parce que c’est ce qui m’intéresse. L’installation de gulp gulp nécessite deux fichiers initiaux pour fonctionner: package. Json et gulpfile. Ensuite, nous lancerons le script init qui crée le premier (le deuxième doit être créé manuellement): $NPM init. Il vous posera beaucoup de questions (si vous ne savez pas, appuyez sur Entrée)
Nt, puis collez – le à: Var var gulp = require (‘gulp’), plumber = require (‘gulp’), plumber = require (‘gulp – plumber’), Watch = require (‘gulp – Watch’), lifereload = require (‘gulp – lifereload’), minify CSS = require (‘gulp – minify – CSS’), jhint = require (‘ gulp – jhint ‘), style = require (‘ gulp – huhuliffy ‘), name = require (‘ gulp – renameflame ‘), name = require (‘ gulp – renameflame ‘), name = require (‘ gulp – renameflame ‘), name = require (‘ gulp – renameflame ‘), name = require (‘ gulp – rename’), notify = require (‘gulp notify’), include = require (‘gulp include, Sass = required (\
Var OnError = function (Err) {console.log (‘error occurred:’, err.message); this.emit (‘end’); Enfin, notre première tâche est de compiler Sass dans un CSS normal (n’avez – vous pas écrit à la main?): Avaler Tâche (‘scss’, fonction () {retourner gulp.src (‘. \/ scss \/ style.scss’). Pipe (plombier ({ErrorHandler: OnError}). Pipe (SASS (). Pipeline (Grande destination (‘). Pipe (minifycss ()). Pipe (renommer ({suffixe:.Min \
Regardons la tâche que nous venons de définir; D’abord, on lui a dit d’avoir du style. Scss, enregistrez – le avec le curseur (si notre Sass a une erreur de syntaxe), compilez – le dans un CSS normal avec Sass () et écrivez – le dans le répertoire courant. Bien que nous puissions nous arrêter là, je voudrais ajouter quelques paragraphes à des fins éducatives; Après avoir sauvegardé le style. CSS le transmet à travers un microprocesseur et le Renomme en style. Min.css, enregistrez – le, puis rechargez le navigateur. Ce n’est qu’il y a quelques mois que j’ai utilisé Compass pour la compilation de Stony, mais il est très lent, c’est pourquoi je suis passé à libsass, qui est très rapide mais un peu défectueux. Tu ne peux pas.
Créez un projet en insérant cette commande dans le Répertoire d’accueil du sujet: $Bower init. Encore une fois, pour répondre à certaines questions, vous pouvez également appuyer sur Entrée pour tout modifier. Il a été créé. Ecco come si presenta il mio: {name \