Share
Dans cet article, vous verrez comment utiliser gulp pour automatiser plusieurs tâches que vous effectuez habituellement à la main ou pour lesquelles vous utilisez des outils développés par d'autres..
Gulp est un système de construction en streaming. Vous avez peut-être déjà entendu parler de grunt et en avez déjà utilisé. Mais dernièrement, le gouffre devient de plus en plus populaire. Il peut faire des choses incroyables comme la compilation de fichiers LESS / Sass, JS, le rechargement en direct de pages Web et bien plus encore..
Cela peut vous faire gagner beaucoup de temps en automatisant plusieurs tâches. Et la meilleure chose à faire est que vous avez le pouvoir de lui dire quoi faire, contrairement aux outils tiers pour implémenter certaines fonctionnalités. En bref, vous pouvez créer votre propre outil d'automatisation selon vos besoins..
Pour commencer, vous devez avoir installé Node.js (v0.10.30 ou supérieur). Personnellement, je préfère utiliser Node Version Manager (NVM) pour pouvoir basculer entre les différentes versions de Node.js sur ma machine de développement..
La première chose à faire est d'installer gulp. Utilisez la commande suivante du terminal pour le faire.
npm install -g gulp
Cela installera gulp globalement sur votre machine.
Commençons par configurer l'outil d'automatisation en créant un répertoire dans le dossier des thèmes WordPress ou dans l'emplacement de votre choix..
Dans mon cas, je vais naviguer dans le dossier des thèmes…
cd… / wp-content / themes
… Et lancez la commande suivante.
mkdir wp-gulp-automation
Maintenant, je vais naviguer dans le dossier pour lancer une npm projet.
cd wp-gulp-automation npm init
Cela vous posera plusieurs questions comme le nom du projet, la version, la description, l'auteur, la licence, etc..
Vous pouvez soit les remplir soit continuer à frapper Entrer jusqu'à ce qu'il soit dit Oui. Enfin, tapez Oui et frapper Entrer encore une fois.
Cela créera un fichier package.json dans le répertoire. Il contient des informations sur votre projet et ses dépendances..
Si vous avez correctement suivi le processus, votre fichier package.json ressemblera à ceci:
"name": "wp-gulp-automation", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": " echo \ "Erreur: pas de test spécifié \" && exit 1 "," author ":" "," license ":" ISC "
Installez gulp localement sur votre projet.
npm install gulp --save-dev
Cela va créer un node_modules dossier et y conserver toutes les dépendances de votre projet. --save-dev est utilisé pour mettre à jour dépendances de dev dans package.json.
Créez gulpfile.js dans le répertoire du projet avec le code suivant.
Accentsconagua
var gulp = require ('gulp'); gulp.task ('default', function () console.log ('default gulp task…'));Dans le type de terminal gorgée et frapper Entrer. Vous verrez que le texte ci-dessus est enregistré sur la console.
Il existe différents plugins gulp disponibles pour la compilation Sass. J'ai essayé et énuméré trois d'entre eux ci-dessous.
Par souci de simplicité, dans ce tutoriel, je vais utiliser le premier, gulp-sass.
Exécutez la commande suivante dans le répertoire du projet pour l'installer..
npm installer gulp-sass --save-dev
Permet de mettre à jour le code pour compiler les fichiers Sass en fichiers CSS.
Ajouter require au sommet du fichier gulp.
var sass = require ('gulp-sass'); gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ('default', ['sass']);Maintenant quand je cours avaler sass en terminal, la tâche sass est renvoyée.
Et parce que je l'ai ajouté à un tableau de tâches par défaut, lorsque je lance gulp in terminal, la tâche par défaut déclenche la tâche sass.
Ce que cela va faire est de compiler tous les fichiers de la css / src dossier du projet et enregistrez-les sur le css dossier. Vous voudrez peut-être passer des options supplémentaires au toupet() fonction en fonction de vos besoins.
Donc, fondamentalement, courir gorgée et avaler sass fera la même chose en ce moment.
Ensuite, pour avoir du code JavaScript de meilleure qualité et plus complet dans vos thèmes, vous avez besoin de gulp-jshint et de gulp-concat..
npm installer gulp-jshint --save-dev npm installer gulp-concat --save-dev
Ajoutez maintenant require au sommet de gulpfile:
var jshint = require ('gulp-jshint'); var concat = require ('gulp-concat');Ajouter la tâche suivante dans le fichier pour lint et combiner tous les fichiers js.
gulp.task ('js', function () gulp.src ('js / src / *. js') .pipe (jshint ()) .pipe (jshint.reporter ('fail')) .pipe (concat ( 'theme.js')) .pipe (gulp.dest ('js')););Si vous voulez organiser un peu plus, vous pouvez avoir vendeur et thème dossiers à l'intérieur js / src. le vendeur Ce dossier contient toutes les bibliothèques tierces telles que les plugins jQuery et le thème le dossier contiendra le code JavaScript de votre propre thème.
Si vous voulez aussi les réduire, vous pouvez inclure le avaler brancher. Et mettons à jour notre tâche par défaut pour:
gulp.task ('default', ['sass', 'js']);Le plugin gulp le plus utilisé pour cette tâche est gulp-imagemin. Installez-le en utilisant:
npm installez gulp-imagemin --sav-dev
Ajouter besoin gulp-imagemin au sommet:
var imagemin = require ('gulp-imagemin');Et ajoutez la tâche suivante au fichier gulp.
gulp.task ('img', function () gulp.src ('img / src / *. png, jpg, gif') .pipe (imagemin (optimLevel: 7, progressif: vrai)) .pipe (gulp.dest ('img')));Ce que cela va faire est de faire une copie optimisée de toutes les images placées dans le img / src répertoire dans le img annuaire.
Ajoutez-le à la liste des tâches par défaut.
gulp.task ('default', ['sass', 'js', 'img']);Suivant met en place une veille pour l'automatisation des tâches.
gulp.task ('watch', function () gulp.watch ('css / src / *. scss', ['sass'])); gulp.watch ('js / src / *. js', ['js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););L'ajouter à la liste des tâches par défaut nous donne:
gulp.task ('default', ['sass', 'js', 'img', 'watch']);Que se passe-t-il si une erreur survient lors de l'exécution de l'une de nos tâches? Votre fichier gulp cessera de fonctionner.
Afin de gérer cela, utilisons un plugin gulp appelé gulp-plumber. Nous utiliserons également gulp-notify pour afficher de belles notifications de la vie de growl en cas d'erreur..
Installer gros-plombier et avaler-notifier en utilisant:
npm installer gulp-plumber --save-dev npm installer gulp-notify --save-dev
Encore besoin de cela au sommet de gulpfile.
var plombier = require ('gulp-plombier'); var notify = require ('gulp-notify');Voici un paramètre pratique de plombier que je vais utiliser lorsqu'une erreur survient dans l'une des tâches..
var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', message: 'Erreur: <%= error.message %>');
Maintenant notre mise à jour toupet tâche ressemblera à ceci:
gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (plombier (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')));Remarquez le plumberErrorHandler ajoutée. De la même manière, je vais ajouter ceci à la js et img les tâches.
Une fonctionnalité importante est la fonctionnalité de rechargement en direct.
Tout d’abord, installez une extension / un navigateur pour le rechargement en direct:
Maintenant, vous devez installer gulp-livereload en utilisant:
npm installe gulp-liveraload --save-dev
Une fois de plus, ajoutez-le en haut, là où vous avez besoin de gulpfile.
var livereload = require ('gulp-livereload');Permet de mettre à jour nos tâches pour inclure la recharge en direct maintenant.
le toupet la tâche ressemblera à ceci:
gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (plombier (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')) .pipe (livereload ()););De même ajouter foie au js et img les tâches. Une dernière chose à faire est d’ajouter livereload.listen (); au début de la tâche de surveillance.
gulp.task ('watch', function () livereload.listen (); gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js ', [' js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']);Afin de tester foie, créons un fichier index.php avec le code suivant.
bonjour de l'outil d'automatisation gulp
Et un style.css.
/ * Nom du thème: Tutsplus gulp wp automation URI du thème: http://tutsplus.com Description: Automatisation du workflow de développement de wordpress. Auteur: Atinder Singh Auteur URI: http://tutsplus.com Version: 1.4.1 Licence: Licence publique générale GNU v2 ou ultérieure URI de la licence: http://www.gnu.org/licenses/gpl-2.0.html * /
Activez maintenant ce thème à partir du tableau de bord WordPress. Votre environnement de base est configuré et prêt à basculer. Courir gorgée dans le terminal et affichez le thème activé dans votre navigateur. Cliquez sur l'extension Live Reload pour que le serveur Live Reload soit connecté et écoutez les modifications..
Chaque fois que vous modifiez le contenu d'un fichier dans css / src ou js / src, gulp surveillera et compilera les fichiers et rechargera votre navigateur.
Maintenant, vous avez un outil qui peut être utilisé pour créer plusieurs thèmes, alors déplaçons les fichiers de thème dans un autre dossier de la liste. wp-content / themes / wp-gulp-automation / theme-boilerplate annuaire.
Copier le index.php et style.css les fichiers et les css, img et js dossiers à thème-passe-partout.
C'est un thème très basique. Vous pouvez prolonger ceci ou utiliser celui que vous aimez.
Pour cette dernière tâche, vous aurez besoin de trois modules Node.js. Installez json-file, node-fs et fs-extra.
npm installez json-file --save-dev npm installez node-fs --save-dev npm installez fs-extra --save-dev
Exigez-les en haut de votre fichier gulp.
var fs = require ('node-fs'); var fse = require ('fs-extra'); var json = require ('json-file'); var themeName = json.read ('./ package.json'). get ('themeName'); var themeDir = '… /' + themeName;Ajouter cette tâche à votre fichier gulp.
gulp.task ('init', function () fs.mkdirSync (themeDir, 765, true); fse.copySync ('theme-boilerplate', themeDir + '/'););Ce que vous pouvez faire maintenant, c’est créer un nouveau thème dans wp-content / themes en utilisant le code standard comme suit, en spécifiant le themeName attribut dans package.json.
Et en cours d'exécution:
gulp init
Maintenant vous avez deux dossiers:
Les possibilités pour cela sont infinies.
Vous pouvez utiliser CoffeeScript au lieu de JavaScript classique et dire à gulp de le surveiller également. Vous pouvez ajouter plus de tâches en fonction de votre flux de travail. Quelques nouvelles idées de tâches pourraient être:
Merci d'avoir lu! Si vous avez quelque chose à ajouter ou si vous avez créé de nouvelles tâches que vous pouvez partager avec les lecteurs, vous êtes le bienvenu..
