Početak rada s Gulp.js

Gulp je alat temeljen na Javascriptu koji vam omogućuje automatiziranje bitova vašeg tijeka rada. Automatizacija vam doslovno može uštedjeti sate dnevno. Bilo da ste razvojni programer ili dizajner koji iz vremena na vrijeme stvara HTML grafičke znakove, potičem vas da se upišete.

U ovom članku razmotrit ćemo osnove korištenja Gulpa - od instalacije do osnovne sintakse i nekoliko primjera. Do kraja članka trebali biste biti u mogućnosti pronaći, instalirati i koristiti pakete koje su drugi stvorili za Gulp kompajlirati SASS, optimizirati slike, kreirati spriteove, spojiti datoteke i još mnogo toga!

Instaliranje Gulpa

Ne brinite, instalacija je vrlo jednostavna. Morat ćemo koristiti terminal u OSX-u i Linuxu ili u naredbenom retku za Windows. Od sada ću to nazvati Terminalom.

Otvorite ga i upišite npm -v i pritisnite enter. Ako vidite prikazani broj verzije imate već instaliran Node - to je ovisnost za Gulp.

Ako dobijete “naredba nije pronađena” (ili sličnu pogrešku), idite na stranicu Node.js preuzimanja i odaberite odgovarajući paket za vaš sustav. Jednom instalirana, npm naredba će biti dostupna u terminalu.

Instaliranje Gulpa je jednako lako. Zalijepite sljedeću naredbu u terminal, to je to:

npm install --global gutanje

To će instalirati Gulp naredbu koja će biti dostupna globalno na vašem sustavu.

Dodavanje gutljaja projektu

Gulp je sada instaliran, ali moramo ga zasebno dodati svakom projektu za koji ga trebamo. Stvorite praznu mapu i idite do nje u terminalu. Dok ste u mapi za projekt, koristite sljedeću naredbu:

npm install --save-dev gutanje

To bi trebalo stvoriti mapu node_modules i datoteku npm-debug.log u mapi projekta. Gulp ih koristi kako bi učinio svoju stvar vašem projektu, u ovoj fazi ne morate razmišljati o njima.

Razlog zbog kojeg moramo dodati Gulp svakom konkretnom projektu je taj svaki projekt ima različite zahtjeve. Jedan može pozvati SASS, drugi za Less. Jedan može koristiti Coffeescript, drugi ne može, i tako dalje.

Gulpfile

Gulpfile je mjesto gdje se čarolija događa, tamo gdje definirate automatizacije koje su vam potrebne i kada želite da se to dogodi. Kreiramo prazan zadani zadatak stvaranjem datoteke pod nazivom gulpfile.js i zalijepite sljedeći kod u njega.

