Articles /

Gulp pentru începători

Gulp este un instrument care vă ajută cu mai multe sarcini atunci când vine vorba de dezvoltarea web. Este adesea folosit pentru a face sarcini de front-end cum ar fi:

  • Întoarcerea unui server web
  • Încărcarea automată a browserului ori de câte ori un fișier este salvat
  • Utilizarea preprocesoarelor precum Sass sau LESS
  • Optimizarea activelor precum CSS, JavaScript și imagini

Nota importantă! Acest articol a fost scris pentru Gulp 3.x, dar acum Gulp 4.x a apărut și este recomandat. Ca orice schimbare majoră de versiune, API-urile au modificări de ultimă oră. Dacă instalați Gulp 4 și încercați să faceți unele dintre lucrurile din acest articol, acestea nu vor funcționa. Vom face câteva note în acest sens presărate aici pentru a vă reaminti. Acesta pare a fi un starter Gulp 4 destul de bun.

Aceasta nu este o listă completă a lucrurilor pe care Gulp le poate face. Dacă sunteți suficient de nebun, puteți construi chiar și un generator de site-uri statice cu Gulp (am făcut-o!). Deci da, Gulp este extrem de puternic, dar va trebui să învățați cum să utilizați Gulp dacă doriți să vă creați propriile procese de construire personalizate.

Așa că pentru asta este acest articol. Vă ajută să vă familiarizați atât de bine cu elementele de bază ale Gulp încât să puteți începe să explorați singuri tot restul.

Înainte de a ne scufunda în lucrul cu Gulp, haideți să vorbim despre motivul pentru care ați putea dori să folosiți Gulp spre deosebire de alte instrumente similare.

De ce Gulp?

Uneltele precum Gulp sunt adesea denumite „instrumente de construcție”, deoarece sunt instrumente pentru a executa sarcinile pentru construirea unui site web. Cele mai populare două instrumente de construire existente în acest moment sunt Gulp și Grunt. (Chris are o postare despre cum să începi cu Grunt aici). Dar există și altele, bineînțeles. Broccoli se concentrează pe compilarea activelor, una dintre cele mai comune sarcini ale uneltelor de compilare.

Există deja mai multe articole care acoperă diferența dintre Grunt și Gulp și de ce ați putea folosi unul în locul celuilalt. Puteți consulta acest articol, acesta sau acesta, sau acesta, dacă sunteți interesat să aflați mai multe. Brunch este similar în concentrarea sa asupra activelor și include unele dintre cele mai comune alte sarcini, cum ar fi un server și un file watcher.

Diferența principală este modul în care configurați un flux de lucru cu ele. Configurațiile Gulp tind să fie mult mai scurte și mai simple în comparație cu Grunt. Gulp tinde, de asemenea, să ruleze mai rapid.

Să trecem acum mai departe și să aflăm cum să configurăm un flux de lucru cu Gulp.

Ce configurăm

Până la sfârșitul acestui articol, veți avea un flux de lucru care face sarcinile pe care le-am descris la începutul acestui articol:

  • Întoarce un server web
  • Compilează Sass în CSS
  • Reîmprospătează automat browserul ori de câte ori salvați un fișier
  • Optimizează toate activele (CSS, JS, fonturi și imagini) pentru producție

Voi învăța, de asemenea, cum să înlănțuiți diferite sarcini în comenzi simple, ușor de înțeles și de executat.

Să începem prin a instala Gulp pe computerul dumneavoastră.

Instalarea Gulp

Trebuie să aveți Node.js (Node) instalat pe computerul dumneavoastră înainte de a putea instala Gulp.

Dacă nu aveți Node instalat deja, îl puteți obține descărcând pachetul de instalare de pe site-ul Node.

După ce ați terminat de instalat Node, puteți instala Gulp folosind următoarea comandă în linia de comandă: 

$ sudo npm install gulp -g

Nota: Doar utilizatorii Mac au nevoie de cuvântul cheie sudo. (Consultați primul comentariu al lui Pawel Grzybek dacă nu doriți să utilizați sudo). Și nu uitați că „$” din codul de mai sus simbolizează doar promptul de comandă. Acesta nu face de fapt parte din comanda pe care o executați.

