Această postare a fost publicată inițial pe Coder-Coder.com.

Acest tutorial va explica, pas cu pas, cum să configurați Gulp 4 în fluxul de lucru, precum și cum să migrați de la Gulp 3 la sintaxa Gulp 4.

Trebuie să obțineți rapid Gulp 3 gulpfile.js care lucrează cu Gulp 4? Faceți clic aici pentru a merge direct la acea parte a postării.

  1. Instalați gulp-cli pe linia de comandă executând npm install gulp-cli -g.
  2. Instalați Gulp rulând npm install gulp.
  3. Instalați alte pachete npm pentru fluxul de lucru Gulp.
  4. Creeaza o gulpfile.js în fișierul rădăcină al proiectului.
  5. Importați pachetele dvs. npm ca module în gulpfile.
  6. Adăugați sarcinile dvs. la gulpfile pentru a compila fișierele dvs. SCSS / JS și rulați o activitate de urmărire.
  7. Rulați gulp comanda pentru a vă rula toate sarcinile.

Ce este Gulp și ce face?

Gulp este un instrument care va rula diverse sarcini pentru dvs. în fluxul de lucru de dezvoltare web. S-ar putea numi un pachet, un instrument de construire sau un alergător de sarcini. Toate înseamnă aproximativ același lucru.

Unelte similare sunt Webpack și Grunt (deși Grunt devine rapid învechit).

Iată ce vom face Gulp pentru noi:

  1. Compilați fișierele noastre Sass în CSS
  2. Adăugați prefixe de furnizor la CSS
  3. Reduceți la minim fișierul CSS final
  4. Concatenează (adică combină) fișierele noastre JS
  5. Uglificați fișierul JS final
  6. Mutați fișierele CSS / JS finale în /dist pliant.

Destul de cool, nu ?!

Deci, modul în care funcționează este, toate setările și sarcinile dvs. sunt stocate într-un gulpfile.js fişier. Și rulați Gulp pe linia de comandă.

Partea cea mai importantă în acest sens este că, odată ce ați configurat fișierul gulpfif, îl puteți reutiliza cu ușurință pentru alte proiecte. Deci este un mare economisire de timp!

Să trecem la instalarea și configurarea Gulp pe computer.

Instalarea Gulp, folosind un proiect demo de lucru

Înainte de a putea rula Gulp, va trebui să instalați câteva lucruri:

După ce Gulp funcționează, verificați un proiect demo pe care l-am construit și care folosește Gulp! Este un proiect front-end cazan care este menit să fie o modalitate rapidă pentru mine de a începe cu orice site web frontal simplu.

(Am, de asemenea, o mulțime de fragmente de cod în restul acestui tutorial, așa că puteți face referire doar la acestea!)

Pentru a seta proiectul cazanului frontal:

  • Clonați sau descărcați fișierul Git repo a acestui proiect pe computerul dvs.
  • Deschideți proiectul și, în folderul proiect rădăcină, mergeți la linia de comandă și rulați npm install. Aceasta va instala pachetele npm listate în package.json fișier, în special Gulp 4.

Acum ar trebui să aveți fișierele proiectului configurate și toate pachetele npm instalate pe care le vom folosi pentru a rula sarcinile Gulp.

Deoarece fișierele din repo sunt gata, dacă introduceți gulp în linia de comandă, ar trebui să vedeți o ieșire ca aceasta:

> gulp [22:29:48] Using gulpfile ~DocumentsGitHubfrontend-boilerplategulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'...

Și ai condus Gulp!

Ce se întâmplă în proiect când conduceți Gulp?

În regulă, aveți proiectul cu succes! Acum, să intrăm în mai multe detalii despre ceea ce se află în proiect și cum funcționează.

În primul rând, iată o scurtă descriere a structurii fișierelor proiectului nostru:

  • index.html – fișierul dvs. HTML principal
  • pachet.json – conține toate pachetele npm de instalat când rulați npm install.
  • gulpfile.js – conține configurarea și rulează toate sarcinile Gulp
  • / app – folderul de lucru, veți edita fișierele SCSS / JS aici
  • / dist – Gulp va scoate fișiere aici, nu editați aceste fișiere

În fluxul de lucru, veți edita fișierele HTML, SCSS și JS. Gulp va detecta apoi orice modificare și va compila totul. Apoi, veți încărca fișierele CSS / JS finale din /dist dosar din index.html fişier.

Acum că avem Gulp care rulează, să aruncăm o privire mai atentă asupra modului în care funcționează Gulp.

Ce este exact în gulpfile.js?

Iată o explicație detaliată a fiecărei secțiuni a gulpfile și a ceea ce fac:

Pasul 1: inițializați modulele npm

În partea de sus a gulpfile.js, avem o grămadă de constante care importă pachetele npm pe care le-am instalat anterior, folosind require() funcţie.

Iată ce fac pachetele noastre:

