Share
I den här artikeln ser du hur du kan använda gulp för att automatisera flera uppgifter som du brukar göra för hand eller för vilken du är beroende av verktyg som utvecklats av andra.
Gulp är ett strömmande byggsystem. Du kanske har hört talas om och använt grunt redan. Men på senare tid blir det mer populärt. Det kan göra fantastiska saker som att kompilera LESS / Sass, JS-filer, live reloading webbsidor och mycket mer.
Det kan spara mycket tid genom att automatisera flera uppgifter. Och det bästa är att du har befogenhet att berätta vad du ska göra, till skillnad från att förlita dig på verktyg från tredje part för att implementera viss funktionalitet. Kort sagt kan du bygga ditt eget automationsverktyg enligt dina behov.
För att komma igång måste du ha Node.js (v0.10.30 eller högre) installerat. Jag föredrar personligen att använda Node Version Manager (NVM) så att jag kan växla mellan olika versioner av Node.js på min utvecklingsmaskin.
Det första du behöver göra är att installera gulp. Använd följande kommando från terminal för att göra det.
npm installera -g gulp
Detta installerar gulp globalt på din maskin.
Låt oss börja konfigurera automatiseringsverktyget genom att skapa en katalog i mappen WordPress-teman eller vilken föredragen plats du vill ha.
I mitt fall kommer jag att navigera till teman mappen ...
cd ... / wp-innehåll / teman
... och kör följande kommando.
mkdir wp-gulp-automation
Nu ska jag navigera till mappen för att initiera en npm projekt.
cd wp-gulp-automation npm init
Detta kommer att fråga dig flera frågor som projektnamn, version, beskrivning, författare, licens osv.
Du kan antingen fylla i eller fortsätta slå Stiga på tills det står ja. Slutligen typ ja och slå Stiga på en gång till.
Detta skapar en paket.json-fil i katalogen. Den innehåller information om ditt projekt och dess beroenden.
Om du har följt processen på rätt sätt ser din package.json-fil ut så här:
"namn": "wp-gulp-automation", "version": "1.0.0", "beskrivning": "", "main": "index.js", "scripts": "test" echo \ "Fel: inget test specificerat \" && avsluta 1 "," författare ":" "," licens ":" ISC "
Installera gulp lokalt för ditt projekt.
npm installera gulp - save-dev
Detta skapar en node_modules mapp och behåll alla dina projektberoende där. --spara-dev används för att uppdatera dev-beroenden i package.json.
Skapa gulpfile.js i projektkatalogen med följande kod.
Accentsconagua
var gulp = kräver ("gulp"); gulp.task ('default', funktion () console.log ('standard gulp task ...'));I terminaltypen klunk och slå Stiga på. Du kommer att se att texten ovan är loggad till konsolen.
Det finns olika gulp plugins tillgängliga för Sass kompilering. Jag har provat och listat tre av dem nedan.
För enkelhets skull, i denna handledning kommer jag att använda den första, det är gulp-sass.
Kör följande kommando i projektkatalogen för att installera det.
npm installera gulp-sass -save-dev
Låt oss uppdatera koden för att kompilera Sass-filer i CSS-filer.
Lägg till kräver på toppen av gulpfile.
var sass = kräver ("gulp-sass"); gulp.task ('sass', funktion () gulp.src ('./css / src / * .scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ('default', ['sass']);Nu när jag kör gulp sass i terminal är sass-uppgiften avfyrade.
Och eftersom jag har lagt till den i en rad standarduppdrag, när jag kör kanten i terminal, brinner standarduppgiften sass-uppgiften.
Vad detta kommer att göra är att kompilera alla filer i css / src mapp på projektet och spara dem till css mapp. Du kanske vill skicka extra alternativ till sass () funktion beroende på dina behov.
Så i princip kör klunk och gulp sass kommer att göra samma sak just nu.
För att kunna ha bättre och förpackad JavaScript-kod i dina teman behöver du gulp-jshint och gulp-concat.
npm installera gulp-jshint - save-dev npm installera gulp-concat - save-dev
Lägg nu till på toppen av gulpfile:
var jshint = kräver ('gulp-jshint'); var concat = kräver ("gulp-concat");Lägg till följande gulp-uppgift i filen till lint och kombinera alla js-filer.
gulp.task ('js', funktion () gulp.src ('js / src / *. js') .pipe (jshint ()) .pipe (jshint.reporter ('fail')) 'theme.js')). pip (gulp.dest ('js')););Om du vill organisera lite mer, kan du ha Säljare och tema mappar inuti js / src. De Säljare mappen innehåller alla tredjepartsbibliotek som jQuery-plugins och tema mappen innehåller ditt eget temas JavaScript-kod.
Om du också vill begränsa dem kan du inkludera gulp-uglify plugin. Och låt oss uppdatera vår standarduppgift till:
gulp.task ('default', ['sass', 'js']);Den vanligaste gulp plugin för denna uppgift är gulp-imagemin. Installera det med hjälp av:
npm installera gulp-imagemin --sav-dev
Lägg till krav klunk-imagemin på toppen:
var imagemin = kräver ('gulp-imagemin');Och lägg till följande uppgift i gulpfile.
gulp.task ('img', funktion () gulp.src ('img / src / *. png, jpg, gif') .pipe (imagemin (optimizationLevel: 7, progressive: true)) (gulp.dest ('img')));Vad detta kommer att göra är att göra en optimerad kopia av alla bilder som placeras i img / src katalog i img katalog.
Lägg till den i standarduppgiftslistan.
gulp.task ('default', ['sass', 'js', 'img']);Nästa ställer in en klocka för automatiserande uppgifter.
gulp.task ('watch', funktion () gulp.watch ('css / src / * .scss', ['sass']); gulp.watch ('js / src / * .js' ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););Om du lägger till den i standarduppgiftslistan ger vi oss följande information:
gulp.task ('default', ['sass', 'js', 'img', 'watch']);Vad händer om ett fel uppstår när du kör en av våra uppgifter? Din gulpfil kommer sluta springa.
För att hantera det, låt oss använda ett trevligt gulp-plugin som kallas gulp-plumber. Vi använder även gulp-notify för att visa fina grönt liv meddelanden vid fel.
Installera klunk-rörmokare och gulp-notify använder sig av:
npm installera gulp-rörmokare - save-dev npm installera gulp-meddela --save-dev
Återigen kräver detta på toppen av gulpfile.
Var rörmokare = kräver ("gummiblandare"); var notify = require ("gulp-notify");Här är en praktisk rörmokare som jag använder när ett fel uppstår i någon av uppgifterna.
var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', meddelande: 'Fel: <%= error.message %>');
Nu uppdaterad sass uppgiften kommer att se ut:
gulp.task ('sass', funktion () gulp.src ('./css / src / * .scss'). pip (rörmokare (plumberErrorHandler)). pip (sass ()). pip (gulp.dest './css')));Lägg märke till plumberErrorHandler Lagt till. På samma sätt lägger jag till detta i js och img uppgifter.
En viktig sak som behövs är live reload-funktionalitet.
Först och främst installera en webbläsareutvidgning / addon för live reload:
Nu behöver du installera gulp-livereload med:
npm installera gulp-liveraload - save-dev
En gång till lägger den till toppen där du behöver i gulpfile.
var leverbelastning = kräva ("gulp-livereload");Låt oss uppdatera våra uppgifter för att inkludera live reload nu.
De sass uppgiften kommer att se ut så här:
gulp.task ('sass', funktion () gulp.src ('./css / src / * .scss'). pip (rörmokare (plumberErrorHandler)). pip (sass ()). pip (gulp.dest './css')). pip (leverplatta ()););På samma sätt lägg till livereload till js och img uppgifter. En sak du behöver göra är att lägga till livereload.listen (); i början av klockan uppgiften.
gulp.task ('watch', funktion () livereload.listen (); gulp.watch ('css / src / * .scss', ['sass']); gulp.watch ('js / src / *. js ', [' js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););För att testa livereload, låt oss skapa en index.php-fil med följande kod.
hej från gulp automation verktyg
Och en style.css.
/ * Tema Namn: Tutsplus Gulp WP Automation Tema URI: http://tutsplus.com Beskrivning: Automatiserar Wordpress Development Workflow. Författare: Atinder Singh Författare URI: http://tutsplus.com Version: 1.4.1 Licens: GNU General Public License v2 eller senare Licens URI: http://www.gnu.org/licenses/gpl-2.0.html * /
Aktivera nu detta tema från WordPress instrumentpanel. Du har din grundläggande miljö inställd och redo att rocka. Springa klunk i terminal och visa det aktiverade temat i din webbläsare. Klicka på live reload-förlängningen så att live reload-servern blir ansluten och lyssna på ändringarna.
När du ändrar filens innehåll i css / src eller js / src, Gulp övervakar och sammanställer filerna och laddar om din webbläsare.
Nu har du ett verktyg som kan användas för att skapa flera teman, så låt oss flytta temafilerna till en annan mapp i wp-content / themes / wp-klunk-automation / tema-standardtext katalog.
Kopiera index.php och style.css filer och css, img och js mappar till theme-standardtext.
Det här är en väldigt grundläggande tema-panna. Du kan förlänga detta eller använd den du vill.
För den här sista uppgiften behöver du tre Node.js-moduler. Installera json-fil, node-fs och fs-extra.
npm installera json-fil - save-dev npm installera nod-fs - save-dev npm installera fs-extra - save-dev
Kräver dem längst upp i ditt gulpfile.
var fs = kräver ('nod-fs'); var fse = kräver ("fs-extra"); var json = kräver ('json-fil'); var themeName = json.read ('./pack.json'). få ('themeName'); var themeDir = '... /' + themeName;Lägg till den här uppgiften i ditt gulpfile.
gulp.task ('init', funktion () fs.mkdirSync (themeDir, 765, true); fse.copySync ('theme-boilerplate', themeDir + '/'););Vad du kan göra nu är att skapa ett nytt tema i wp-content / teman Använd kedjeplattkoden som så, med angivande av THEME attribut i package.json.
Och springande:
gulp init
Nu har du två mappar:
Möjligheterna för detta är oändliga.
Du kan använda CoffeeScript istället för regelbunden JavaScript och berätta om att titta på det också. Du kan lägga till fler uppgifter beroende på ditt arbetsflöde. Några nya uppgiftsidéer kan vara:
Tack för att du läser! Om du har något att lägga till eller du har skapat nya uppgifter som du kan dela med läsare, är du välkommen.