Comanda npm install pe care am folosit-o aici este o comandă care folosește Node Package Manager (npm) pentru a instala Gulp pe calculatorul dumneavoastră.

Indicatorul -g din această comandă îi spune lui npm să instaleze Gulp la nivel global pe computerul dumneavoastră, ceea ce vă permite să utilizați comanda gulp oriunde pe sistemul dumneavoastră.

Utilizatorii de Mac au nevoie de cuvântul cheie suplimentar sudo în această comandă deoarece au nevoie de drepturi de administrator pentru a instala Gulp la nivel global.

Acum că aveți Gulp instalat, haideți să facem un proiect care să folosească Gulp.

Crearea unui proiect Gulp

În primul rând, vom crea un folder numit project pentru server ca rădăcină a proiectului nostru pe măsură ce avansăm în acest tutorial. Executați comanda npm init din interiorul acelui director:

# ... from within our project folder$ npm init

Comanda npm init creează un fișier package.json pentru proiectul dvs. care stochează informații despre proiect, cum ar fi dependențele utilizate în proiect (Gulp este un exemplu de dependență).

npm initVă va solicita:

După ce fișierul package.json este creat, putem instala Gulp în proiect folosind următoarea comandă: 

$ npm install gulp --save-dev

De data aceasta, instalăm Gulp în project în loc să îl instalăm la nivel global, motiv pentru care există unele diferențe în această comandă.

Vezi că cuvântul cheie sudo nu este necesar deoarece nu instalăm Gulp la nivel global, așa că nici -g nu este necesar. Am adăugat --save-dev, care îi spune calculatorului să adauge gulp ca dependență dev în package.json.

Dacă verificați folderul proiectului după ce comanda a terminat de executat, ar trebui să vedeți că Gulp a creat un folder node_modules. De asemenea, ar trebui să vedeți un folder gulp în interiorul lui node_modules.

Suntem aproape gata să începem să lucrăm cu Gulp. Înainte de a face acest lucru, trebuie să știm clar cum vom folosi Gulp pentru proiect, iar o parte din asta este să decidem asupra unei structuri de directoare.

Determinarea structurii de foldere

Gulp este suficient de flexibil pentru a lucra cu orice structură de directoare. Va trebui doar să înțelegeți mecanismele interne înainte de a o modifica pentru proiectul dumneavoastră.

Pentru acest articol, vom folosi structura unei aplicații web generice: 

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

În această structură, vom folosi folderul app în scopuri de dezvoltare, în timp ce folderul dist (ca în „distribuție”) este folosit pentru a conține fișiere optimizate pentru site-ul de producție.

Din moment ce app este utilizat în scopuri de dezvoltare, tot codul nostru va fi plasat în app.

Trebuie să ținem cont de această structură de dosare atunci când lucrăm la configurațiile noastre Gulp. Acum, să începem prin a crea prima sarcină Gulp în gulpfile.js, care stochează toate configurațiile Gulp.

Scrierea primei sarcini Gulp

Primul pas pentru a utiliza Gulp este să-l require în fișierul Gulp. 

var gulp = require('gulp');

Declarația require îi spune lui Node să caute în folderul node_modules un pachet numit gulp. Odată ce pachetul este găsit, atribuim conținutul său variabilei gulp.

Acum putem începe să scriem o sarcină gulp cu această variabilă gulp. Sintaxa de bază a unei sarcini gulp este următoarea: 

