Cum să exploatezi mașinile: să fii productiv cu cei care conduc sarcini
Publicat: 2022-03-10Rugătorii de sarcini sunt eroii (sau răufăcătorii, în funcție de punctul tău de vedere) care se chinuie în liniște în spatele majorității aplicațiilor web și mobile. Operatorii de activități oferă valoare prin automatizarea numeroaselor sarcini de dezvoltare, cum ar fi concatenarea fișierelor, învârtirea serverelor de dezvoltare și compilarea codului. În acest articol, vom acoperi scripturile Grunt, Gulp, Webpack și npm. De asemenea, vă vom oferi câteva exemple pentru fiecare dintre ele pentru a vă ajuta să începeți. Aproape de sfârșit, voi arunca câteva câștiguri ușoare și sfaturi pentru integrarea ideilor din această postare în aplicația dvs.
Există sentimentul că cei care execută sarcini și progresele JavaScript în general, complică prea mult peisajul front-end. Sunt de acord că a petrece întreaga zi modificând scripturile de compilare nu este întotdeauna cea mai bună utilizare a timpului tău, dar cei care rulează sarcini au unele beneficii atunci când sunt folosiți corect și cu moderație. Acesta este scopul nostru în acest articol, să acoperim rapid elementele de bază ale celor mai populari alergători de sarcini și să oferim exemple solide pentru a-ți porni imaginația cu privire la modul în care aceste instrumente se potrivesc în fluxul tău de lucru.
Citiți suplimentare despre SmashingMag:
- Deveniți un utilizator cu putere de linie de comandă cu Oh-My-ZSH și Z
- O introducere în PostCSS
- Ridică-te și fugi cu Grunt
- Clădire cu Gulp
O notă pe linia de comandă
Rulatorii de sarcini și instrumentele de compilare sunt în primul rând instrumente de linie de comandă. Pe parcursul acestui articol, îmi voi asum un nivel decent de experiență și competență în lucrul cu linia de comandă. Dacă înțelegeți cum să utilizați comenzi obișnuite precum cd
, ls
, cp
și mv
, atunci ar trebui să fiți în regulă în timp ce parcurgem diferitele exemple. Dacă nu vă simțiți confortabil folosind aceste comenzi, o postare introductivă excelentă este disponibilă pe Smashing Magazine. Să începem lucrurile cu bunicul tuturor: Grunt.
Grunt
Grunt a fost primul rulant de sarcini popular bazat pe JavaScript. Folosesc Grunt într-o formă oarecare din 2012. Ideea de bază din spatele Grunt este că utilizați un fișier JavaScript special, Gruntfile.js
, pentru a configura diverse plugin-uri pentru a îndeplini sarcini. Are un ecosistem vast de plugin-uri și este un instrument foarte matur și stabil. Grunt are un director web fantastic care indexează majoritatea pluginurilor (aproximativ 5.500 în prezent). Geniul simplu al Grunt este combinația sa de JavaScript și ideea unui fișier de configurare comun (cum ar fi un fișier make), care a permis multor mai mulți dezvoltatori să contribuie și să folosească Grunt în proiectele lor. De asemenea, înseamnă că Grunt poate fi plasat sub același sistem de control al versiunilor ca și restul proiectului.
Grunt este testat de luptă și stabil. În timpul scrierii, a fost lansată versiunea 1.0.0, ceea ce este o realizare uriașă pentru echipa Grunt. Deoarece Grunt configurează în mare parte diverse plugin-uri pentru a lucra împreună, se poate încurca (adică dezordonat și confuz de modificat) destul de repede. Cu toate acestea, cu puțină grijă și organizare (spărțirea sarcinilor în fișiere logice!), îl puteți face să facă minuni pentru orice proiect.
În cazul rar în care un plugin nu este disponibil pentru a îndeplini sarcina de care aveți nevoie, Grunt oferă documentație despre cum să vă scrieți propriul plugin. Tot ce trebuie să știți pentru a vă crea propriul plugin este JavaScript și API-ul Grunt. Aproape niciodată nu va trebui să vă creați propriul plugin, așa că haideți să vedem cum să utilizați Grunt cu un plugin destul de popular și util!
Un exemplu

