Développement avancé de WordPress: simplifier le flux de travail avec gulp
5bb2fc28839e2f2080e4c333 la description des noeuds et des paquets NPM NPM est un outil que vous pouvez utiliser pour installer des paquets tels que gulp. La plupart des paquets sont conçus pour être installés localement: ils ne sont disponibles que dans les dossiers de projet auxquels vous ajoutez. NPM utilise un fichier spécial appelé package. Json, qui contient des métadonnées sur le projet. C’est le nom, la description, la version et surtout le paquet qu’il utilise.
Les projets nodaux sont donc très flexibles. Vous n’avez pas besoin de partager ou de stocker tous les paquets utilisés dans le contrôle de version. Assurez – vous juste de ce paquet. Json est disponible et n’importe qui peut obtenir tous les prérequis en quelques secondes en utilisant la commande NPM install. Certains progiciels, comme gulp, peuvent être installés dans le monde entier. Ce n’est pas une exigence, mais c’est pratique pour les outils que nous utilisons souvent, en particulier les outils de développement. Installer des paquets pour ce tutoriel nous allons installer des paquets liés à gulp. La syntaxe pour ce faire est la suivante:
Chargement 149e592a5bb2fc28839e2f2080e4c333 vous pouvez installer un ou plusieurs paquets en séparant les noms par des espaces – – Enregistrer Dev ou – D indique que nous voulons enregistrer le paquet comme d épendance de d éveloppement. Ils seront placés dans le dossier du paquet pour nous. Lancez un nouveau projet pour notre premier exemple et nous créerons un thème WordPress. Vous devriez maintenant savoir quoi faire: créer un nouveau dossier dans le répertoire des sujets et ajouter un fichier index. PHP et styles de fichiers. CSS, etc., avec les informations appropriées. Nous ajouterons également un paquet. Json pour se souvenir de notre addiction. Nous configurons tout dans le terminal:
Chargez 149e592a5bb2fc28839e2f2080e4c333 et lancez ces commandes une par une. Notez le & & & dans la première commande. Cela me permet d’émettre une deuxième commande, ce qui signifie que la première ligne crée un répertoire et le passe immédiatement.
La commande NPM init est un assistant pour les fichiers package. Json. Il vous posera une série de questions et vous pourrez appuyer sur Entrée pour utiliser les paramètres par défaut.
Lorsque vous chargez 149e592a5bb2fc28839e2f2080e4c333 pour installer la première dépendance, vous verrez un nouveau dossier appelé Node _ modules. Cela contiendra un grand nombre de paquets (chaque paquet que vous installez a ses propres dépendances). Vous n’avez pas besoin de l’ajouter au dépôt; Vous n’avez besoin que du fichier package.
Puisque gulp est un cadre et non une solution universelle, vous devez leur dire quelles sont les conditions et ce qu’il faut faire pour les remplir. Utilisez le fichier gulpfile. JS, qui contient toutes les informations dont gulp a besoin pour accomplir sa tâche. Maintenant, créons un fichier gulp avec un minimum d’informations: chargez 149e592a5bb2fc28839e2f208e4c333 la première ligne pour importer gulp lui – même. Voici notre première tâche, \
Pour créer une tâche du début à la fin, nous devons suivre une liste simple: trouver un paquet qui peut exécuter la tâche, l’installer, l’ajouter au fichier gulpfile, et configurer la tâche en définissant les conditions et les options. La première tâche SIP que nous suivons
Grâce aux étapes précédentes, nous avons réalisé l’optimisation de l’image. Mais avant cela, nous avons ajouté une capture d’écran. PNG à notre sujet. J’ai utilisé une image d’unsplash et je l’ai coupée à 880 × 660, la taille recommandée pour ce fichier. Enfin, 1 Mo. Google quick search affiche le paquet gulp imagemin, qui minimise les images PNG, GIF et JPG. Parfait. Les instructions d’installation et d’utilisation sont généralement fournies sur place. Pour installer ce plug – in, utilisez la commande suivante:
Chargement 149e592a5bb2fc28839e2f2080e4c333 pour l’ajouter au fichier gulp, nous l’inclurons sous l’inclusion initiale du gulp lui – même: chargement 149e592a5bb2fc28839e2f2080e4c333 Enfin, nous devons définir une condition – lors de l’exécution de la tâche – et dire au gulp ce qu’il doit faire. Voici le Code d’une nouvelle tâche appelée \
Ensuite, nous \
Comme cible, certains fichiers sources lisent leur contenu et le transmettent à la fonction cette étape ou pipeline peut être exécuté plus d’une fois dans une tâche. Chaque fonction obtient le résultat de la fonction précédente, la modifie et la transmet. Envoyez le flux généré à l’emplacement spécifié, regardons le traitement de fichiers Sass comme un autre exemple. Si nous voulons compiler tous les fichiers Sass, ajouter automatiquement le préfixe du fournisseur et minimiser les résultats: trouver tous les fichiers, alors nous pouvons utiliser l’algorithme ci – dessus. SCS transmet son contenu au compilateur Sass transmet le contenu généré à autoprefix transmet le résultat au déclarant enregistre le résultat dans le même fichier source que nous le faisons sur gulp. Nous avons besoin de trois paquets: gulp SAS gulp autorefixer gulp Clean CSS nous pouvons les installer immédiatement en utilisant la commande suivante: Load 149e592a5bb2fc2839e2f208e4c333 so, add them to top gulpfile Load 149e592a5bb2fc2839e2f208e4c333 we should also add some SAS to the topic. Nous créons un fichier Sass appelé style dans le Répertoire d’accueil. SCS qui contient ce qui suit: chargement 149e592a5bb2fc28839e2f2080e4c333 Enfin, nous devons créer des tâches qui feront tout ce dont nous avons besoin. Voici le code complet et l’explication ci – dessous. Lorsque j’ai chargé 149e592a5bb2fc28839e2f2080e4c333, j’ai pris tous les fichiers scss dans le Répertoire d’origine, je les ai redirigés vers la fonction Sass (), puis autorefixer, puis la fonction cleancss, et enfin tout le contenu vers le Répertoire d’origine qui sera le style. Style SCS. Scss est un style. CSS. Le CSS généré est le suivant: chargement 149e592a5bb2fc28839e2f2080e4c333 comme vous pouvez le voir, tout est minimisé: la variable a été remplacée par sa valeur et un préfixe fournisseur a été ajouté si nécessaire. Créer ce codic
J’ai examiné la documentation de chaque échantillon, copié et collé la partie pipe de l’échantillon, et c’était vraiment facile. La commande peut avoir quelques options à vérifier, mais la plupart fonctionnent immédiatement. Nous avons parcouru un long chemin en donnant nos ordres. Nous pouvons laisser gulp faire ce que nous voulons tant que nous trouvons le bon paquet et l’ajoutons au fichier gulp. Cependant, nous pouvons faire beaucoup plus. Lorsque nous développons, en particulier CSS, nous avons tendance à enregistrer et à modifier beaucoup de contenu. Nous devons continuer à émettre la commande gulp CSS. Gulp a un bon mécanisme appelé Watch qui nous permet de détecter les changements dans les fichiers et d’envoyer automatiquement des commandes. Nous pouvons construire ceci sur la base de tout ce que nous avons déjà fait. Nous avons essentiellement besoin d’ajouter une nouvelle directive: vous effectuez une tâche lorsque les fichiers de l’ensemble spécifié changent. En commençant par installer la montre gulp et l’ajouter au fichier gulp, il devrait être facile maintenant, puisque vous l’avez déjà fait plusieurs fois. La nouvelle tâche est très simple. Tout ce que nous faisons est de configurer les fichiers que nous voulons voir, et si l’un des fichiers correspond, nous effectuerons l’une des tâches existantes: charger 149e592a5bb2fc28839e2f2080e4c333 lorsque vous effectuez cette tâche en utilisant gulp Watch CSS, vous devriez voir une capture d’écran similaire à celle ci – dessous dans le terminal. Notez qu’il ne retourne pas à l’invite, juste \