Gulp.jsiga alustamine

Gulp on Javascript-põhine tööriist, mis võimaldab automatiseerida töövoo bitti. Automatiseerimine võib sõna otseses mõttes säästa tunde päevas. Olenemata sellest, kas olete arendaja või disainer, kes loovad nüüd HTML-i traatraamid, siis julgustan teid kaevama.

Käesolevas artiklis vaatleme Gulp'i kasutamise põhialuseid - alates installimisest põhilisele süntaksile ja paar näidet. Selle artikli lõpuks peaksite saama leidke, installige ja kasutage pakette, mida teised on loonud Gulpile SASSi koostamiseks, piltide optimeerimiseks, spritide loomiseks, failide ühendamiseks jne!

Gulp'i installimine

Ärge muretsege, paigaldamine on väga lihtne. Peame kasutama terminali OSXis ja Linuxis või käsureale Windowsi jaoks. Ma räägin sellest edaspidi kui Terminal.

Avage see üles ja tippige npm -v ja vajutage enter. Kui näete kuvatud versiooni numbrit, olete juba sõlminud sõlme - see sõltub Gulpist.

Kui sa saad “käsklust ei leitud” (või sarnane viga), peate allapoole Node.js-i allalaadimise lehele ja valige oma süsteemi jaoks sobiv pakett. Kui installitud on npm käsk terminalis saadaval.

Gulp'i paigaldamine on sama lihtne. Kleepige järgmine käsk terminalisse:

npm paigaldada - global gulp

See paigaldab Gulp'i käsu, mis on teie süsteemis ülemaailmselt kättesaadav.

Gulp To A projekti lisamine

Gulp on nüüd installitud, kuid peame selle iga projekti jaoks eraldi lisama. Looge nüüd tühi kaust ja navigeerige sellele oma terminalis. Projekti kaustas olles kasutage järgmist käsku:

npm paigaldamine --save-dev gulp

See peaks looma oma projekti kaustas node_modules kausta ja npm-debug.log faili. Neid kasutab Gulp oma projekti tegemiseks, sa ei pea selles etapis mõtlema.

Põhjus, miks peame lisama Gulpi igale konkreetsele projektile, on see igal projektil on erinevad nõuded. Üks võib kutsuda SASS-i, teine ​​vähemaks. Võib kasutada Coffeescriptit, teine ​​ei pruugi ja nii edasi.

Gulpfile

Gulpfile on koht, kus maagia juhtub, see on koht, kus te defineerite vajalikud automatiseerimised ja kui soovite neid juhtuda. Looge tühi vaikimisi ülesanne, luues fail nimega gulpfile.js ja kleepige sellele järgmine kood.

