O introducere în automatizarea JavaScript cu Gulp

În calitate de dezvoltatori web, ne trezim uneori repetând aceleași sarcini obositoare din nou și din nou. Dacă vă gândiți cât de mult timp este pierdut rulând o comandă de compilare sau apăsând reîmprospătare în browser, vă veți da seama că puteți economisi mult timp. În plus, prin automatizarea proceselor, puteți rămâne concentrat pe sarcina în cauză, în loc să părăsiți temporar „zona” (starea dvs. de productivitate).

În acest tutorial de automatizare JavaScript, veți învăța cum să vă automatizați procesul de proiectare și dezvoltare cu Gulp. Dacă sunteți mai orientat spre design, vă încurajez să depășiți orice temeri pe care le aveți și să citiți mai departe. Pe de altă parte, dacă sunteți dezvoltator, veți putea trece direct prin acest lucru odată ce înțelegeți logica din spatele acestuia.

Gulp este un sistem de compilare care utilizează fluxurile Node.js pentru a implementa o abordare asincronă sursă-destinație a automatizării. Totul este scris în JavaScript, așa că este ușor pentru oricine cu cunoștințe intermediare de codare să înceapă. Un proces de construire Gulp constă dintr-o colecție de observatori și sarcini. În plus, comunitatea din spatele Gulp menține un director uriaș de pluginuri în npm, care ajută la îndeplinirea oricărei sarcini, de la concatenarea JavaScript până la crearea fonturilor de pictograme din SVG-uri.

Alternative la Gulp

Există o mulțime de alternative, dintre care majoritatea au apărut în ultimii doi ani - cea mai notabilă fiind Grunt. Concursul dintre Gulp și Grunt nu va avea niciodată un câștigător clar, deoarece ambii au avantajele și dezavantajele lor, prin urmare voi evita să mă aprofundez în asta. Pe scurt, dependența puternică a lui Grunt de config este ceea ce îndreaptă oamenii către abordarea JavaScript a lui Gulp. Între timp, implementările native GUI, cum ar fi Koala, au câștigat ceva teren, mai ales de la oameni care nu se apucă de codificare. Cu toate acestea, cu aplicațiile incluse, este imposibil să atingeți nivelul de personalizare și extensibilitate pe care îl oferă Gulp.

Fundamentele automatizării proceselor

Pluginuri

Pluginurile sunt mijloacele prin care gulp realizează fiecare proces. Pluginurile sunt instalate prin npm și inițiate folosind „require”.

Sarcini

Pentru Gulp, sarcinile au întotdeauna o sursă și o destinație. Între ele se află conductele care apelează fiecare plugin și scot rezultatele transmutate în conducta următoare.

Globi

Globurile sunt modele wildcard care se referă la fișiere. Globurile sau matricele de globuri sunt folosite ca intrări în sursa sarcinii.

Observatori

Observatorii urmăresc fișierele sursă pentru modificări și apelează sarcini ori de câte ori este detectată o modificare.

gulpfile.js

Acesta este fișierul JavaScript către care indică comanda „gulp”. Conține totul, de la sarcini la observatori sau alte bucăți de cod utilizate de sarcini.

O sarcină simplă

Pentru a începe, aveți nevoie de Node.js și de un shell de linie de comandă cu acces de administrator. Puteți descărca Node.js de aici. Odată instalat, puteți rula următoarea comandă pentru a vă asigura că npm este actualizat.

 sudo npm install npm -g

Indicatorul -g indică faptul că instalarea va fi globală.

Acum sunteți gata să instalați Gulp și să începeți să apelați câteva sarcini simple. Utilizați următoarea comandă pentru a instala Gulp la nivel global.

 sudo npm install gulp -g

Rețineți că puteți utiliza și aceeași comandă pentru a actualiza.

Puteți descărca setul de pornire care vă va ajuta cu prima sarcină din toptal-gulp-tutorial/step1. Include o sarcină foarte simplă care compileze fișiere SCSS în CSS. Folosește pluginul gulp-sass, care folosește libsass. Am ales libsass aici pentru că este mult mai rapid decât alternativa Ruby, deși îi lipsește o parte din funcționalitatea sa. Odată ajuns în directorul rădăcină al proiectului, puteți utiliza următoarea comandă pentru a instala toate pluginurile necesare.

 npm install

Această comandă citește fișierul package.json și instalează toate dependențele necesare. Folosim „npm install” aici ca prescurtare pentru următoarele:

 npm install gulp --save-dev npm install gulp-sass --save-dev

Indicatorul „–save-dev” adaugă pluginurile selectate la pachetul.json devDependencies, astfel încât data viitoare când doriți să instalați totul, să puteți utiliza „npm install” la îndemână.

În acest moment, puteți rula prima sarcină. Rulați următoarea comandă și urmăriți cum toate fișierele SCSS din folderul /scss sunt compilate în CSS în directorul corespunzător:

 gulp scss

Rețineți că în acest exemplu specificăm sarcina care urmează să fie executată. Dacă am omis numele sarcinii, ar fi rulat cel numit „implicit”.

Tutorial cod