Să vedem cum funcționează de fapt Grunt. Rularea grunt
în linia de comandă va declanșa programul Grunt de linie de comandă care caută Gruntfile.js
în rădăcina directorului. Gruntfile.js
conține configurația care controlează ce va face Grunt. În acest sens, Gruntfile.js
poate fi văzut ca un fel de carte de bucate pe care o urmează bucătarul (adică Grunt, programul); și, ca orice carte de bucate bună, Gruntfile.js
va conține multe rețete (adică sarcini).
Vom pune Grunt în treabă utilizând pluginul Grunticon pentru a genera pictograme pentru o aplicație web ipotetică. Grunticon preia un director de SVG-uri și scuipă mai multe active:
- un fișier CSS cu codificarea SVG-urilor de bază-64 ca imagini de fundal;
- un fișier CSS cu versiuni PNG ale SVG-urilor codificate în baza 64 ca imagini de fundal;
- un fișier CSS care face referire la un fișier PNG individual pentru fiecare pictogramă.
Cele trei fișiere diferite reprezintă diferitele capacități ale browserelor și dispozitivelor mobile. Dispozitivele moderne vor primi SVG-urile de înaltă rezoluție ca o singură solicitare (adică un singur fișier CSS). Browserele care nu se ocupă de SVG-uri, dar gestionează elementele codificate în bază 64 vor primi foaia de stil PNG de bază 64. În cele din urmă, orice browser care nu poate gestiona aceste două scenarii va primi foaia de stil „tradițională” care face referire la PNG-uri. Toate acestea dintr-un singur director de SVG-uri!
Configurația acestei sarcini arată astfel:
module.exports = function(grunt) { grunt.config("grunticon", { icons: { files: [ { expand: true, cwd: 'grunticon/source', src: ["*.svg", ".png"], dest: 'dist/grunticon' } ], options: [ { colors: { "blue": "blue" } } ] } }); grunt.loadNpmTasks('grunt-grunticon'); };
Să parcurgem diferiții pași aici:
- Trebuie să aveți Grunt instalat la nivel global.
- Creați fișierul
Gruntfile.js
în rădăcina proiectului. Cel mai bine este să instalați și Grunt ca dependență npm în fișierulpackage.json
împreună cu Grunticon prinnpm i grunt grunt-grunticon --save-dev
. - Creați un director de SVG-uri și un director de destinație (unde vor merge activele construite).
- Plasați un mic script în
head
codului HTML, care va determina ce pictograme să încărcați.
Iată cum ar trebui să arate directorul înainte de a rula sarcina Grunticon:
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
Odată ce aceste lucruri sunt instalate și create, puteți copia fragmentul de cod de mai sus în Gruntfile.js
. Apoi ar trebui să puteți rula grunt grunticon
din linia de comandă și să vedeți executarea sarcinii.
Fragmentul de mai sus face câteva lucruri:
- adaugă un nou obiect de
config
la Grunt pe linia 32 numitgrunticon
; - completează diferitele opțiuni și parametri pentru Grunticon în obiectul
icons
; - în cele din urmă, trage în plugin-ul Grunticon prin
loadNPMTasks
.
Iată cum ar trebui să arate directorul după Grunticon:
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
Iată - gata! În câteva linii de configurare și câteva instalări de pachete, am automatizat generarea elementelor noastre de pictograme! Sperăm că acest lucru începe să ilustreze puterea care rulează sarcini: fiabilitate, eficiență și portabilitate.
Gulp: Blocuri LEGO pentru sistemul dvs. de construcție
Gulp a apărut cândva după Grunt și a aspirat să fie un instrument de construcție care nu era doar o configurație, ci cod real. Ideea din spatele codului peste configurație este că codul este mult mai expresiv și mai flexibil decât modificarea fișierelor de configurare nesfârșite. Obstacolul cu Gulp este că necesită mai multe cunoștințe tehnice decât Grunt. Va trebui să fii familiarizat cu API-ul de streaming Node.js și să fii confortabil să scrii JavaScript de bază.
Utilizarea de către Gulp a fluxurilor Node.js este principalul motiv pentru care este mai rapid decât Grunt. Folosirea fluxurilor înseamnă că, în loc să folosească sistemul de fișiere ca „bază de date” pentru transformările fișierelor, Gulp folosește transformări în memorie. Pentru mai multe informații despre fluxuri, consultați documentația API-ului pentru fluxuri Node.js, împreună cu manualul pentru fluxuri.
Un exemplu

