Share
In dit artikel zult u zien hoe u slik kunt gebruiken om verschillende taken te automatiseren die u meestal met de hand uitvoert of waarvoor u afhankelijk bent van door anderen ontwikkelde hulpmiddelen.
Gulp is een streaming build-systeem. Misschien heb je al over gehoord en al grunt gebruikt. Maar de laatste tijd wordt slok populairder. Het kan geweldige dingen doen, zoals het compileren van LESS / Sass, JS-bestanden, het live herladen van webpagina's en nog veel meer.
Het kan u veel tijd besparen door verschillende taken te automatiseren. En het beste is dat u de kracht heeft om het te vertellen wat u moet doen, in tegenstelling tot het vertrouwen op tools van derden om bepaalde functionaliteit te implementeren. Kortom u kunt uw eigen automatiseringstool bouwen volgens uw behoeftenpakket.
Om te beginnen moet je Node.js (v0.10.30 of hoger) hebben geïnstalleerd. Persoonlijk geef ik er de voorkeur aan Node Version Manager (NVM) te gebruiken, zodat ik kan schakelen tussen verschillende versies van Node.js op mijn ontwikkelingsmachine.
Het eerste dat je moet doen, is gulp installeren. Gebruik hiervoor de volgende opdracht van terminal.
npm install -g gulp
Dit zal gulp wereldwijd op uw machine installeren.
Laten we beginnen met het instellen van de automatiseringstool door een map te maken in de WordPress themamap of elke gewenste gewenste locatie.
In mijn geval ga ik naar de themamap ...
cd ... / wp-content / thema's
... en voer de volgende opdracht uit.
mkdir wp-gulp-automatisering
Nu ga ik naar de map om een a te starten NPM project.
cd wp-gulp-automatisering npm init
Dit zal je verschillende vragen stellen zoals projectnaam, versie, beschrijving, auteur, licentie, enz.
Je mag ze invullen of blijven raken invoeren tot het zegt Ja. Ten slotte type Ja en druk op invoeren nog een keer.
Hiermee wordt een package.json-bestand in de map gemaakt. Het bevat informatie over uw project en de afhankelijkheden ervan.
Als u het proces correct hebt gevolgd, ziet uw pakket.json-bestand er als volgt uit:
"naam": "wp-gulp-automation", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": " echo \ "Fout: geen test opgegeven \" && exit 1 "," author ":" "," license ":" ISC "
Installeer slok lokaal bij uw project.
npm install gulp --save-dev
Dit zal een maken node_modules map en bewaar al uw projectafhankelijkheden daar. --save-dev wordt gebruikt om te updaten dev-afhankelijkheden in package.json.
Maak gulpfile.js aan in de projectdirectory met de volgende code.
Accentsconagua
var gulp = vereisen ('gulp'); gulp.task ('default', function () console.log ('default gulp task ...'));In het terminaltype slok en druk op invoeren. U ziet dat de bovenstaande tekst op de console is vastgelegd.
Er zijn verschillende gulp-plug-ins beschikbaar voor Sass-compilatie. Ik heb drie hieronder geprobeerd en vermeld.
Eenvoudigheidshalve zal ik in deze tutorial de eerste gebruiken, dat is gulp-sass.
Voer de volgende opdracht uit in de projectdirectory om deze te installeren.
npm install gulp-sass --save-dev
Laat de code bijwerken om Sass-bestanden in CSS-bestanden te compileren.
Voeg behoefte toe bovenaan gulpfile.
var sass = require ('gulp-sass'); gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ('standaard', ['sass']);Nu als ik ren slok in terminal wordt de sass-taak gestart.
En omdat ik het aan een array van standaardtaken heb toegevoegd, wanneer ik de terminal slik, start de standaardtaak de sass-taak.
Wat dit zal doen is het compileren van alle bestanden in de css / src map van het project en sla ze op in de css map. Misschien wilt u extra opties doorgeven aan de sass () functie afhankelijk van uw behoeften.
Dus eigenlijk rennen slok en slok zal op dit moment hetzelfde doen.
Vervolgens, om betere en verpakte JavaScript-code in uw thema's te hebben, hebt u gulp-jshint en gulp-concat nodig.
npm install gulp-jshint --save-dev npm install gulp-concat --save-dev
Voeg nu aan de bovenkant van gulpfile het vereiste toe:
var jshint = require ('gulp-jshint'); var concat = require ('gulp-concat');Voeg de volgende slottaaktaak toe aan het bestand tot lint en combineer alle js-bestanden.
gulp.task ('js', function () gulp.src ('js / src / *. js') .pipe (jshint ()) .pipe (jshint.reporter ('fail')) .pipe (concat ( 'theme.js')) .pipe (gulp.dest ('js')););Als u iets meer wilt organiseren, kunt u dat doen verkoper en thema mappen binnen js / src. De verkoper map bevat alle externe bibliotheken zoals jQuery-plug-ins en de thema map bevat de JavaScript-code van uw eigen thema.
Als je ze ook wilt verkleinen, kun je de slok-verlelijken inpluggen. En laten we onze standaardtaak bijwerken naar:
gulp.task ('standaard', ['sass', 'js']);De meest gebruikte gulp-plug-in voor deze taak is gulp-imagemin. Installeer het met behulp van:
npm install gulp-imagemin --sav-dev
Voeg behoefte toe slok-imagemin op de top:
var imagemin = require ('gulp-imagemin');En voeg de volgende taak toe aan het gulpbestand.
gulp.task ('img', function () gulp.src ('img / src / *. png, jpg, gif') .pipe (imagemin (optimizationLevel: 7, progressive: true)) .pipe (gulp.dest ('img')));Wat dit zal doen is een geoptimaliseerde kopie maken van alle afbeeldingen in de img / src map in de img directory.
Voeg het toe aan de standaard takenlijst.
gulp.task ('standaard', ['sass', 'js', 'img']);De volgende is het instellen van een horloge voor het automatiseren van taken.
gulp.task ('watch', function () gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js', ['js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););Toevoegen aan de standaard takenlijst geeft ons:
gulp.task ('standaard', ['sass', 'js', 'img', 'watch']);Wat gebeurt er als een fout optreedt tijdens het uitvoeren van een van onze taken? Je gulpbestand stopt met rennen.
Om dat aan te pakken, gebruiken we een mooie gulp-plugin die gulp-loodgieter wordt genoemd. We gebruiken ook gulp-kennisgeving om mooie gegromlevensmeldingen na fouten weer te geven.
Installeren slok-loodgieter en slok te melden gebruik makend van:
npm install gulp-plumber --save-dev npm install gulp-notify --save-dev
Opnieuw vereisen dit bovenaan gulpfile.
var loodgieter = vereisen ('gulp-loodgieter'); var notify = require ('gulp-notify');Hier is een handige loodgieterinstelling die ik zal gebruiken als er een fout optreedt in een van de taken.
var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', bericht: 'Fout: <%= error.message %>');
Nu is onze update sass taak ziet eruit als:
gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (loodgieter (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')));Let op de plumberErrorHandler toegevoegd. Op dezelfde manier zal ik dit toevoegen aan de js en img taken.
Een belangrijk ding dat nodig is, is de functionaliteit voor live herladen.
Installeer allereerst een browserextensie / add-on voor live herladen:
Nu moet u gulplevereload installeren met behulp van:
npm install gulp-liveraload --save-dev
Voeg het nog een keer toe aan de bovenkant waar je nodig hebt in gulpfile.
var livereload = vereisen ('gulp-livereload');Laten we onze taken bijwerken om nu live reload op te nemen.
De sass taak ziet er als volgt uit:
gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (loodgieter (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')) .pipe (livereload ()););Voeg op dezelfde manier toe livereload naar de js en img taken. Nog een ding dat je hoeft te doen is toevoegen livereload.listen (); aan het begin van de wachttaak.
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 ']););Om te testen livereload, laten we een index.php-bestand maken met de volgende code.
hallo van gulp automation tool
En een style.css.
/ * Naam van het thema: Tutsplus gulp wp automation Thema-URI: http://tutsplus.com Beschrijving: Automatisering van workflow voor wordpress-ontwikkeling. Auteur: Atinder Singh Auteur URI: http://tutsplus.com Versie: 1.4.1 Licentie: GNU General Public License v2 of later License URI: http://www.gnu.org/licenses/gpl-2.0.html * /
Activeer nu dit thema vanuit het WordPress-dashboard. Je hebt je basisomgeving ingesteld en klaar om te rocken. Rennen slok in terminal en bekijk het geactiveerde thema in uw browser. Klik op de live reload-extensie zodat de live reload-server verbinding maakt en naar de wijzigingen luistert.
Wanneer u de inhoud van een bestand wijzigt css / src of js / src, gulp zal de bestanden controleren en compileren en uw browser opnieuw laden.
Nu heb je een tool die kan worden gebruikt voor het maken van meerdere thema's, dus laten we de themabestanden verplaatsen naar een andere map in de wp-content / themes / wp-slok-automatisering / theme-standaardtekst directory.
Kopieer de index.php en style.css bestanden en de css, img en js mappen naar theme-standaardtekst.
Dit is een erg basic thema-boilerplate. U kunt dit verlengen of de door u gewenste gebruiken.
Voor deze laatste taak heb je drie Node.js-modules nodig. Installeer json-file, node-fs en fs-extra.
npm install json-file --save-dev npm install node-fs --save-dev npm install fs-extra --save-dev
Vereist ze aan de top van uw gulpfile.
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;Voeg deze taak toe aan uw gulpbestand.
gulp.task ('init', function () fs.mkdirSync (themeDir, 765, true); fse.copySync ('theme-boilerplate', themeDir + '/'););Wat je nu kunt doen, is een nieuw thema maken in wp-content / themes met behulp van de boilerplate code zoals zo, met vermelding van de THEMENAME kenmerk in package.json.
En rennen:
gulp init
Nu heb je twee mappen:
De mogelijkheden hiervoor zijn eindeloos.
Je kunt CoffeeScript gebruiken in plaats van gewoon JavaScript en het opslokken om het ook te bekijken. U kunt meer taken toevoegen afhankelijk van uw workflow. Sommige nieuwe taakideeën kunnen zijn:
Bedankt voor het lezen! Als u iets toe te voegen heeft of nieuwe taken hebt gecreëerd die u met lezers kunt delen, bent u welkom.