var gulp = require ('gulp'); gulp.task ('default', function () // Za sada ništa ne radi, uskoro ćemo dodati funkcionalnost);

Nakon spremanja te datoteke možete se vratiti na svoj terminal i pokrenuti sam gulp naredbu. Gulp otkriva u kojem je projektu i pokreće zadani zadatak - onaj koji smo upravo stvorili. Trebali biste vidjeti nešto poput ovoga:

Ovdje se ništa ne događa, jer je zadatak prazan, ali radi dobro. Idemo sada s nekim primjerima!

Kopiranje datoteke

Ovo je dosadna, priznajem toliko, ali pomoći će vam razumjeti što se događa.

U mapi projekta izradite datoteku pod nazivom to_copy.txt , i imeniku dev. Idemo u naš Gulpfile i stvorimo novi zadatak pod nazivom kopirati.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Prvi redak definira zadatak koji se naziva kopija. Unutar toga koristimo gulp.src da navedemo koje datoteke ciljamo s ovim zadatkom - u ovom slučaju to je jedna datoteka pod nazivom to_copy.txt.

Zatim ove datoteke prebacujemo u funkciju gulp.dest koja određuje gdje želimo staviti te datoteke - koristio sam dev direktorij.

Vratite se na svoj terminal i upišite gulp copy da bi pokrenuo ovaj zadatak, trebao bi kopirati navedenu datoteku u određeni direktorij, nešto slično ovome:

Naredba za cijevi je u srcu Gulpa. To je učinkovit način za premještanje podataka između naredbi. Naredba src navodi datoteke koje se prenose na naredbu dest. U složenijim scenarijima prenijeli bismo naše datoteke u druge naredbe prije nego odredimo odredište.

Također biste trebali biti svjesni da se izvor može dati kao jedna datoteka ili više datoteka. Ako imamo imenik proizvodnja i želimo premjestiti sve datoteke iz našeg razvoj mapu u nju, mogli bismo koristiti sljedeću naredbu:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Znak zvijezde podudara se s bilo čim unutar direktorija. Također možete uskladiti sve datoteke unutar svih poddirektorija i napraviti sve vrste drugih prikladnih podudaranja. Pogledajte dokumentaciju node-glob za više informacija.

Kompajliranje SASS

Kompajliranje stilske tablice iz SASS datoteka uobičajena je zadaća za programere. To se može učiniti s Gulpom prilično lako, ipak ćemo morati napraviti neke pripreme. Osim osnovnih naredbi kao što su src, dest i broj drugih, sve funkcionalnosti se dodaju preko addons-a treće strane. Evo kako ih koristim.

Pišem SASS Gulp u Google, prvi rezultat je obično ono što trebam, trebali biste pronaći stranicu za SASS paket. Pokazuje vam kako ga instalirati (npm install gulp-sass). Vjerojatno ćete morati koristiti sudo da biste ga instalirali kao administrator, tako da će vjerojatno biti (sudo npm install gulp-sass) .

Kada završite, možete upotrijebiti sintaksu koju paket određuje za kompajliranje koda. Da biste to učinili, napravite datoteku styles.scss sa sljedećim sadržajem:

$ primary: # ff9900; tijelo pozadina: $ primarno; 

Sada kreirajte sljedeći Gulp zadatak u Gulpfileu.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Prije izvo enja naredbe, ne zaboravite 'zahtijevati' paket na vrhu Gulpfilea ovako:

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

Kada trčiš gutljaj sass, sve datoteke s scss ekstenzijom bit će preusmjerene na sass funkciju, koja će ih pretvoriti u css. Oni se zatim prenose na odredišnu funkciju koja ih smješta u css mapu.

Gledanje datoteka i mapa

Do sada je sve to zgodno, ali još uvijek moramo upisati naredbu svaki put želimo pokrenuti zadatak, koji nije jako učinkovit, pogotovo kada je riječ o promjenama stilova. Gulp vam omogućuje da gledate datoteke za promjene i izvršavate naredbe automatski.

U Gulpfileu stvorite naredbu pod nazivom automatizirati koji će koristiti naredbu watch za gledanje skupa datoteka za promjene i pokretanje određene naredbe kada se datoteka promijeni.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Ako upišete automatizirati gutljaj U terminal će se pokrenuti i završiti zadatak, ali neće se vratiti na upit jer nadzire promjene. Odredili smo da želimo gledati sve scss datoteke u korijenskom direktoriju i ako se promijene, želimo pokrenuti naredbu sass koju smo prethodno postavili.

Ako sada promijenite svoj style.scss datoteku, trebate je automatski sastaviti css datoteku unutar css direktorija.

Pokretanje više zadataka

Postoji mnogo situacija u kojima želite pokrenuti više zadataka. Kada gledate vašu JavaScript mapu, možda ćete htjeti sastaviti dva spojena fajla, a zatim nastaviti s njima. Postoje dva načina na koje možete to učiniti.

Ako su zadaci povezani, volim lanac. Dobar primjer bi bio ulančavanje i minifikacija javascript datoteka. Najprije cijepamo naše datoteke na concat akciju, a zatim ih preusmjerimo na gulp-uglify, a zatim upotrebljavamo odredišnu funkciju za izlaz..

Ako zadaci nisu povezani, mogli biste pozvati više zadataka. Primjer bi bio zadatak u kojem želimo spojiti i umanjiti naše skripte i sastaviti naš SASS. Evo pune Gulpfile kako bi to izgledalo.

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'))); gulp.task ('automate', funkcija () gulp.watch (['*. scss', 'js / ** / *. js'], ['skripti', 'stilovi']);); gulp.task ('default', ['scripts', 'styles']);

Ako upišete gulp skripte u terminal, sve javascript datoteke unutar direktorija js bit će spojene, izlaz u glavni direktorij, zatim uglified i spremljene u glavni direktorij.

Ako upišete gutljaj sass, sve vaše scss datoteke bit će kompilirane i spremljene u css imenik.

Ako upišete gutljaj (zadani zadatak), vaš skripta zadatak će se pokrenuti, a zatim slijedi vaš stilovi zadatak.

automatizirati gutljaj zadatak gleda više mapa za promjene u našim scss i js datotekama i izvršit će oba zadatka koje smo definirali, ako se otkrije promjena.

Pregled

Korištenje Gulpa nije teško, u stvari, mnogi ljudi preferiraju Grunt zbog jednostavnije sintakse. Zapamtite korake prilikom izrade nove automatizacije:

• Traži dodatak
• Instalirajte dodatak
• Zahtijevaj dodatak u Gulpfileu
• Koristite sintaksu u dokumentaciji

Pet naredbi koje su dostupne u Gulpu (zadatak, trčanje, gledanje, src, dest) jedini su koje morate znati, svi dodaci trećih strana imaju veliku dokumentaciju. Evo popisa nekih stvari koje koristim koje biste mogli odmah početi:

• Optimiziranje slika pomoću optimizacije slike
• Izrada sprites slika s gulp-sprite
• Povezivanje datoteka s gutanjem-concat
• Smanjivanje datoteka s gulp-uglify
• Brisanje datoteka s gulp-delom
• Javascript linting s gulp-jslint
• JSON linting s gulp-jsonlint
• Autoprefix CSS s gutljajem-autoprekidačem
• Pretražite i zamijenite pomoću gulp-frep
• Smanjite CSS pomoću gulp-minify-css