Ca și în secțiunea Grunt, îl vom pune pe Gulp la treaptă cu un exemplu simplu: concatenarea modulelor noastre JavaScript într-un singur fișier de aplicație.
Rularea Gulp este la fel cu rularea Grunt. Programul de linie de comandă gulp
va căuta cartea de bucate cu rețete (adică Gulpfile.js
) în directorul în care este rulat.
Limitarea numărului de solicitări pe care le face fiecare pagină este considerată o bună practică de performanță web (în special pe mobil). Cu toate acestea, colaborarea cu alți dezvoltatori este mult mai ușoară dacă funcționalitatea este împărțită în mai multe fișiere. Introduceți alergătorii de sarcini. Putem folosi Gulp pentru a combina mai multe fișiere JavaScript pentru aplicația noastră, astfel încât clienții de telefonie mobilă trebuie să încarce un singur fișier, în loc de multe.
Gulp are același ecosistem masiv de plugin-uri ca Grunt. Deci, pentru a face această sarcină ușoară, ne vom sprijini pe pluginul gulp-concat. Să presupunem că structura proiectului nostru arată astfel:
|-- dist | `-- app.js |-- gulpfile.js |-- package.json `-- src |-- bar.js `-- foo.js
Două fișiere JavaScript sunt în directorul nostru src
și dorim să le combinăm într-un singur fișier, app.js
, în directorul nostru dist/
. Putem folosi următoarea sarcină Gulp pentru a realiza acest lucru.
var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('default', function() { return gulp.src('./src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./dist/')); });
Biții importanți sunt în apelul gulp.task
. Acolo, folosim gulp.src
API pentru a obține toate fișierele care se termină cu .js
din directorul nostru src
. API-ul gulp.src
returnează un flux al acelor fișiere, pe care apoi le putem transmite (prin API-ul pipe
) pluginului gulp-concat. Pluginul concatenează apoi toate fișierele din flux și le transmite funcției gulp.dest
. Funcția gulp-dest
scrie pur și simplu intrarea pe care o primește pe disc.
Puteți vedea cum Gulp folosește fluxurile pentru a ne oferi „blocuri de construcție” sau „lanțuri” pentru sarcinile noastre. Un flux de lucru tipic Gulp arată astfel:
- Obțineți toate fișierele de un anumit tip.
- Treceți acele fișiere unui plugin (concat!) sau faceți o transformare.
- Treceți acele fișiere transformate într-un alt bloc (în cazul nostru, blocul
dest
, care încheie lanțul nostru).
Ca și în exemplul Grunt, pur și simplu rularea gulp
de la rădăcina directorului nostru de proiect va declanșa sarcina default
definită în fișierul Gulpfile.js
. Această sarcină concatenează fișierele noastre și ne permite să ne dezvoltăm aplicația sau site-ul web.
Webpack
Cea mai nouă adăugare la clubul JavaScript task runner este Webpack. Webpack se autoproclamă ca „grupare de module”, ceea ce înseamnă că poate construi dinamic un pachet de cod JavaScript din mai multe fișiere separate, folosind modele de module, cum ar fi modelul CommonJS. Webpack are, de asemenea, pluginuri, pe care le numește încărcătoare.

Webpack este încă destul de tânăr și are o documentație destul de densă și confuză. Prin urmare, aș recomanda depozitul Webpack al lui Pete Hunt ca un punct de plecare excelent înainte de a se scufunda în documentația oficială. De asemenea, nu v-aș recomanda Webpack dacă sunteți nou în ceea ce privește alergatorii de sarcini sau nu vă simțiți competent în JavaScript. Lăsând la o parte aceste probleme, este încă un instrument mai specific decât largimea generală a Grunt și Gulp. Mulți oameni folosesc Webpack alături de Grunt sau Gulp tocmai din acest motiv, lăsând Webpack să exceleze la gruparea modulelor și lăsând Grunt sau Gulp să se ocupe de sarcini mai generice.
Webpack ne permite în cele din urmă să scriem cod în stilul Node.js pentru browser, un câștig extraordinar pentru productivitate și o separare clară a preocupărilor în codul nostru prin module. Să folosim Webpack pentru a obține același rezultat ca și cu exemplul Gulp, combinând mai multe fișiere JavaScript într-un singur fișier de aplicație.
Un exemplu

Webpack este adesea folosit cu Babel pentru a transpila codul ES6 în ES5. Transpilarea codului de la ES6 la ES5 permite dezvoltatorilor să folosească standardul ES6 în curs de dezvoltare în timp ce difuzează ES5 în browsere sau medii care nu acceptă încă pe deplin ES6. Cu toate acestea, în acest exemplu, ne vom concentra pe construirea unui pachet simplu din cele două fișiere din exemplul Gulp. Pentru a începe, trebuie să instalăm Webpack și să creăm un fișier de configurare, webpack.config.js
. Iată cum arată fișierul nostru:
module.exports = { entry: "./src/foo.js", output: { filename: "app.js", path: "./dist" } };
În acest exemplu, îndreptăm Webpack către fișierul nostru src/foo.js
pentru a începe munca de a parcurge graficul de dependență. De asemenea, am actualizat fișierul foo.js
să arate astfel:
//foo.js var bar = require("./bar"); var foo = function() { console.log('foo'); bar(); }; module.exports = foo;
Și am actualizat fișierul nostru bar.js
pentru a arăta astfel:
//bar.js var bar = function() { console.log('bar'); }; module.exports = bar;
Acesta este un exemplu de bază CommonJS. Veți observa că aceste fișiere acum „exportă” o funcție. În esență, CommonJS și Webpack ne permit să începem să ne organizăm codul în module autonome care pot fi importate și exportate în aplicația noastră. Webpack este suficient de inteligent pentru a urmări cuvintele cheie de import și export și pentru a grupa totul într-un singur fișier, dist/app.js
. Nu mai trebuie să menținem o sarcină de concatenare și pur și simplu trebuie să aderăm la o structură pentru codul nostru. Mult mai bine!
Extinderea
Webpack este asemănător cu Gulp prin aceea că „Este doar JavaScript”. Poate fi extins pentru a îndeplini alte sarcini de rulare de sarcini prin intermediul sistemului său de încărcare. De exemplu, puteți folosi css-loader și sass-loader pentru a compila Sass în CSS și chiar pentru a utiliza Sass în JavaScript prin supraîncărcarea modelului CommonJS require
! Cu toate acestea, susțin de obicei utilizarea Webpack numai pentru a construi module JavaScript și pentru utilizarea unei alte abordări cu scop general pentru rularea sarcinilor (de exemplu, scripturi Webpack și npm sau Webpack și Gulp pentru a gestiona orice altceva).
Scripturi npm
Scripturile npm sunt cea mai recentă nebunie hipster și din motive întemeiate. După cum am văzut cu toate aceste instrumente, numărul de dependențe pe care le-ar putea introduce într-un proiect ar putea scăpa în cele din urmă de sub control. Prima postare pe care am văzut-o susținând scripturile npm ca punct de intrare pentru un proces de construire a fost de James Halliday. Postarea lui rezumă perfect puterea ignorată a scripturilor npm (sublinierea mea):
Există câteva instrumente fanteziste pentru automatizarea proiectelor JavaScript pe care nu le-am simțit niciodată atractiv, deoarece comanda npm run
, mai puțin cunoscută, a fost perfect adecvată pentru tot ceea ce trebuia să fac, menținând în același timp o amprentă de configurare foarte mică .
Ai prins ultima parte la final? Atractia principală a scripturilor npm este că au o „amprentă de configurare foarte mică”. Acesta este unul dintre motivele principale pentru care scripturile npm au început să prindă (aproape patru ani mai târziu, din păcate). Cu Grunt, Gulp și chiar Webpack, cineva începe în cele din urmă să se înece în plugin-uri care încapsulează binare și dublează numărul de dependențe dintr-un proiect.
Keith Cirkel are tutorialul de bază despre utilizarea npm pentru a înlocui Grunt sau Gulp. El oferă planul pentru cum să valorifice pe deplin puterea scripturilor npm și a introdus un plugin esențial, Parallel Shell (și o mulțime de altele asemănătoare).
Un exemplu
În secțiunea noastră despre Grunt, am luat modulul popular Grunticon și am creat pictograme SVG (cu alternative PNG) într-o sarcină Grunt. Acesta a fost singurul punct de durere cu scripturile npm pentru mine. Pentru o vreme, aș păstra Grunt instalat pentru proiecte doar pentru a folosi Grunticon. L-aș „echipa” lui Grunt în sarcina mea npm pentru a realiza lansarea task-runner (sau, așa cum am început să-l numim la serviciu, un build-tool turducken). Din fericire, The Filament Group, grupul fantastic din spatele Grunticon, a lansat o versiune independentă (adică fără Grunt) a instrumentului lor, Grunticon-Lib. Deci, să-l folosim pentru a crea câteva pictograme cu scripturi npm!
Acest exemplu este puțin mai avansat decât o sarcină tipică de script npm. O sarcină tipică de script npm este un apel la un instrument de linie de comandă, cu semnalizatoarele adecvate sau fișierul de configurare. Iată o sarcină mai tipică care compilează Sass în CSS:
"sass": "node-sass src/scss/ -o dist/css",
Vedeți cum este doar o linie cu diferite opțiuni? Nu este nevoie de fișier de activitate, nici un instrument de compilare pentru a porni - doar npm run sass
din linia de comandă, iar dvs. Sass este acum CSS. O caracteristică foarte frumoasă a scripturilor npm este modul în care puteți înlănțui sarcinile de script împreună. De exemplu, să presupunem că vrem să rulăm o sarcină înainte ca sarcina noastră Sass să ruleze. Am crea o nouă intrare de script ca aceasta:
"presass": "echo 'before sass',
Așa este: pre-
înțelege prefixul. Înțelege și post-
-prefixul. Orice intrare de script cu același nume ca o altă intrare de script cu un prefix sau post-
-prefix va rula pre-
sau după acea intrare.
Convertirea pictogramelor noastre va necesita un fișier real Node.js. Nu e prea grav, totuși. Doar creați un director de tasks
și creați un fișier nou numit grunticon.js
sau icons.js
sau orice are sens pentru cei care lucrează la proiect. Odată ce fișierul este creat, putem scrie ceva JavaScript pentru a declanșa procesul Grunticon.
Notă: Toate aceste exemple folosesc ES6, așa că vom folosi babel-node pentru a ne rula sarcina. Puteți utiliza cu ușurință ES5 și Node.js, dacă este mai confortabil.
import icons from "grunticon-lib"; import globby from "globby"; let files = globby.sync('src/icons/*'); let options = { colors: { "blue": "blue" } }; let icon = new icons(files, 'dist/icons', options); icon.process();
Să intrăm în cod și să ne dăm seama ce se întâmplă.
-
import
(adică solicităm) două biblioteci,grunticon-lib
șiglobby
. Globby este unul dintre instrumentele mele preferate și face lucrul cu fișiere și globuri atât de ușor. Globby îmbunătățește Node.js Glob (selectați toate fișierele JavaScript prin./*.js
) cu suport Promise. În acest caz, îl folosim pentru a obține toate fișierele din directorulsrc/icons
. - Odată ce facem asta, setăm câteva opțiuni într-un obiect
options
și apoi apelăm Grunticon-Lib cu trei argumente:- fișierele pictograme,
- destinatia,
- opțiunile. Biblioteca preia și le mestecă pe acele pictograme și în cele din urmă creează versiunile SVG și PNG în directorul pe care îl dorim.
- Aproape am terminat. Amintiți-vă că acesta este într-un fișier separat și trebuie să adăugăm un „cârlig” pentru a apela acest fișier din scriptul nostru npm, astfel:
"icons": "babel-node tasks/icons.js"
. - Acum putem rula
npm run icons
, iar pictogramele noastre vor fi create de fiecare dată.
Scripturile npm oferă un nivel similar de putere și flexibilitate ca și alți executanți de sarcini, fără datoria de plugin.
Defalcarea alergătorilor de sarcini acoperiți aici
Instrument | Pro | Contra |
---|---|---|
Grunt | Nu sunt necesare cunoștințe reale de programare | Cele mai detaliate dintre sarcinile care rulează aici |
Înghiţitură | Configurați sarcini cu JavaScript și fluxuri reale | Necesită cunoștințe de JavaScript |
Adaugă cod la un proiect (potenţial mai multe erori) | ||
Webpack | Cel mai bun din clasă la gruparea modulelor | Mai dificil pentru sarcini mai generice (de exemplu, Sass la CSS) |
scripturi npm | Interacțiune directă cu instrumentele din linia de comandă. | Unele sarcini nu sunt posibile fără un task runner. |
Câteva câștiguri ușoare
Toate aceste exemple și sarcini care rulează ar putea părea copleșitoare, așa că haideți să le descompunem. În primul rând, sper că nu înlăturați din acest articol că orice sistem de rulare de sarcini sau de construcție pe care îl utilizați în prezent trebuie înlocuit instantaneu cu unul menționat aici. Înlocuirea unor sisteme importante ca acesta nu ar trebui făcută fără multă atenție. Iată sfatul meu pentru actualizarea unui sistem existent: faceți-o în mod incremental.
Scripturi Wrapper!
O abordare incrementală este să vă uitați la scrierea câtorva scripturi npm „înveliș” în jurul rulatorilor de sarcini existente pentru a oferi un vocabular comun pentru pașii de construire care se află în afara programului de rulare a sarcinilor efectiv utilizat. Un script wrapper ar putea fi la fel de simplu ca acesta:
{ "scripts": { "start": "gulp" } }
Multe proiecte utilizează blocurile de script npm de start
și test
pentru a ajuta dezvoltatorii noi să se aclimatizeze rapid. Un script wrapper introduce un alt strat de abstractizare în lanțul dvs. de construire a alergatorului de sarcini, dar cred că merită să puteți standardiza în jurul primitivelor npm (de exemplu test
). Comenzile npm au o longevitate mai bună decât un instrument individual.
Presărați într-un mic pachet Web
Dacă dvs. sau echipa dvs. simțiți durerea de a menține o „ordine de pachet” fragilă pentru JavaScript sau doriți să faceți upgrade la ES6, luați în considerare aceasta o oportunitate de a introduce Webpack în sistemul dvs. existent de rulare a sarcinilor. Webpack este grozav prin faptul că puteți folosi atât de mult sau cât de puțin doriți și, totuși, puteți obține valoare din el. Începeți doar prin a pune în pachet codul aplicației, apoi adăugați babel-loader la amestec. Webpack are o atât de profunzime de funcții încât va fi capabil să găzduiască aproape orice completări sau funcții noi pentru o perioadă de timp.
Utilizați cu ușurință PostCSS cu scripturi npm
PostCSS este o colecție grozavă de pluginuri care transformă și îmbunătățesc CSS odată ce este scris și preprocesat. Cu alte cuvinte, este un post-procesor. Este destul de ușor să utilizați PostCSS folosind scripturi npm. Să presupunem că avem un script Sass ca în exemplul nostru anterior:
"sass": "node-sass src/scss/ -o dist/css",
Putem folosi cuvintele cheie ale lifecycle
de viață ale scriptului npm pentru a adăuga un script care să ruleze automat după sarcina Sass:
"postsass": "postcss --use autoprefixer -c postcss.config.json dist/css/*.css -d dist/css",
Acest script va rula de fiecare dată când este rulat scriptul Sass. Pachetul postcss-cli este grozav, deoarece puteți specifica configurația într-un fișier separat. Observați că în acest exemplu, adăugăm o altă intrare de script pentru a realiza o nouă sarcină; acesta este un model comun când se utilizează scripturi npm. Puteți crea un flux de lucru care îndeplinește toate sarcinile de care aplicația dvs. are nevoie.
Concluzie
Rugătorii de sarcini pot rezolva probleme reale. Am folosit task runners pentru a compila diferite versiuni ale unei aplicații JavaScript, în funcție de dacă ținta era producția sau dezvoltarea locală. Am folosit, de asemenea, task runners pentru a compila șabloane de ghidare, pentru a implementa un site web în producție și pentru a adăuga automat prefixe de furnizor care nu sunt în Sass. Acestea nu sunt sarcini banale, dar odată ce sunt înfășurate într-un alergător de sarcini, au devenit fără efort.
Rugătorii de sarcini evoluează și se schimbă în mod constant. Am încercat să le acopăr pe cele mai utilizate în zeitgeist-ul actual. Mai sunt însă și altele pe care nici nu le-am menționat, precum Broccoli, Brunch și Harp. Amintiți-vă că acestea sunt doar instrumente: Folosiți-le numai dacă rezolvă o anumită problemă, nu pentru că le folosește toți ceilalți. Sarcina fericită rulează!