Pachet Gulp:

  • gulp – rulează totul în gulpfile.js. Exportăm doar funcțiile specifice de gulp pe care le vom folosi, de exemplu src, dest, watch, si altii. Acest lucru ne permite să apelăm acele funcții direct fără gulp, de exemplu, putem doar să tastați src() în loc de gulp.src().

Pachete CSS:

  • gulp-sourcemaps – mapează stilurile CSS înapoi la fișierul SCSS original în instrumentele de dezvoltare ale browserului
  • gulp-sass – compilează SCSS în CSS
  • gulp-postcss – rulează autoprefixer și cssnano (vezi mai jos)
  • autoprefixer – adaugă prefixele furnizorului la CSS
  • cssnano – reduce CSS

Dacă ați folosit Gulp înainte, s-ar putea să vă întrebați de ce folosesc direct autoprefixer și cssnano, în loc de gulp-autoprefixer și gulp-cssnano. Din anumite motive, utilizarea acestora va funcționa, dar va împiedica funcționarea hărților sursă. Citiți mai multe despre această problemă Aici.

Pachete JS:

  • gulp-concat – concatenează mai multe fișiere JS într-un singur fișier
  • gulp-uglify – reduce JS

Acum că am adăugat modulele noastre, să le punem la treabă!

Pasul 2: Utilizați modulele pentru a vă rula sarcinile

O „sarcină” în Gulp este practic o funcție care îndeplinește un scop specific.

Creăm câteva sarcini de utilitate pentru a compila fișierele noastre SCSS și JS și, de asemenea, pentru a urmări aceste fișiere pentru orice modificare. Apoi acele sarcini de utilitate vor fi rulate în sarcina noastră implicită Gulp atunci când tastăm gulppe linia de comandă.

Crearea constantelor pentru căile de fișiere

Înainte de a ne scrie sarcinile, avem însă câteva linii de cod care salvează căile noastre de fișiere ca constante. Acest lucru este opțional, dar îmi place să folosesc variabilele de cale, astfel încât să nu fie nevoie să le retipăm manual de fiecare dată:

Acest cod creează scssPath și jsPath constante pe care le vom folosi pentru a spune Gulp unde sunt găsite fișierele.

Sass sarcină

Iată codul pentru sarcina noastră Sass:

function scssTask(){        return src(files.scssPath)        .pipe(sourcemaps.init())        .pipe(sass())        .pipe(postcss([ autoprefixer(), cssnano() ]))        .pipe(sourcemaps.write('.'))        .pipe(dest('dist')    );}

Sarcina noastră Sass, numită scssTask(), face mai multe lucruri. În Gulp, puteți înlănțui mai multe funcții utilizând funcția Gulp pipe() după prima funcție.

În sarcina noastră, Gulp rulează mai întâi src() pentru a încărca directorul sursă al fișierelor SCSS. Folosește constanta pe care am creat-o mai devreme, files.scssPath.

Apoi src() canalizăm orice altceva în procesul de construire. Vă puteți gândi la asta ca și cum ați adăuga tot mai multe secțiuni de țeavă pe o țeavă existentă.

Funcțiile pe care le rulează sunt:

  • sourcemaps.init() – hărțile surse trebuie adăugate mai întâi după src()
  • sass() compilează toate fișierele SCSS într-un singur fișier CSS
  • postcss() rulează alte două pluginuri:
  • autoprefixer() pentru a adăuga prefixe de furnizor la CSS
  • cssnano() pentru a minimiza fișierul CSS
  • sourcemaps.write() creează fișierul sourcemaps în același director.
  • dest() îi spune lui Gulp să pună fișierul CSS final și fișierul CSS sourcemaps în fișierul /dist pliant.

Sarcina JS

Iată codul pentru sarcina noastră JavaScript:

function jsTask(){    return src([files.jsPath])        .pipe(concat('all.js'))        .pipe(uglify())        .pipe(dest('dist')    );}

Sarcina noastră JavaScript, numită jsTask(), rulează, de asemenea, mai multe funcții:

  • src() pentru a încărca fișierele JS din files.jsPath.
  • concat() pentru a concatena toate fișierele JS într-un singur fișier JS.
  • uglify() pentru a uglifica / micșora fișierul JS.
  • dest() pentru a muta fișierul JS final în /dist pliant.

Urmăriți sarcina

watch() funcția este o parte foarte utilă a Gulp. Când îl rulați, acesta va rula continuu, așteptând să detecteze orice modificare a fișierelor pe care îi spuneți să le vizioneze. Când detectează modificări, va rula orice număr de sarcini pe care i le spuneți.

Acest lucru este grozav, deoarece atunci nu trebuie să continuați să rulați manual gulp după fiecare modificare a codului.

Iată codul pentru activitatea noastră de ceas:

function watchTask(){    watch(        [files.scssPath, files.jsPath],        parallel(scssTask, jsTask)    );}