var gulp = vaja ('gulp'); gulp.task ('vaikimisi', funktsioon () // See ei tee praegu midagi, lisame varsti funktsioonid);

Kui see fail on salvestatud, võite minna tagasi oma terminali ja käivitada eraldi käskluse. Gulp tuvastab, milline projekt on ja milline on vaikimisi ülesanne - see, mille me just lõime. Sa peaksid nägema midagi sellist:

Siin ei juhtu midagi, sest ülesanne on tühi, kuid see töötab hästi. Nüüd lähme koos mõnede sobivate näidetega!

Faili kopeerimine

See on igav, ma tunnistan nii palju, kuid see aitab teil mõista, mis toimub lihtsalt.

Looge oma projekti kaustas nimega fail to_copy.txt , ja kaust dev. Lähme meie Gulpfile'i ja looge uus ülesanne koopia.

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

Esimene rida määratleb ülesandeks, mida nimetatakse koopiaks. Selles me kasutame gulp.src, et täpsustada, milliseid faile me selle ülesandega sihtime - sellisel juhul on tegemist ühe nimega failiga to_copy.txt.

Seejärel suuname need failid funktsioonile gulp.dest, mis määrab, kuhu me need failid tahame panna - olen kasutanud dev kataloogi.

Mine tagasi oma terminali ja tüübi juurde koopia selle ülesande täitmiseks peaks see kopeerima määratud faili määratud kataloogi, nagu see:

Toru käsk on Gulpi keskmes. See on tõhus viis andmete teisaldamiseks käsude vahel. Käsk src määrab failid, mis suunatakse dest käsule. Keerukamate stsenaariumide puhul suunaksime enne sihtkoha määramist meie failid teistesse käskudesse.

Peaksite ka teadma, et allikat saab anda ühe failina või mitme failina. Kui meil on kaust nimega tootmine ja me tahame kõik failid meie arengut kausta, võiksime kasutada järgmist käsku:

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

Tähemärk vastab kataloogi sisule. Sa võid ka sobitada kõik failid kõigis alamkataloogides ja teha igasuguseid muid väljamõeldud sobivusi. Vaadake lisateabe saamiseks node-glob dokumentatsiooni.

SASSi koostamine

Arendajatele on tavaline ülesanne koostada SASS-failidest stiilitabel. Seda saab teha Gulpiga üsna lihtsalt, peame siiski mõned ettevalmistused tegema. Lisaks põhilistele käskudele, nagu src, dest ja paljud teised, lisatakse kõik funktsioonid kolmandate isikute lisandite kaudu. Siin on, kuidas ma neid kasutan.

Ma kirjutan SASS Gulp Google'i, esimene tulemus on tavaliselt see, mida ma vajan, peaksite leidma SASS paketi lehekülje. See näitab, kuidas seda installida (npm install gulp-sass). Võimalik, et peate kasutama sudot, et installida see administraatorina, nii et see on tõenäoliselt (sudo npm install gulp-sass) .

Kui olete seda teinud, saate kasutada paketi dikteeritavat süntaksit. Selleks looge fail nimega styles.scss, mille sisu on järgmine:

$ primaarne: # ff9900; keha taust: $ primaarne; 

Nüüd looge Gulpfailis järgmine Gulp-ülesanne.

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

Enne käsu käivitamist ärge unustage „nõuda” Gulpfile'i ülaosas olevat paketti:

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

Kui käivitate ärritama, kõik scss laiendiga failid suunatakse sass-funktsioonile, mis muudab need css-ks. Seejärel suunatakse need sihtfunktsiooni, mis asetab need css kausta.

Failide ja kaustade vaatamine

Siiani on see kõik mugav, kuid me peame siiski sisestama käsu iga kord me tahame käivitada ülesande, mis ei ole väga tõhus, eriti stiilitabeli muutuste puhul. Gulp võimaldab teil vaadata failide muutusi ja käske käitada automaatselt.

Looge Gulpfailis käsk nimega automatiseerida mis kasutab jälgimise käsku, et vaadata failide komplekti muudatuste jaoks, ja käivitada konkreetne käsk, kui fail muutub.

gulp.task ('automatiseeri', funktsioon () gulp.watch ('*. scss', ['sass']););

Kui sisestate gulp automate terminali, see käivitab ja lõpetab ülesande, kuid see ei pöördu tagasi, sest see jälgib muutusi. Oleme täpsustanud, et tahame vaadata kõiki scs-faile juurkataloogis ja kui nad muutuvad, tahame käivitada sass-käsu, mille oleme varem seadistanud.

Kui muudate nüüd oma style.scss faili, siis tuleb see css-failis automaatselt css-failile kompileerida.

Mitme töö tegemine

On mitmeid olukordi, kus võiksite teha mitu ülesannet. Kui vaatate oma javascripti kausta, võite kompileerida kaks faili ja seejärel jätkata nende kaevandamist. Seda saab teha kahel viisil.

Kui ülesanded on omavahel seotud, siis mulle meeldib ahelas. Heaks näiteks oleks javascript-failide ühendamine ja minimeerimine. Kõigepealt torustame oma failid concat-toimingule, seejärel pannakse need failidele üles, seejärel kasutage nende väljastamiseks sihtfunktsiooni.

Kui ülesanded ei ole omavahel seotud, võite seda teha helistage mitmele ülesandele. Näiteks võiks olla ülesanne, kus me tahame oma skripte kokku lüüa ja minimeerida ning koostada ka meie SASS. Siin on ta täielik Gulpfile sellest, kuidas see näeks.

var gulp = vaja ('gulp'); var uglify = vaja ('gulp-uglify'); var concat = vaja ('gulp-concat'); var sass = vaja ('gulp-sass'); gulp.task ('skriptid', funktsioon () gulp.src ('js / ** / .js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('stiilid', funktsioon () gulp.src ('/ *. scss' .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automatiseeri', funktsioon () gulp.watch (['*. scss', 'js / ** / *. js'], ['skriptid', 'stiilid'));); gulp.task ('vaikimisi', ['skriptid', 'stiilid'));

Kui sisestate gulp-skriptid terminalisse koondatakse kõik js kataloogi sees olevad javascripti failid, väljastatakse põhikataloogi, seejärel hüppatakse ja salvestatakse põhikataloogi.

Kui sisestate ärritama, kõik teie scs-failid kompileeritakse ja salvestatakse css-kataloogi.

Kui sisestate lööma (vaikimisi ülesanne), teie skriptid ülesanne, millele järgneb teie stiilid ülesanne.

The gulp automate ülesanne jälgib mitut kausta muudatuste tegemiseks meie scss ja js failides ning täidab mõlemad defineeritud ülesanded, kui muudatus tuvastatakse.

Ülevaade

Gulpi kasutamine ei ole keeruline, sest paljud inimesed eelistavad seda Gruntiga selle lihtsama süntaksi tõttu. Pidage meeles uue automaatika loomisel võetavaid samme:

• Otsi pluginat
• Installige plugin
• Nõua oma Gulpfile'i pluginat
• Kasutage dokumentatsioonis süntaksit

Viis käsku, mis on saadaval Gulpis (ülesanne, jooksmine, vaatamine, src, dest), on ainsad, mida pead teadma, kõigil kolmandatel isikutel on suurepärane dokumentatsioon. Siin on nimekiri mõnedest kasutatavatest asjadest, mida võiksite kohe alustada.

• Gulp-image-optimeerimisega piltide optimeerimine
• Kujutise spritide loomine gulp-sprite'iga
• Failide ühendamine gulp-concat'iga
• Failide redigeerimine gulp-uglify abil
• Failide kustutamine gulp-del abil
• Javascript linting koos gulp-jslintiga
• JSON lintimine gulp-jsonlintiga
• Automaatrežiim CSS-i automaatrežiimis gulp-autoprefixeriga
• Otsige ja asendage gulp-frep abil
• Minimeerige CSS gulp-minify-css-ga