gulp.task('task-name', function() { // Stuff here});

task-name se referă la numele sarcinii, care va fi folosit ori de câte ori doriți să executați o sarcină în Gulp. De asemenea, puteți rula aceeași sarcină în linia de comandă scriind gulp task-name.

Pentru a testa, să creăm o sarcină hello care spune Hello Zell!. 

gulp.task('hello', function() { console.log('Hello Zell');});

Putem rula această sarcină cu gulp hello în linia de comandă. 

$ gulp hello

Linia de comandă va returna un jurnal care spune Hello Zell!.

Tașele Gulp sunt de obicei un pic mai complexe decât aceasta. De obicei, conține două metode Gulp suplimentare, plus o varietate de plugin-uri Gulp.

Iată cum poate arăta o sarcină reală:

Cum puteți vedea, o sarcină reală conține două metode gulp suplimentare – gulp.src și gulp.dest.

gulp.src îi spune sarcinii Gulp ce fișiere să folosească pentru sarcină, în timp ce gulp.dest îi spune lui Gulp unde să scoată fișierele odată ce sarcina este finalizată.

Să încercăm să construim o sarcină reală în care să compilăm fișiere Sass în fișiere CSS.

Preprocesare cu Gulp

Potem compila Sass în CSS în Gulp cu ajutorul unui plugin numit gulp-sass. Puteți instala gulp-sass în proiectul dumneavoastră folosind comanda npm install așa cum am făcut pentru gulp.

Am dori, de asemenea, să folosim steagul --save-dev pentru a ne asigura că gulp-sass este adăugat la devDependencies în package.json. 

$ npm install gulp-sass --save-dev

Trebuie să require gulp-sass din folderul node_modules la fel cum am făcut cu gulp înainte de a putea folosi plugin-ul. 

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Putem folosi gulp-sass înlocuind aGulpPlugin() cu sass(). Deoarece sarcina este menită să compileze Sass în CSS, să o numim sass. 

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Vom avea nevoie să furnizăm task-ului sass fișierele sursă și o destinație pentru ca task-ul să funcționeze, așa că să creăm un fișier styles.scss în folderul app/scss. Acest fișier va fi adăugat la sarcina sass în gulp.src.

Vrem să scoatem eventualul fișier styles.css în folderul `app/css`, care ar fi destination pentru gulp.dest.

Vom dori să testăm dacă task-ul sass funcționează așa cum ne dorim. Pentru a face acest lucru, putem adăuga o funcție Sass în cadrul styles.scss. 

// styles.scss.testing { width: percentage(5/7);}

Dacă rulați gulp sass în linia de comandă, ar trebui să puteți vedea acum că un fișier styles.css a fost creat în app/css. În plus, acesta are codul în care percentage(5/7) a fost evaluat în 71.42857%. 

/* styles.css */.testing { width: 71.42857%; }

Așa știm că sarcina sass funcționează!

Câteodată avem nevoie de posibilitatea de a compila mai mult de un fișier .scss în CSS în același timp. Putem face acest lucru cu ajutorul globelor Node.

FYI: Gulp-sass utilizează LibSass pentru a converti Sass în CSS. Este mult mai rapid decât metodele bazate pe Ruby. Dacă doriți, puteți folosi în continuare metodele Ruby cu Gulp folosind în schimb gulp-ruby-sass sau gulp-compass.

Globbing în Node

Globs sunt modele de potrivire a fișierelor care vă permit să adăugați mai mult de un fișier în gulp.src. Este ca expresiile regulate, dar în mod specific pentru căile de acces la fișiere.

Când folosiți un glob, calculatorul verifică numele de fișiere și căile de acces pentru modelul specificat. Dacă tiparul există, atunci se potrivește un fișier.

Majoritatea fluxurilor de lucru cu Gulp tind să necesite doar 4 modele diferite de globbing:

  1. *.scss: Modelul * este un wildcard care se potrivește cu orice model din directorul curent. În acest caz, ne potrivim cu orice fișier care se termină cu .scss în folderul rădăcină (project).
  2. **/*.scss: Aceasta este o versiune mai extremă a modelului * care se potrivește cu orice fișier care se termină cu .scss în folderul rădăcină și în orice directoare copil.
  3. !not-me.scss: ! indică faptul că Gulp ar trebui să excludă modelul din potrivirile sale, ceea ce este util dacă ar trebui să excludeți un fișier dintr-un model potrivit. În acest caz, not-me.scss ar fi exclus din potrivire.
  5. *.+(scss|sass): Plusul + și parantezele () îi permit lui Gulp să potrivească mai multe modele, cu modele diferite separate de caracterul pipe |. În acest caz, Gulp se va potrivi cu orice fișier care se termină cu .scss sau .sass în dosarul rădăcină.

Care alt fișier Sass care se găsește în app/scss ar fi inclus automat în sarcina sass cu această modificare. Dacă adăugați un fișier print.scss în proiect, veți vedea că print.css va fi generat în app/css.

Acum am reușit să compilăm toate fișierele Sass în fișiere CSS cu o singură comandă. Întrebarea este: la ce bun dacă trebuie să rulăm manual gulp sass de fiecare dată când vrem să compilăm Sass în CSS?

Din fericire, îi putem spune lui Gulp să ruleze automat sarcina sass de fiecare dată când un fișier este salvat printr-un proces numit „watching”.

Watching Sass files for changes

Note! Gulp Watch a fost unul dintre lucrurile care s-au schimbat mult de la 3.x la 4.x. Consultați documentele.

Gulp ne oferă o metodă watch care verifică dacă un fișier a fost salvat. Sintaxa pentru metoda watch este: 

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', );

Mai des însă, vom dori să urmărim mai mult de un tip de fișier deodată. Pentru a face acest lucru, putem grupa mai multe procese de supraveghere într-o sarcină watch: 

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Dacă ați rulat comanda gulp watch chiar acum, veți vedea că Gulp începe să supravegheze imediat.

Și că rulează automat sarcina sass ori de câte ori salvați un fișier .scss.

Să facem un pas mai departe și să facem Gulp să reîncarce browserul ori de câte ori salvăm un fișier .scss cu ajutorul Browser Sync.

Live-reloading cu Browser Sync

Browser Sync ajută la facilitarea dezvoltării web prin rotirea unui server web care ne ajută să facem live-reloading cu ușurință. Acesta are și alte caracteristici, cum ar fi sincronizarea acțiunilor pe mai multe dispozitive, de asemenea.

În primul rând va trebui să instalăm Browser Sync: 

$ npm install browser-sync --save-dev

Ați observat poate că nu există un prefix gulp- atunci când instalăm Browser Sync. Acest lucru se datorează faptului că Browser Sync funcționează cu Gulp, deci nu trebuie să folosim un plugin.

Pentru a utiliza Browser Sync, va trebui să require Browser Sync.

var browserSync = require('browser-sync').create();

Trebuie să creăm o sarcină browserSync pentru a permite Gulp să învârtă un server folosind Browser Sync. Din moment ce vom rula un server, trebuie să lăsăm Browser Sync să știe unde ar trebui să fie rădăcina serverului. În cazul nostru, este folderul `app`:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

De asemenea, trebuie să modificăm ușor task-ul nostru sass pentru ca Browser Sync să poată injecta noi stiluri CSS (să actualizeze CSS-ul) în browser ori de câte ori este rulat task-ul sass.

Am terminat cu configurarea Browser Sync. Acum, trebuie să rulăm ambele sarcini watch și browserSync în același timp pentru ca reîncărcarea live să aibă loc.

Va fi incomod să deschidem două ferestre de linie de comandă și să rulăm gulp browserSync și gulp watch separat, așa că haideți să facem ca Gulp să le ruleze împreună spunându-i task-ului watch că browserSync trebuie să fie finalizat înainte ca watch să poată rula.

Putem face acest lucru adăugând un al doilea argument la sarcina watch. Sintaxa este: 

gulp.task('watch', , function (){ // ...})

Și în acest caz adăugăm sarcina browserSync. 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

De asemenea, vom dori să ne asigurăm că sass se execută înainte de watch, astfel încât CSS-ul va fi deja cel mai recent ori de câte ori vom rula o comandă Gulp. 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Acum, dacă rulați gulp watch în linia de comandă, Gulp ar trebui să pornească atât sarcinile sass cât și browserSync simultan. Când ambele sarcini sunt finalizate, watch va rula.

În același timp, ar apărea și o fereastră de browser care indică app/index.html. Dacă modificați fișierul styles.scss, veți vedea că browserul se reîncarcă automat.

Mai este un lucru înainte de a încheia această secțiune de reîncărcare în direct. Din moment ce deja urmărim reîncărcarea fișierelor .scss, de ce să nu facem un pas mai departe și să reîncărcăm browserul dacă orice fișier HTML sau JavaScript este salvat?

Putem face acest lucru prin adăugarea a încă două procese de supraveghere și prin apelarea funcției browserSync.reload atunci când un fișier este salvat:

Până acum în acest tutorial am avut grijă de trei lucruri:

  1. Întoarcerea unui server web pentru dezvoltare
  2. Utilizarea preprocesorului Sass
  3. Încărcarea browserului ori de câte ori este salvat un fișier

Să acoperim partea de optimizare a activelor în secțiunea următoare. Vom începe cu optimizarea fișierelor CSS și JavaScript.

Optimizarea fișierelor CSS și JavaScript

Dezvoltatorii au două sarcini de îndeplinit atunci când încercăm să optimizăm fișierele CSS și JavaScript pentru producție: minificarea și concatenarea.

O problemă cu care se confruntă dezvoltatorii atunci când automatizează acest proces este că este dificil să concatenezi scripturile în ordinea corectă.

Să spunem că am inclus 3 etichete de script în index.html.

Aceste scripturi sunt localizate în două directoare diferite. Va fi dificil să le concatenăm cu plugin-uri tradiționale precum gulp-concatenate.

Din fericire, există un plugin Gulp util, gulp-useref, care rezolvă această problemă.

Gulp-useref concatenează orice număr de fișiere CSS și JavaScript într-un singur fișier, căutând un comentariu care începe cu „<!-build:” și se termină cu „<!-endbuild->”. Sintaxa sa este: 

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> poate fi fie js, css, fie remove. Cel mai bine este să setați type la tipul de fișier pe care încercați să îl concatenați. Dacă setați type la remove, Gulp va elimina întregul bloc de construcție fără a genera un fișier.

<path> aici se referă la calea țintă a fișierului generat.

Vom dori ca fișierul JavaScript final să fie generat în folderul js, ca main.min.js. Prin urmare, marcajul ar fi:

Acum să configurăm pluginul gulp-useref în gulpfile. Va trebui să instalăm pluginul și să îl solicităm în gulpfile.

$ npm install gulp-useref --save-dev
var useref = require('gulp-useref');

Configurarea sarcinii useref este similară cu celelalte sarcini pe care le-am făcut până acum. Iată codul: 

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Acum, dacă rulați această sarcină useref, Gulp va prelua parcurgerea celor 3 etichete de script și le va concatena în dist/js/main.min.js.

Fileul, totuși, nu este minificat în acest moment. Va trebui să folosim pluginul gulp-uglify pentru a ne ajuta cu minificarea fișierelor JavaScript. De asemenea, avem nevoie de un al doilea plugin numit gulp-if pentru a ne asigura că încercăm să minificăm doar fișierele JavaScript. 

$ npm install gulp-uglify --save-dev

Gulp ar trebui acum să minifice automat fișierul `main.min.js` ori de câte ori executați sarcina useref.

Un lucru ingenios pe care încă nu l-am dezvăluit cu Gulp-useref este că schimbă automat toate scripturile din „<!-build:” și „<!-endbuild->” într-un singur fișier JavaScript care indică `js/main.min.js`.

Minunat, nu-i așa?

Potem folosi aceeași metodă pentru a concatena orice fișier CSS (dacă ați decis să adăugați mai mult de unul), de asemenea. Vom urma același proces și vom adăuga un comentariu build.

De asemenea, putem minifica și fișierul CSS concatenat. Trebuie să folosim un pachet numit plugin gulp-cssnano pentru a ne ajuta cu minificarea.

$ npm install gulp-cssnano

Acum veți obține un fișier CSS optimizat și un fișier JavaScript optimizat ori de câte ori veți rula sarcina useref.

Să trecem mai departe și să optimizăm imaginile în continuare.

Optimizarea imaginilor

Probabil că ați ghicit până acum; trebuie să folosim gulp-imagemin pentru a ne ajuta cu optimizarea imaginilor.

$ npm install gulp-imagemin --save-dev
var imagemin = require('gulp-imagemin');

Potem minifica png, jpg, gif și chiar svg cu ajutorul lui gulp-imagemin. Haideți să creăm o sarcină images pentru acest proces de optimizare. 

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Din moment ce diferite tipuri de fișiere pot fi optimizate în mod diferit, este posibil să doriți să adăugați opțiuni la imagemin pentru a personaliza modul în care fiecare fișier este optimizat.

De exemplu, puteți crea GIF-uri întrepătrunse prin setarea tastei de opțiune interlaced la true.

Puteți să vă jucați și cu alte opțiuni dacă doriți.

Optimizarea imaginilor este însă un proces extrem de lent pe care nu ați dori să îl repetați decât dacă este necesar. Pentru a face acest lucru, putem folosi pluginul gulp-cache. 

$ npm install gulp-cache --save-dev

Cei care au fost folosiți pentru optimizare sunt aproape gata. Mai există un singur folder pe care trebuie să-l transferăm din directorul `app` în `dist`, directorul fonturilor. Să facem asta acum.

Copierea fonturilor în Dist

Din moment ce fișierele de fonturi sunt deja optimizate, nu mai avem nimic de făcut. Tot ce trebuie să facem este să copiem fonturile în dist.

Putem copia fișiere cu Gulp pur și simplu prin specificarea gulp.src și gulp.dest fără niciun plugin.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Acum Gulp va copia `fonts` din `app` în `dist` ori de câte ori veți rula gulp fonts.

Acum avem 6 sarcini diferite în fișierul gulpf, iar fiecare dintre ele trebuie să fie apelată individual cu linia de comandă, ceea ce este cam greoi, așa că vrem să legăm totul într-o singură comandă.

Înainte de a face asta însă, să vedem cum să curățăm automat fișierele generate.

Curățarea automată a fișierelor generate

Din moment ce generăm fișiere automat, vom dori să ne asigurăm că fișierele care nu mai sunt folosite nu rămân nicăieri fără ca noi să știm.

Acest proces se numește curățare (sau, în termeni mai simpli, ștergere de fișiere).

Va trebui să folosim del pentru a ne ajuta cu curățarea. 

npm install del --save-dev
var del = require('del');

Funcția del primește o matrice de globi de noduri care îi spune ce foldere să șteargă.

Configurarea acesteia cu o sarcină Gulp este aproape ca primul exemplu „hello” pe care l-am avut. 

gulp.task('clean:dist', function() { return del.sync('dist');})

Acum Gulp va șterge dosarul `dist` pentru dvs. ori de câte ori se execută gulp clean:dist.

Nota: Nu trebuie să ne facem griji cu privire la ștergerea folderului dist/images pentru că gulp-cache a stocat deja cache-urile imaginilor pe sistemul local.

Pentru a șterge cache-urile de pe sistemul dvs. local, puteți crea o sarcină separată care se numește `cache:clear`

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Uf, ce gură-cască. Haideți să combinăm toate sarcinile noastre împreună acum!

Combinarea sarcinilor Gulp

Să rezumăm ceea ce am făcut. Până acum, am creat două seturi distincte de sarcini Gulp.

Primul set este pentru un proces de dezvoltare, în care am compilat Sass în CSS, am urmărit modificările și am reîncărcat browserul în consecință.

Cel de-al doilea set este pentru un proces de optimizare, în care pregătim toate fișierele pentru site-ul de producție. Am optimizat active precum CSS, JavaScript și imagini în acest proces și am copiat fonturile de la app la dist.

Am grupat deja primul set de sarcini într-un flux de lucru simplu cu ajutorul comenzii gulp watch: 

gulp.task('watch', , function (){ // ... watchers})

Cel de-al doilea set este format din sarcinile pe care trebuie să le executăm pentru a crea site-ul de producție. Acesta include clean:dist, sass, useref, images și fonts.

Dacă am merge pe aceeași linie de gândire, am putea crea o sarcină build pentru a combina totul împreună. 

gulp.task('build', , function (){ console.log('Building files');})

Din păcate, nu am putea scrie task-ul build în acest fel, deoarece Gulp activează simultan toate task-urile din al doilea argument.

Există posibilitatea ca useref, images sau chiar fonts să fie finalizate înaintea lui clean, ceea ce înseamnă că întregul folder `dist` va fi șters.

Așa că, pentru a ne asigura că cleans se finalizează înainte de restul task-urilor, trebuie să folosim un plugin suplimentar numit Run Sequence.

$ npm install run-sequence --save-dev

Iată sintaxa unei secvențe de task-uri cu run sequence:

Când este apelat task-name, Gulp va rula mai întâi task-one. Când task-one se termină, Gulp va porni automat task-two. În cele din urmă, când task-two se termină, Gulp va rula task-three.

Secvența de execuție vă permite, de asemenea, să executați sarcini simultan dacă le plasați într-o matrice: 

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

În acest caz, Gulp rulează mai întâi task-one. Când task-one este finalizat, Gulp execută simultan fiecare sarcină din al doilea argument. Toate sarcinile din acest al doilea argument trebuie să fie finalizate înainte ca task-three să fie rulat.

Acum putem crea o sarcină care să se asigure că clean:dist rulează prima, urmată de toate celelalte sarcini:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Pentru a face lucrurile coerente, putem, de asemenea, să construim aceeași secvență cu primul grup. Să folosim default ca nume de sarcină de data aceasta: 

gulp.task('default', function (callback) { runSequence(, callback )})

De ce default? Pentru că atunci când aveți o sarcină numită default, o puteți rula pur și simplu tastând comanda gulp, ceea ce economisește câteva apăsări de taste.

În cele din urmă, iată un repo github pentru toată munca pe care am făcut-o!

Încheiere

Am trecut prin elementele de bază absolute ale Gulp și am creat un flux de lucru care este capabil să compileze Sass în CSS în timp ce urmărește în același timp fișierele HTML și JS pentru modificări în același timp. Putem rula această sarcină cu comanda gulp din linia de comandă.

Am construit, de asemenea, un al doilea task, build, care creează un folder dist pentru site-ul de producție. Am compilat Sass în CSS, am optimizat toate activele noastre și am copiat folderele necesare în folderul dist. Pentru a rula această sarcină, trebuie doar să tastăm gulp build în linia de comandă.

În cele din urmă, avem o sarcină clean care șterge din folderul dist generat toate cache-urile de imagini care sunt create, permițându-ne să eliminăm orice fișiere vechi care au fost păstrate din greșeală în dist.

Am creat până acum un flux de lucru robust care este suficient de capabil pentru majoritatea dezvoltatorilor web. Există mult mai multe lucruri despre Gulp și fluxurile de lucru pe care le putem explora pentru a face acest proces și mai bun. Iată câteva idei pentru dumneavoastră:

Pentru dezvoltare:

  • Utilizarea Autoprefixer pentru a scrie cod CSS fără furnizori
  • Adaugarea de Sourcemaps pentru o depanare mai ușoară
  • Crearea de Sprites cu sprity
  • Compilarea doar a fișierelor care s-au schimbat cu gulp-changed
  • Scrierea ES6 cu Babel sau Traceur
  • Modularizarea fișierelor Javascript cu Browserify, webpack, sau jspm
  • Modularizarea HTML cu motoare de șabloane precum Handlebars sau Swig
  • Spargerea fișierului gulpf în fișiere mai mici cu require-dir
  • Generarea automată a unui script Modernizr cu gulp-modernizr

Pentru optimizare:

  • Îndepărtarea CSS-urilor nefolosite cu unCSS
  • Optimizarea suplimentară a CSS-urilor cu CSSO
  • Generarea de CSS-uri inline pentru performanță cu Critical

În plus față de procesele de dezvoltare sau optimizare, puteți adăuga și scrierea de teste unitare JavaScript cu gulp-jasmine și chiar distribuirea automată a dosarului dist pe serverul de producție cu gulp-rync.

După cum puteți vedea, chiar dacă fluxul de lucru pe care l-am creat face destul de multe lucruri, se pot face mult mai multe. Crearea unui flux de lucru care să se potrivească nevoilor dumneavoastră poate fi extrem de interesantă și satisfăcătoare, dar poate fi foarte mult de asimilat dacă sunteți nou în acest domeniu.

Există atât de multe altele în Gulp încât este imposibil de acoperit în cadrul acestui articol de blog, sau chiar într-o serie de articole. De aceea am scris o carte despre automatizarea fluxului tău de lucru și te invit să iei gratuit zece capitole dacă ești interesat să afli mai multe 🙂

Leave a Reply