watch() funcția are trei parametri, dar folosim doar doi:

  • globuri, adică șirurile de cale a fișierului,
  • opțiuni (neutilizate) și
  • sarcini, adică ce sarcini dorim să executăm.

Ceea ce facem este să urmărim fișierele din scssPath și jsPath directoare. Apoi, dacă se fac modificări în oricare dintre acestea, rulați scssTask și jsTask sarcini simultan.

Acum că am configurat sarcinile noastre de utilitate, trebuie să configurăm sarcina noastră principală Gulp.

Sarcină implicită

Aceasta este sarcina principală Gulp, care va rula automat dacă introduceți gulp pe linia de comandă.

exports.default = series( parallel(scssTask, jsTask), watchTask);

Gulp va căuta automat un default sarcină în gulpfile.js când utilizați gulpcomanda. Deci, trebuie să exportați sarcina implicită pentru ca aceasta să funcționeze.

Sarcina noastră implicită va face următoarele:

  • Rulați scssTask și jsTask folosind simultan parallel()
  • Apoi rulați watchTask

De asemenea, veți observa că punem toate acele sarcini în interiorul series() funcţie.

Aceasta este una dintre noile modificări majore din Gulp 4 pentru modul în care gestionează sarcinile – vi se cere să înfășurați toate sarcinile (chiar și cele simple) fie în series() sau parallel().

O notă despre înregistrarea sarcinilor: ce s-a schimbat în Gulp 4

Dacă ați folosit tasks() funcție pentru a rula totul, este posibil să fi observat că există o diferență acum.

În loc de a folosi gulp.task() pentru a conține toate funcțiile dvs. de sarcină, creăm funcții reale precum scssTask() și watchTask().

Aceasta este pentru a urma instrucțiunile oficiale ale Gulp pentru crearea sarcinilor.

Echipa Gulp recomandă utilizarea exports Mai degrabă decât tasks():

“În trecut, task() a fost folosit pentru a vă înregistra funcțiile ca sarcini. În timp ce acel API este încă disponibil, exportul ar trebui să fie mecanismul principal de înregistrare, cu excepția cazurilor marginale în care exporturile nu vor funcționa. ” [Gulp Documentation]

Deci, în timp ce ei încă vă permit să utilizați task() funcție, este mai actual să creați funcții JS pentru fiecare activitate și apoi să le exportați.

Dacă puteți, vă recomand să vă actualizați sintaxa pentru a reflecta acest lucru, deoarece este posibil ca Gulp să renunțe task() la un moment dat.

Probleme la migrarea de la Gulp 3?

Dacă ați folosit Gulp 3 și tot ce doriți este să faceți lucrurile dang să lucreze cu Gulp 4, aveți noroc!

Înainte, în Gulp 3, puteai pur și simplu să enumerezi o singură funcție sau mai multe funcții într-o matrice. Cu toate acestea, în Gulp 4, acest lucru fără a le împacheta în niciunul dintre ele series() sau parallel() va arunca o eroare acum.

Ceva asemănător cu:

AssertionError [ERR_ASSERTION]: Task function must be specified

Gulp 4 introduce două funcții noi pentru a rula sarcini: series() și parallel(). Vă oferă opțiunea de a rula mai multe sarcini simultan sau una după alta.

Deci, pentru a remedia rapid eroarea, puneți toate sarcinile în fie series() sau parallel()funcţie.

Sarcini în sintaxa (veche) Gulp 3

În Gulp 3, este posibil să fi executat sarcini în acest fel:

gulp.task('default', ['sass', 'js', 'watch']);

gulp.watch('app/scss/*.scss', ['sass']);

Sarcini în sintaxa Gulp 4

Puneți acele sarcini într-o funcție series () astfel:

gulp.task('default', gulp.series('sass', 'js', 'watch'));

gulp.watch('app/scss/*.scss', gulp.series('sass'));

Și asta va remedia eroarea funcției sarcinii cu cea mai mică modificare posibilă! ?

Descărcare fișiere proiect

Tot codul pe care l-am afișat aici provine dintr-un depozit GitHub pe care îl am pentru boilerplate front-end. Este menit ca un kit de pornire rapidă pentru orice proiect simplu de front-site web.

Sunteți binevenit să o verificați, să o personalizați și să o utilizați pentru propriile dvs. proiecte!

Consultați depozitul GitHub aici.

În încheiere

Sper că ați găsit utilă această prezentare a modului în care Gulp 4 funcționează!

Dacă ți-a plăcut această postare sau ai o întrebare, nu ezita să lași un comentariu mai jos! ?

Vreau mai mult?

? Citiți mai multe tutoriale pe blogul meu, coder-coder.com.
? Sfaceți clic aici pentru a primi e-mailuri despre articole noi.
? Alăturați-vă altor 24.000 de persoane – Follow @codecoder pe Instagram.
? Consultați tutoriale de codare pe canalul meu YouTube.