Kako začeti z Gulp.js

Gulp je orodje, ki temelji na Javascriptu in omogoča avtomatizacijo bitov delovnega toka. Avtomatizacija vam lahko dobesedno prihrani ure na dan. Ne glede na to, ali ste razvijalec ali oblikovalec, ki včasih ustvarja HTML-žice, vam priporočam, da se kopate.

V tem članku bomo preučili osnove uporabe Gulpa - od namestitve do osnovne sintakse in nekaj primerov. Do konca članka bi morali biti sposobni poiščite, namestite in uporabljate pakete, ki so jih drugi ustvarili za Gulp za zbiranje SASS, optimizacijo slik, ustvarjanje sprites, združevanje datotek in še več!

Namestitev Gulpa

Ne skrbite, namestitev je zelo enostavna. Morali bomo uporabiti terminal v OSX in Linuxu ali ukazni poziv za Windows. Od zdaj naprej bom govoril o njem kot o Terminalu.

Odprite ga in vnesite npm -v in pritisnite enter. Če vidite prikazano številko različice, ste že namestili Node - to je odvisnost za Gulp.

Če dobiš “Ukaz ni bil najden” (ali podobno napako), pojdite na stran za prenos Node.js in izberite ustrezen paket za vaš sistem. Ko je nameščen, bo ukaz npm na voljo v terminalu.

Namestitev Gulpa je prav tako preprosta. Prilepite naslednji ukaz v terminal, to je to:

npm install --global gulp

S tem boste namestili ukaz Gulp, ki bo na voljo na vašem sistemu.

Dodajanje gulpa projektu

Gulp je zdaj nameščen, vendar ga moramo ločeno dodati vsakemu projektu, ki ga potrebujemo. Ustvarite prazno mapo in se pomaknite do nje v terminalu. V mapi za projekt uporabite ta ukaz:

npm Namestitev --save-dev

To naj ustvari mapo node_modules in datoteko npm-debug.log v mapi projekta. Gulp jih uporablja, da naredijo svojo stvar za vaš projekt, na tej stopnji vam ni treba razmišljati o njih.

Razlog, da moramo dodati Gulp vsakemu posameznemu projektu, je ta vsak projekt ima različne zahteve. Eden lahko zahteva SASS, drugega pa manj. Eden lahko uporabi Coffeescript, drugi pa ne, in tako naprej.

Gulpfile

Gulpfile je mesto, kjer se zgodi čarovnija, kjer določite avtomatizacije, ki jih potrebujete in ko želite, da se to zgodi. Ustvarimo prazno privzeto nalogo tako, da ustvarimo imenovano datoteko gulpfile.js in prilepite naslednjo kodo v to.

