Accélérer le développement de WordPress avec gulp
La création d’outils permet aux développeurs de se concentrer sur un développement efficace plutôt que sur des détails pointus qui prennent la moitié de votre vie mais n’ajoutent pas trop de contenu au projet. Un des outils de construction est gulp. Gulp optimise l’image du sujet, connecte les fichiers JS et traite automatiquement le Code Sass \/ less. Dans cet article, je vais vous montrer comment commencer et comment utiliser gulp pour accélérer le processus de développement. Qu’est – ce que gulp? Gulp est un outil de compilation JavaScript qui automatise des tâches triviales en utilisant des noeuds. L’idée de base est de créer un déclencheur pour effectuer une action spécifique.
Par exemple, chaque fois que vous enregistrez un fichier Sass, il est compilé dans le fichier CSS spécifié. Ou, chaque fois que vous enregistrez un fichier JS, tous les fichiers JavaScript sont connectés à un fichier et minimisés. Comment commencer? Vous avez besoin d’un noeud pour exécuter gulp. Cela devrait être facile, simplement en accédant à nodejs. Organisez et téléchargez et lancez la configuration. Node et NPM (node Pack Manager) seront installés et vous utiliserez NPM pour capturer des paquets de noeuds, tels que gulp. La prochaine étape consiste à installer gulp dans le monde entier. Vous pouvez le faire en ouvrant un terminal ou une invite de commande dans Windows (je vais maintenant appeler les deux terminaux) et en émettant la commande suivante:
Instructions de chargement f837d694d2dce6983166 ceci installe l’interface en ligne de commande gulp afin que vous puissiez envoyer des commandes gulp n’importe où. Vous devez également installer gulp pour votre projet spécifique. C’est parce que chaque projet a des exigences différentes. Vous ne minimiserez pas les mêmes fichiers, n’utiliserez pas la même structure, et peut – être même pas WordPress ou PHP dans tous vos projets! Mais avant cela, parlons d’abord de WordPress. Avec les outils de création WordPress, une grande partie de notre travail impliquera
Deux autres choses: Modifier un fichier existant ou en créer un nouveau à partir d’un fichier existant. De nombreux fichiers que nous utilisons pour le développement ne seront pas utilisés dans le produit final. Si nous construisons un thème pour une feuille de style en utilisant Sass, le fichier CSS final sera envoyé dans le cadre du thème, car le fichier Sass original n’est pas nécessaire.
Vous pouvez le faire de deux façons: fournir des fichiers de développement dans un projet en ignorant tous les fichiers liés au développement
Omettre les fichiers de développement omettre ces fichiers a l’avantage d’éliminer la confusion et de réduire les téléchargements. Les fichiers de développement utilisés pour l’encodage n’ajoutent généralement pas une surcharge importante, mais cela peut être un problème si vous utilisez un grand nombre d’images ou de grands fichiers texte. L’inconvénient est que vous seul pouvez utiliser le fichier original. Dans certains projets, cela sera considéré comme un avantage, donc ce qui fonctionne pour vous est ce que vous devriez choisir. Ici, le fichier se trouve à l’extérieur du dossier final du produit livrable. Installer gulp pour notre projet notre projet de test sera un sujet simple, nous fournirons nos fichiers de développement, puis nous utiliserons la structure à gauche de la figure ci – dessus. Installez gulp dans le répertoire principal du site en naviguant dans le Répertoire du terminal et en émettant la commande suivante:
Instructions pour charger f837d694d2dce6983166 à l’étape suivante
L’étape consiste à créer un fichier gulpfile. C’est un fichier javascript qui dit à gulp quoi faire et quand le faire. Créer un fichier gulpfile. JS est dans le dossier principal et gulpfile. JS ce qui suit: la ligne de départ des instructions de chargement f837d694d2dce6983166 indique que nous demandons gulp lui – même. La section suivante définit une tâche d’ingestion. Il peut s’agir de tout, de la minimisation à l’optimisation de l’image, et maintenant je laisse en blanc. Une fois sauvegardé, retournez au terminal et lancez une commande: gulp. Si aucun autre contenu n’est spécifié, la tâche par défaut définie dans gulpfile est exécutée. Nous avons défini cette activité, mais elle n’a pas de contenu, donc vous devriez voir quelque chose de similaire dans le terminal du début à la fin:
La page NPM de chaque paquet contient des instructions d’installation et d’utilisation. En plus des commandes spécifiques pour chaque module, les étapes sont presque toujours les mêmes: l’installation du paquet inclut les paquets utilisés dans gulpfile vous pouvez installer gulp Sass en émettant la commande suivante dans le terminal: instructions pour charger f837d694d2dce6983166 Créez une variable en haut du fichier gulpfile que nous utiliserons plus tard: instructions pour charger f837d694d2dce6983166 maintenant nous pouvons créer une tâche! Laissez – moi vous montrer le code complet et
J’ajoute l’explication suivante:
Pour expliquer le chargement de f837d694d2dce6983166, j’a I d’abord défini une tâche appelée \
Une autre tâche courante est de minimiser les fichiers. Une fois que nous avons créé notre propre style. CSS, nous pouvons le rendre plus petit et rendre notre sujet plus efficace. Nous suivons le même processus que précédemment, en commençant par Google \
Instructions pour charger f837d694d2dce6983166 une astuce que j’aime utiliser est d’ajouter l’option keepsspecialcomments. Par défaut, toutes les annotations sont supprimées, mais notre sujet n’est pas un vrai sujet à moins qu’il n’ait une annotation de titre dans le fichier de style. CSS. C’est ce qui explique l’option
Des roumains de différentes structures? Comment cela change – t – il votre flux de travail? Quel est le plus grand avantage que vous voyez? Veuillez nous le faire savoir dans les commentaires ci – dessous. Étiquettes: construire des outils sip