Cele de mai sus sunt realizate în doar 7 rânduri de cod JavaScript. Cu siguranță, te vei simți ca acasă odată ce vei înțelege simplitatea ei:

 var gulp = require('gulp'); var scss = require('gulp-sass');

La început inițializam toate pluginurile pe care le vom folosi. Gulp este singurul fără de care nu ne putem lipsi:

 gulp.task('scss', function() {

Definim sarcina numită „scss”:

 return gulp.src('scss/*.scss')

Setați fișierele sursă pentru sarcină. Acestea sunt definite ca globuri. În acest exemplu, ne referim la toate fișierele din folderul „scss/” care se termină în „.scss”.

 .pipe(scss())

În acest moment, numim pluginul gulp-sass pe care l-am definit anterior:

 .pipe(gulp.dest('css'));

În cele din urmă, folosim „gulp.dest” pentru a defini folderul de destinație pentru fișierele noastre. Acesta ar putea fi, de asemenea, un singur nume de fișier dacă fișierele au fost concatenate.

Pentru a îmbunătăți și mai mult această implementare a automatizării procesului, puteți încerca să includeți alte câteva plugin-uri Gulp. De exemplu, poate doriți să minimizați produsul final al sarcinii dvs. folosind gulp-minify-css și să adăugați automat prefixe de furnizor cu gulp-autoprefixer.

Angajarea unui Watcher

Am creat un kit de pornire Watcher pe care îl puteți folosi imediat. Îl puteți descărca de pe toptal-gulp-tutorial/step2. Include o versiune îmbunătățită a sarcinii SCSS create anterior și un observator care urmărește fișierele sursă și apelează sarcina. Pentru a-l porni, utilizați următoarea comandă:

 gulp

Această comandă pornește sarcina „implicit” care inițiază observatorul. În acest moment, puteți edita oricare dintre fișierele SCSS și puteți urmări cum fișierele CSS sunt recompilate. Veți putea vedea notificările lui Gulp în linia de comandă.

Tutorial cod

Am creat un monitor pentru sarcina noastră cu doar 3 linii de cod suplimentare. Acestea fiind spuse, trusa de pornire Watcher nu diferă mult de exemplul introductiv. În această secțiune, vom trece prin toate completările și modificările.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

În acest exemplu, sursa Gulp este furnizată cu o serie de globuri. Primul include toate fișierele care se termină în „.scss” și în subdirectoare, iar al doilea le exclude pe cele care încep cu „_”. În acest fel, putem folosi funcția încorporată @import a SCSS pentru a concatena fișierul _page.scss.

 gulp.task('default', ['scss'], function() {

Aici definim sarcina „implicit”. Sarcina „scss” este rulată ca o dependență înainte de „implicit”.

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

În cele din urmă, apelăm la funcția de urmărire a lui Gulp pentru a indica orice fișier care se termină cu „.scss” și ori de câte ori are loc un eveniment de modificare, pentru a rula sarcina „scss”.

Acum sunteți gata să creați noi observatori pentru alte procese automate, cum ar fi concatenarea JavaScript, indicarea codului, compilarea CoffeeScript sau orice altceva care ar putea veni în minte. Pentru a aprofunda această implementare a automatizării JavaScript, vă propun să adăugați gulp-notify care vă va anunța când este rulată o sarcină. De asemenea, puteți crea o sarcină separată pentru a minimiza codul CSS rezultat și pentru a face ca sarcina „scss” să ruleze ca o dependență de aceasta. În cele din urmă, puteți folosi gulp-rename pentru a adăuga sufixul „.min” la fișierele rezultate.

Pluginuri Gulp avansate pentru automatizarea JavaScript

Există mii de pluginuri în baza de pluginuri Gulp, dintre care unele merg dincolo de simpla automatizare JavaScript a unui proces de construire. Iată câteva exemple remarcabile:

BrowserSync

BrowserSync injectează CSS, JavaScript și reîmprospătează automat browserul ori de câte ori se face o modificare. În plus, conține o funcție ghostMode care poate fi folosită pentru a vă speria colegii sau pentru a accelera foarte mult testarea browserului.

Browserify

Browserify analizează apelurile „necesare” din aplicația dvs. și le convertește într-un fișier JavaScript inclus. De asemenea, există o listă de pachete npm care pot fi convertite în cod de browser.

Webpack

Similar cu Browserify, Webpack își propune să convertească modulele cu dependențe în fișiere statice. Acesta oferă mai multă libertate utilizatorului cu privire la modul în care vor fi setate dependențele modulului și nu urmărește să urmeze stilul de cod al lui Node.js.

Karma

Gulp-karma aduce la Gulp mediul infam de testare. Karma urmează abordarea cu cea mai mică configurație pe care o susține și Gulp.

Concluzie

În acest tutorial de automatizare a proceselor am demonstrat frumusețea și simplitatea utilizării Gulp ca instrument de construcție. Urmând pașii descriși în tutorial, veți fi acum gata să vă automatizați complet procesul de dezvoltare software atât în ​​proiectele viitoare, cât și în cele vechi. Investind ceva timp în configurarea unui sistem de construcție pentru proiectele tale mai vechi, cu siguranță vei economisi timp prețios în viitor.

Rămâneți pe fază pentru un tutorial Gulp mai avansat care va veni în curând.