var gulp = require ('gulp'); gulp.task ('default', function () // Zaenkrat ne delamo ničesar, kmalu bomo dodali funkcionalnost);

Ko je ta datoteka shranjena, se lahko vrnete na svoj terminal in zaženete ukaz gulp. Gulp zazna projekt, v katerem je, in zažene privzeto nalogo - tisto, ki smo jo pravkar ustvarili. Videti bi morali nekaj takega:

Tu se nič ne zgodi, ker je naloga prazna, vendar deluje dobro. Zdaj pa gremo s primernimi primeri!

Kopiranje datoteke

To je dolgočasno, toliko priznavam, vendar vam bo pomagalo razumeti, kaj se dogaja z lahkoto.

V mapi projekta ustvarite datoteko z imenom to_copy.txt , in imenovano mapo dev. Pojdimo v naš Gulpfile in ustvarimo novo nalogo kopirati.

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

Prva vrstica določa nalogo, ki se imenuje kopija. V tem okviru uporabljamo gulp.src, da določimo, katere datoteke ciljamo s to nalogo - v tem primeru gre za eno samo datoteko to_copy.txt.

Nato preusmerimo te datoteke v funkcijo gulp.dest, ki določa, kam želimo postaviti te datoteke - uporabil sem dev imenik.

Vrni se nazaj na terminal in vnesi kopijo Če želite zagnati to nalogo, mora določeno datoteko kopirati v podani imenik, nekaj takega:

Ukaz cevi je v srcu Gulpa. To je učinkovit način za premikanje podatkov med ukazi. Ukaz src podaja datoteke, ki so preusmerjene v ukaz dest. V kompleksnejših scenarijih bomo datoteke določili v druge ukaze, preden smo določili cilj.

Prav tako se morate zavedati, da je vir mogoče podati kot eno datoteko ali več datotek. Če imamo imenik proizvodnje in želimo premakniti vse datoteke iz naše razvoj v mapo, lahko uporabimo naslednji ukaz:

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

Znak zvezde se bo ujemal s katerim koli v imeniku. Prav tako lahko primerjate vse datoteke v vseh podimenikih in naredite vse druge vrste ujemanja. Za več informacij si oglejte dokumentacijo node-glob.

Prevajanje SASS

Zbiranje slogovnih datotek iz datotek SASS je običajna naloga za razvijalce. To je mogoče storiti z Gulp precej enostavno, bomo morali narediti nekaj priprave, čeprav. Poleg osnovnih ukazov, kot so src, dest in številni drugi, je vsa funkcionalnost dodana preko addons tretjih oseb. Evo, kako jih uporabljam.

Tipkam SASS Gulp v Google, prvi rezultat je ponavadi tisto, kar potrebujem, morate najti stran za paket SASS. Prikazuje, kako ga namestite (npm install gulp-sass). Verjetno boste morali uporabiti sudo, da ga namestite kot skrbnika, tako da bo verjetno (sudo npm install gulp-sass) .

Ko končate, lahko uporabite skladnjo, ki jo narekuje paket, da prevedete kodo. To naredite tako, da ustvarite datoteko styles.scss z naslednjo vsebino:

$ primary: # ff9900; telo ozadje: $ primary; 

Zdaj ustvarite naslednjo Gulp nalogo v Gulpfile.

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

Preden zaženete ukaz, ne pozabite 'zahtevati' paketa na vrhu Gulpfile, kot je ta:

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

Ko zaženete gulp sass, vse datoteke s končnico scss bodo preusmerjene v funkcijo sass, ki jih bo pretvorila v css. Nato se prenesejo v ciljno funkcijo, ki jih postavi v mapo css.

Gledanje datotek in map

Do sedaj je vse to priročno, vendar še vedno moramo vnesti ukaz vsakič želimo zagnati nalogo, ki ni zelo učinkovita, še posebej pri spremembah slogovnih slogov. Gulp vam omogoča ogled datotek za spremembe in samodejno izvajanje ukazov.

V Gulpfile ustvarite ukaz z imenom avtomatizirati ki bo uporabil ukaz uro za ogled niza datotek za spremembe in zagon določenega ukaza, ko se datoteka spremeni.

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

Če tipkate samodejni gutljaj v terminal bo začel in končal nalogo, vendar se ne bo vrnil v poziv, ker spremlja spremembe. Določili smo, da želimo gledati vse datoteke scss v korenskem imeniku in če se spremenijo, želimo zagnati ukaz sass, ki smo ga nastavili prej..

Če sedaj spremenite datoteko style.scss, jo morate samodejno prevesti v css datoteko v imeniku css.

Izvajanje več nalog

Obstaja veliko situacij, v katerih boste morda želeli zagnati več nalog. Ko gledate vašo JavaScript mapo, boste morda želeli združiti dve datoteki in nato nadaljevati s tem, da ju zmanjšate. To lahko storite na dva načina.

Če so naloge povezane, rad verigo. Dober primer bi bilo združevanje in zmanjševanje javascript datotek. Najprej preusmerimo naše datoteke v koncatno dejanje, nato pa jih preusmerimo na gulp-uglify, nato pa uporabimo funkcijo cilja za njihovo izpisovanje..

Če naloge niso povezane, bi lahko pokličete več nalog. Primer bi bila naloga, pri kateri želimo združiti in zmanjšati naše skripte in sestaviti tudi naš SASS. Tukaj je popoln 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', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', 'scripts', 'styles']);

Če tipkate gulp skripte v terminal, vse javascript datoteke v imeniku js bodo združene, izhod v glavni imenik, nato uglified in shranjene v glavni imenik.

Če tipkate gulp sass, vse vaše datoteke scss bodo prevedene in shranjene v imenik css.

Če tipkate gulp (privzeta naloga) skripte bo zagnana naloga, ki ji bo sledila vaša stilov nalogo.

The samodejni gutljaj Naloga spremlja več map za spremembe v datotekah SCSS in JS in opravi obe nalogi, ki smo ju definirali, če je zaznana sprememba.

Pregled

Uporaba Gulpa ni težavna, pravzaprav je veliko ljudi raje nad Gruntom zaradi preprostejše sintakse. Zapomnite si korake, ki jih morate izvesti pri ustvarjanju nove avtomatizacije:

• Išči vtičnik
• Namesti vtičnik
• Zahtevajte vtičnik v Gulpfile
• Uporabite skladnjo v dokumentaciji

Pet ukazov, ki so na voljo v programu Gulp (opravilo, zagon, uro, src, dest), so edini, ki jih morate vedeti, vsi dodatki tretjih oseb imajo veliko dokumentacijo. Spodaj je seznam nekaterih stvari, s katerimi lahko začnete zdaj:

• Optimizacija slik z optimizacijo slike-gulpa
• Ustvarjanje slikovnih duhov z gulp-sprite
• Združevanje datotek z gulp-concatom
• Zmanjševanje datotek z gulp-uglify
• Brisanje datotek z gulp-del
• Javascript linting z gulp-jslint
• JSON linting z gulp-jsonlint
• Autoprefix CSS z gulp-autoprefixerjem
• Poiščite in zamenjajte z uporabo gulp-frep
• Zmanjšajte CSS z gulp-minify-css