Share
I denne artikkelen vil du se hvordan du kan bruke gulp til å automatisere flere oppgaver du vanligvis gjør for hånd eller som du stoler på verktøy utviklet av andre.
Gulp er et streaming-bygningssystem. Du har kanskje hørt om og brukt grunt allerede. Men i det siste blir gulpen mer populær. Det kan gjøre fantastiske ting som å samle LESS / SASS, JS-filer, live reloading nettsider og mye mer.
Det kan spare deg mye tid ved å automatisere flere oppgaver. Og det beste er at du har muligheten til å fortelle det hva du skal gjøre, i motsetning til å stole på tredjepartsverktøy for å implementere visse funksjoner. Kort sagt, du kan bygge ditt eget automatiseringsverktøy i henhold til dine behov.
For å komme i gang må du ha Node.js (v0.10.30 eller høyere) installert. Jeg foretrekker å bruke Node Version Manager (NVM) slik at jeg kan bytte mellom forskjellige versjoner av Node.js på min utviklingsmaskin.
Det første du må gjøre er å installere gulp. Bruk følgende kommando fra terminal for å gjøre det.
npm install-g gulp
Dette vil installere gulp globalt på maskinen din.
La oss begynne å sette opp automatiseringsverktøyet ved å lage en katalog i WordPress-temaer-mappen eller ønsket sted du vil ha.
I mitt tilfelle vil jeg navigere til tema-mappen ...
cd ... / wp-innhold / temaer
... og kjør følgende kommando.
mkdir wp-gulp-automasjon
Nå skal jeg navigere til mappen for å starte en NPM prosjekt.
cd wp-gulp-automation npm init
Dette vil stille deg flere spørsmål som prosjektnavn, versjon, beskrivelse, forfatter, lisens, osv.
Du kan enten fylle dem inn eller fortsette å treffe Tast inn til det står ja. Til slutt skriver du ja og treffer Tast inn en gang til.
Dette vil opprette en package.json-fil i katalogen. Den inneholder informasjon om ditt prosjekt og dets avhengigheter.
Hvis du har fulgt prosessen riktig, ser filen pack.json ut slik:
"navn": "wp-gulp-automation", "versjon": "1.0.0", "beskrivelse": "", "main": "index.js", "scripts": "test" ekko \ "Feil: ingen test angitt \" && avslutte 1 "," Forfatter ":" "," Lisens ":" ISC "
Installer gulp lokalt til prosjektet ditt.
npm installer gulp - save-dev
Dette vil skape en node_modules mappe og beholde alle dine prosjektavhengigheter der inne. --save-dev er vant til å oppdatere dev-avhengig i package.json.
Opprett gulpfile.js i prosjektkatalogen med følgende kode.
Accentsconagua
var gulp = krever ('gulp'); gulp.task ('standard', funksjon () console.log ('standard gulp-oppgave ...'));I terminaltypen gulp og traff Tast inn. Du vil se at teksten ovenfor er logget inn i konsollen.
Det finnes ulike gulp plugins tilgjengelig for Sass kompilering. Jeg har prøvd og oppført tre av dem nedenfor.
For enkelhets skyld, i denne opplæringen vil jeg bruke den første, det er gulp-sass.
Kjør følgende kommando i prosjektkatalogen for å installere den.
npm installer gulp-sass - save-dev
Lar oppdatering koden for å kompilere Sass-filer i CSS-filer.
Legg til krever på toppen av gulpfile.
var sass = krever ('gulp-sass'); gulp.task ('sass', funksjon () gulp.src ('./ css / src / * .scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ('standard', ['sass']);Nå når jeg løper gulp sass i terminalen blir sassoppgaven avfyrt.
Og fordi jeg har lagt den til en rekke standardoppgaver, når jeg kjører gulp i terminal, brenner standardoppgaven opp sass-oppgaven.
Hva dette vil gjøre er å kompilere alle filene i css / src mappe av prosjektet og lagre dem til css mappe. Du vil kanskje sende ekstra alternativer til sass () funksjon avhengig av dine behov.
Så i utgangspunktet kjører gulp og gulp sass vil gjøre det samme på dette tidspunktet.
Neste, for å få bedre og pakket JavaScript-kode i temaene dine, trenger du gulp-jshint og gulp-concat.
npm installer gulp-jshint - save-dev npm installer gulp-concat - save-dev
Legg nå til på toppen av gulpfile:
var jshint = krever ('gulp-jshint'); var concat = krever ('gulp-concat');Legg til følgende gulp-oppgave i filen til lint og kombiner alle js-filer.
gulp.task ('js', funksjon () gulp.src ('js / src / *. js') .pipe (jshint ()) .pipe (jshint.reporter ('fail')) 'theme.js')). pip (gulp.dest ('js')););Hvis du vil organisere litt mer, kan du ha selger og tema mapper inni JS / src. De selger mappen inneholder alle tredjepartsbiblioteker, for eksempel jQuery plugins, og tema mappen inneholder ditt eget temas JavaScript-kode.
Hvis du vil redusere dem også, kan du inkludere svelge-uglify plugg inn. Og la oss oppdatere standardoppgaven vår til å:
gulp.task ('standard', ['sass', 'js']);Den mest brukte gulp plugin for denne oppgaven er gulp-imagemin. Installer den ved å bruke:
npm installer gulp-imagemin - sav-dev
Legg til krav jafs-imagemin på toppen:
var imagemin = krever ('gulp-imagemin');Og legg til følgende oppgave i gulpfilen.
gulp.task ('img', funksjon () gulp.src ('img / src / *. png, jpg, gif') .pipe (imagemin (optimaliseringLevel: 7, progressiv: sann)) (gulp.dest ('img')));Hva dette vil gjøre, er å lage en optimalisert kopi av alle bildene som er plassert i img / src katalog inn i img katalog.
Legg det til i standardoppgavelisten.
gulp.task ('standard', ['sass', 'js', 'img']);Neste er å sette opp et klokke for automatiseringsoppgaver.
gulp.task ('watch', funksjon () gulp.watch ('css / src / * .scss', ['sass']); gulp.watch ('js / src / * .js' ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););Hvis du legger til det i standardoppgavelisten, får du oss:
gulp.task ('standard', ['sass', 'js', 'img', 'watch']);Hva skjer hvis det oppstår en feil mens du kjører en av oppgavene våre? Gulpfilen din slutter å løpe.
For å håndtere det, la oss bruke en fin gulp-plugin kalt gulp-plumber. Vi vil også bruke gulp-notify for å vise gode grøntlevelser om feil.
Installere jafs-rørlegger og svelge-varsle ved hjelp av:
npm installer gulp-rørlegger - save-dev npm installer gulp-notify --save-dev
Igjen krever dette på toppen av gulpfile.
Var rørlegger = krever ('gulp-rørlegger'); var notify = require ('gulp-notify');Her er en praktisk rørleggerinnstilling som jeg vil bruke når det oppstår en feil i noen av oppgavene.
var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', melding: 'Feil: <%= error.message %>');
Nå er vår oppdatert sass oppgaven vil se ut som:
gulp.task ('sass', funksjon () gulp.src ('./css / src / * .scss') .pipe (rørlegger (plumberErrorHandler)). pipe (sass ()) .pipe (gulp.dest './css')));Legg merke til plumberErrorHandler la til. På samme måte vil jeg legge til dette i js og img oppgaver.
En viktig ting som trengs er live reload-funksjonalitet.
Først av alt installerer du en nettleserutvidelse / tillegg for live reload:
Nå må du installere gulp-livereload ved å bruke:
npm installer gulp-liveraload - save-dev
En gang til legger du det til toppen der du trenger i gulpfile.
var leverenlast = krever ('gulp-livereload');Lar oppdatere våre oppgaver for å inkludere live reload nå.
De sass oppgaven vil se slik ut:
gulp.task ('sass', funksjon () gulp.src ('./css / src / * .scss') .pipe (rørlegger (plumberErrorHandler)). pipe (sass ()) .pipe (gulp.dest './css')) .pipe (livereload ()););Tilsvarende legg til livereload til js og img oppgaver. En ting du må gjøre er å legge til livereload.listen (); i begynnelsen av klokkeoppgaven.
gulp.task ('watch', funksjon () livereload.listen (); gulp.watch ('css / src / * .scss', ['sass']); gulp.watch ('js / src / *. js ', [' js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););For å teste livereload, la oss lage en index.php-fil med følgende kode.
hei fra gulp automatisering verktøyet
Og en stil.css.
/ * Tema navn: Tutsplus gulp wp automation Tema URI: http://tutsplus.com Beskrivelse: Automatiserer Wordpress utviklings arbeidsflyt. Forfatter: Atinder Singh Forfatter URI: http://tutsplus.com Versjon: 1.4.1 Lisens: GNU General Public License v2 eller nyere Lisens URI: http://www.gnu.org/licenses/gpl-2.0.html * /
Aktiver nå dette temaet fra WordPress dashboard. Du har ditt grunnleggende miljø satt opp og klar til å rocke. Løpe gulp i terminal, og se det aktiverte temaet i nettleseren din. Klikk på oppdateringen for live reload slik at live reload-serveren blir tilkoblet, og lytt til endringene.
Når du endrer filens innhold i css / src eller JS / src, Gulp vil overvåke og kompilere filene og laste inn nettleseren din.
Nå har du et verktøy som kan brukes til å lage flere temaer, så la oss flytte temafilene til en annen mappe i wp-content / themes / wp-jafs-automasjon / tema-standardtekst katalog.
Kopier index.php og style.css filer og css, img og js mapper til tema-standardtekst.
Dette er en veldig grunnleggende tema-boilerplate. Du kan utvide dette eller bruke den du liker.
For denne siste oppgaven trenger du tre Node.js-moduler. Installer json-fil, node-fs og fs-ekstra.
npm installere json-fil - save-dev npm installeringsnode-fs --save-dev npm installere fs-extra - save-dev
Krev dem på toppen av din gulpfile.
var fs = krever ('node-fs'); var fse = krever ('fs-ekstra'); var json = krever ('json-fil'); var themeName = json.read ('./ package.json'). få ('temanavn'); var themeDir = '... /' + themeName;Legg til denne oppgaven i din gulpfile.
gulp.task ('init', funksjon () fs.mkdirSync (themeDir, 765, true); fse.copySync ('theme-boilerplate', themeDir + '/'););Hva du kan gjøre nå, er å lage et nytt tema i wp-content / themes ved hjelp av boilerplate-koden, slik at du spesifiserer THEME attributt i package.json.
Og kjører:
gulp init
Nå har du to mapper:
Mulighetene for dette er uendelige.
Du kan bruke CoffeeScript i stedet for vanlig JavaScript og fortell gulp å se etter det også. Du kan legge til flere oppgaver, avhengig av arbeidsflyten din. Noen nye oppgaveideer kan være:
Takk for at du leste! Hvis du har noe å legge til eller du har opprettet nye oppgaver som du kan dele med leserne, er du velkommen.
