Share
În acest articol veți vedea cum puteți utiliza gulp pentru a automatiza mai multe sarcini pe care le faceți de obicei manual sau pentru care vă bazați pe instrumente dezvoltate de alții.
Gulp este un sistem de streaming. S-ar putea să fi auzit despre și să folosiți deja mormântul. Dar în ultima vreme gulpul devine din ce în ce mai popular. Poate face lucruri uimitoare cum ar fi compilarea LESS / Sass, fișierele JS, reîncărcarea în direct a paginilor web și multe altele.
Acesta vă poate economisi mult timp automatizând mai multe sarcini. Și cel mai bun lucru este că aveți puterea să-i spuneți ce să faceți, spre deosebire de faptul că se bazează pe instrumente de la terțe părți pentru a implementa anumite funcționalități. Pe scurt, vă puteți construi propriul instrument de automatizare ca pe setul de nevoi.
Pentru a începe, trebuie să aveți instalat Node.js (v0.10.30 sau mai recent). Personal prefer să folosesc Node Version Manager (NVM) pentru a putea comuta între diferite versiuni ale Node.js pe mașina mea de dezvoltare.
Primul lucru pe care trebuie să-l faceți este să instalați gulp. Utilizați următoarea comandă din terminal pentru a face acest lucru.
npm instalează -g gulp
Acest lucru va instala gulp global pe aparat.
Să începem configurarea instrumentului de automatizare creând un director în dosarul temelor WordPress sau în orice locație preferată dorită.
În cazul meu, voi naviga la dosarul temelor ...
cd ... / wp-content / temele
... și executați următoarea comandă.
mkdir wp-gulp-automatizare
Acum voi naviga la dosarul pentru a iniția o NPM proiect.
cd wp-gulp-automatizare npm init
Acest lucru vă va pune mai multe întrebări, cum ar fi numele proiectului, versiunea, descrierea, autorul, licența etc..
Puteți să le completați sau să continuați să faceți lovituri introduce până când se spune da. În cele din urmă tip da și lovit introduce încă o dată.
Acest lucru va crea un fișier package.json în director. Acesta deține informații despre proiectul dvs. și despre dependențele acestuia.
Dacă ați urmat corect procesul, fișierul package.json va arăta astfel:
"name": "wp-gulp-automation", "versiune": "1.0.0", "description" echo \ "Eroare: nici un test specificat \" && ieșire 1 "," autor ":" "," licență ":" ISC "
Instalați gulp local la proiectul dvs..
npm instalează gulp --save-dev
Acest lucru va crea o node_modules și păstrați toate dependențele de proiect acolo. --salvați-dev este utilizat pentru actualizare dev-dependențe în package.json.
Creați gulpfile.js în directorul proiectului cu următorul cod.
Accentsconagua
var gulp = necesită ("gulp"); gulp.task ('implicit', funcția () console.log ('implicit sarcină gulp ...'));În tipul terminalului înghiţitură și a lovit introduce. Veți vedea că textul de mai sus este înregistrat în consola.
Există diverse pluginuri de gulp disponibile pentru compilarea Sass. Am încercat și am enumerat trei dintre ele mai jos.
Din motive de simplitate, în acest tutorial voi folosi primul, care este gulp-sass.
Rulați următoarea comandă în directorul de proiect pentru ao instala.
npm instalează gulp-sass - saves-dev
Permite actualizarea codului pentru a compila fișierele Sass în fișierele CSS.
Adăugați solicitați în partea de sus a gulpfile.
var sass = necesită ("gulp-sass"); gulp.task ('sass', funcția () gulp.src ('./ css / src / * .ssss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ("implicit", ['sass']);Acum când alerg gulp sass în terminal, sarcina Sass este declanșată.
Și pentru că l-am adăugat la o serie de sarcini implicite, atunci când execut un gulp în terminal, sarcina implicită declanșează sarcina sass.
Ce va face aceasta este compilarea tuturor fișierelor din css / src folderul proiectului și salvați-l la css pliant. Poate doriți să treceți opțiuni suplimentare la sass () funcție în funcție de nevoile dvs..
Deci, de fapt, alergând înghiţitură și gulp sass va face același lucru în acest moment.
În continuare, pentru a avea un cod JavaScript mai bun și mai bun în temele dvs., aveți nevoie de gulp-jshint și gulp-concat.
npm instalează gulp-jshint --save-dev npm instalează gulp-concat --save-dev
Acum adăugați necesită în partea de sus a gulpfile:
var jshint = cer ('gulp-jshint'); var concat = necesită ("gulp-concat");Adăugați următoarea sarcină gulp în fișierul pentru a scame și combina toate fișierele js.
gulp.task ('js', function () gulp.src ('js / src / * .js') .pipe (jshint ()) .pipe (jshint.reporter 'theme.js')). pip (gulp.dest ('js')););Dacă doriți să organizați un pic mai mult, puteți avea furnizor și temă dosarele din interior js / src. furnizor folderul conține toate bibliotecile terților, cum ar fi pluginurile jQuery și temă dosarul va conține codul JavaScript al temei proprii.
Dacă doriți să le minimalizați, puteți include și înghiți dintr-urâți conecteaza. Și să actualizăm sarcina noastră implicită la:
gulp.task ("implicit", ['sass', 'js']);Cel mai frecvent utilizat plugin de gulp pentru această sarcină este gulp-imagemin. Instalați-l utilizând:
npm instalare gulp-imagemin -sav-dev
Adăugați solicitați înghițitură-imagemin în vârf:
var imagemin = necesită ('gulp-imagemin');Și adăugați următoarea sarcină la gulpfile.
gulp.task ('img', function () gulp.src ('img / src / *. png, jpg, gif') .pipe (gulp.dest ('img'));Ceea ce va face este să faceți o copie optimizată a tuturor imaginilor plasate în img / src director în img director.
Adăugați-l la lista de sarcini prestabilite.
gulp.task ("implicit", ['sass', 'js', 'img']);Următorul este setarea unui ceas pentru automatizarea sarcinilor.
gulp.task ('watch', function () gulp.watch ('css / src / * .sss', ['sass']); gulp.watch ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););Adăugându-l la lista de sarcini prestabilite ne oferă:
gulp.task ("implicit", ['sass', 'js', 'img', 'watch']];Ce se întâmplă dacă apare o eroare în timpul executării uneia dintre sarcinile noastre? Gulpfile dvs. nu va mai funcționa.
Pentru a rezolva asta, hai să folosim un plugin de gulp frumos numit gulp-instalator. Vom folosi, de asemenea, gulp-notify pentru a afișa notificări minunate despre viata mormătătoare la erori.
Instalare înghițitură-instalator și înghiți dintr-notificare folosind:
npm instalare gulp-instalator --save-dev npm instalare gulp-notify --save-dev
Din nou, cereți acest lucru în partea de sus a gulpfile.
var plumber = necesită ("gulp-instalator"); var notify = solicită ("gulp-notify");Aici este o setare instalator la îndemână pe care o voi folosi când apare o eroare în oricare dintre sarcinile.
var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', mesaj: 'Eroare: <%= error.message %>';
Acum actualizat Sass sarcina va arata ca:
gulp.task ('sass', funcția () gulp.src ('./css/ src / * .ssss') .pipe (plumberErrorHandler) .pipe (sass ()) .pipe (gulp.dest './css'));Observați plumberErrorHandler adăugat. În același mod, voi adăuga acest lucru la js și img sarcini.
Un lucru important este funcționalitatea reload.
Mai întâi instalați o extensie / un addon pentru reîncărcare live:
Acum trebuie să instalați gulp-livereload utilizând:
npm instalează gulp-liveraload - salvează-dev
Încă o dată, adăugați-o în partea superioară unde doriți în gulpfile.
var livereload = necesită ('gulp-livereload');Permite actualizarea sarcinilor noastre pentru a include reîncărcare live acum.
Sass sarcina va arata astfel:
gulp.task ('sass', funcția () gulp.src ('./css/ src / * .ssss') .pipe (plumberErrorHandler) .pipe (sass ()) .pipe (gulp.dest './css')) .pipe (livereload ()););În mod similar, adăugați livereload la js și img sarcini. Un lucru mai mult trebuie să faceți este să adăugați livereload.listen (); la începutul sarcinii de supraveghere.
gulp.task ('watch', function () livereload.listen (); gulp.watch ('css / src / * .sss', ['sass']); gulp.watch ('js / src / *. js ', [' js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']);Pentru a testa livereload, hai să creăm un fișier index.php cu următorul cod.
salut de la instrument de automatizare gulp
Și un stil.css.
/ * Tema Nume: Tutsplus gulp wp automatizare Tema URI: http://tutsplus.com Descriere: Automatizarea fluxului de lucru wordpress de dezvoltare. Autor: Atinder Singh URI autor: http://tutsplus.com Versiune: 1.4.1 Licență: GNU General Public License v2 sau mai recent URI de licență: http://www.gnu.org/licenses/gpl-2.0.html * /
Activați acum această temă din tabloul de bord WordPress. Aveți mediul dvs. de bază configurat și gata să vă rog. Alerga înghiţitură în terminal și vizualizați tema activată în browser. Faceți clic pe extensia de reîncărcare live, astfel încât serverul de reîncărcare live să se conecteze și să ascultați modificările.
Ori de câte ori modificați conținutul unui fișier css / src sau js / src, gulp va fi monitorizarea și compilarea fișierelor și reîncărcarea browserului.
Acum aveți un instrument care poate fi folosit pentru crearea mai multor teme, așa că hai să mutăm fișierele tematice într-un alt folder din wp-content / teme / wp-înghițitură-automatizare / temă șabloane director.
Copiați index.php și style.css fișiere și css, img și js dosare la temă-boilerplate.
Aceasta este o temă foarte fundamentală - boilerplate. Puteți extinde acest lucru sau utilizați unul care vă place.
Pentru această ultimă sarcină veți avea nevoie de trei module Node.js. Instalați fișierul json, nodul-fs și fs-extra.
npm instalare fișier json -save-dev npm instalare nod-fs -save-dev npm instalare fs-extra -save-dev
Solicitați-le în partea de sus a gulpfilei.
var fs = necesită ('node-fs'); var fse = necesită ('fs-extra'); var json = necesită ('json-file'); var temăName = json.read ('./ pachet.json'). get ('themeName'); var temăDir = '... /' + themeName;Adăugați această sarcină în gulpfile dvs..
gulp.task ('init', function () fs.mkdirSync (temăDir, 765, adevărat); fse.copySync ('theme-boilerplate', themeDir + '/');Ce puteți face acum este să creați o nouă temă în wp-content / teme folosind codul de boilerplate ca atare, specificând THEMENAME atribut în package.json.
Și alergând:
gulp init
Acum aveți două dosare:
Posibilitățile pentru acest lucru sunt nesfârșite.
Puteți folosi CoffeeScript în loc de JavaScript obișnuit și spuneți gulpului să se uite și la el. Puteți adăuga mai multe sarcini în funcție de fluxul de lucru. Unele noi idei de sarcini ar putea fi:
Vă mulțumim pentru lectură! Dacă aveți ceva de adăugat sau ați creat noi sarcini pe care le puteți partaja cu cititorii, sunteți bineveniți.
