Darbo su „Gulp.js“ pradžia

„Gulp“ yra „JavaScript“ įrankis, leidžiantis automatizuoti darbo eigos bitus. Automatika gali tiesiog sutaupyti valandų per dieną. Nesvarbu, ar esate kūrėjas, ar dizaineris, kuriantis HTML wireframes dabar ir tada, raginu jus kasti.

Šiame straipsnyje apžvelgsime Gulp naudojimo pagrindus - nuo diegimo iki pagrindinės sintaksės ir keletą pavyzdžių. Iki straipsnio pabaigos turite sugebėti rasti, įdiegti ir naudoti paketus, kuriuos sukūrė kiti „Gulp“ sukompiliuoti SASS, optimizuoti vaizdus, ​​kurti sprites, susieti failus ir dar daugiau!

„Gulp“ diegimas

Nesijaudinkite, montavimas labai paprastas. Turėsime naudoti terminalą OSX ir Linux sistemose arba komandų eilutę, skirtą „Windows“. Aš nuo šiol nurodysiu jį kaip terminalą.

Atidarykite jį ir įveskite npm -v ir paspauskite enter. Jei matote rodomą versijos numerį, jau yra įrengtas mazgas - tai priklauso nuo „Gulp“.

Jei gausite “komanda nerasta” (arba panaši klaida), nueikite į „Node.js“ atsisiuntimų puslapį ir pasirinkite tinkamą sistemos paketą. Įdiegus komandą npm bus galima naudotis terminale.

Gulp diegimas yra taip pat lengva. Įterpkite šią komandą į terminalą:

npm įdiegti - global gulp

Tai įdiegs Gulp komandą, kuri bus prieinama visame pasaulyje jūsų sistemoje.

„Gulp To A“ pridėjimas

Dabar „Gulp“ yra įdiegta, tačiau mes turėsime ją pridėti prie kiekvieno projekto, kurį mums reikia, atskirai. Dabar sukurkite tuščią aplanką ir naršykite į savo terminalą. Naudodami šį aplanką, naudokite šią komandą:

npm įdiegti --save-dev gulp

Tai turėtų sukurti aplanką node_modules ir failą npm-debug.log. Tai naudoja „Gulp“, kad tai padarytų savo projektui, šiuo metu jums nereikia galvoti apie juos.

Priežastis, kodėl turime pridėti Gulp prie kiekvieno konkretaus projekto, yra tai, kad kiekvienas projektas turi skirtingus reikalavimus. Galima skambinti SASS, kita - mažiau. Galima naudoti „Coffeescript“, o kita - ne.

„Gulpfile“

„Gulpfile“ yra ta vieta, kurioje vyksta magija, kur jūs nustatote reikalingas automatizavimas ir kai norite, kad jie įvyktų. Sukurkite tuščią numatytą užduotį sukuriant pavadintą failą gulpfile.js ir įklijuokite šį kodą į jį.

var gulp = reikalauti („gulp“); gulp.task („numatytasis“, funkcija () // Šiuo metu nieko nedarome, greitai pridedame funkcionalumą);

Įrašius šį failą, galite grįžti į savo terminalą ir paleisti gulp komandą. „Gulp“ aptinka projektą, kuriame jis yra, ir vykdo numatytąjį užduotį - tai, ką sukūrėme. Turėtumėte pamatyti kažką panašaus:

Nieko iš tikrųjų čia neįvyksta, nes užduotis yra tuščia, bet ji veikia gerai. Dabar eikime su keliais tinkamais pavyzdžiais!

Failo kopijavimas

Tai yra nuobodu, aš pripažinsiu tiek daug, bet tai padės jums suprasti, kas vyksta lengvai.

Projekto aplanke sukurkite pavadintą failą to_copy.txt , ir pavadinimą dev. Eikime į mūsų „Gulpfile“ ir sukurkite naują pavadintą užduotį kopiją.

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

Pirmoje eilutėje apibrėžiama užduotis, kuri yra pavadinta kopija. Šioje srityje mes naudojame gulp.src, kad nurodytume, kuriuos failus taikome šia užduotimi - šiuo atveju tai yra vienas failas, pavadintas to_copy.txt.

Tuomet šiuos failus perkeliame į gulp.dest funkciją, kuri nurodo, kur norime įdėti šiuos failus - naudoju dev katalogą.

Grįžkite į savo terminalą ir tipą kopija jei norite atlikti šią užduotį, ji turi nukopijuoti nurodytą failą į nurodytą katalogą, panašiai:

Vamzdžio komanda yra „Gulp“ širdyje. Tai yra veiksmingas būdas perkelti duomenis į komandas. Komanda src nurodo failus, kurie yra nukreipiami į dest komandą. Sudėtingesnius scenarijus prieš įvesdami paskirties vietą, mes perkeliame savo failus į kitas komandas.

Taip pat turėtumėte žinoti, kad šaltinį galima pateikti kaip vieną failą arba kelis failus. Jei turime aplanką pavadinimu gamyba ir mes norime perkelti visus failus iš mūsų vystymąsi mes galime naudoti šią komandą:

gulp.task („kopija“, funkcija () return gulp.src („development / *“) .pipe (gulp.dest („gamyba“)););

Žvaigždės simbolis susilygins su bet kuriuo kataloge esančiu. Jūs taip pat galėtumėte suderinti visus failus, esančius visuose subkataloguose, ir atlikti visus kitus išgalvotas atitikmenis. Išsamesnės informacijos ieškokite „node-glob“ dokumentuose.

SASS sudarymas

Stiliaus sudarymas iš SASS failų yra bendra kūrėjų užduotis. Tai gali būti padaryta su „Gulp“ gana lengvai, tačiau turėsime pasiruošti. Be pagrindinių komandų, tokių kaip src, dest ir daugelis kitų, visos funkcijos pridedamos per trečiųjų šalių priedus. Štai kaip aš naudoju juos.

Aš rašau SASS Gulp į „Google“, pirmasis rezultatas paprastai yra tas, ko man reikia, turėtumėte rasti SASS paketo puslapį. Jis parodo, kaip ją įdiegti (npm įdiegti gulp-sass). Yra tikimybė, kad jums reikės naudoti sudo, kad jį įdiegtumėte kaip administratorių, todėl jis tikriausiai bus (sudo npm įdiegti gulp-sass) .

Kai tai atliksite, galite naudoti sintaksę, kurią paketas diktuoja, kad sukompiliuotų jūsų kodą. Norėdami tai padaryti, sukurkite failą, pavadintą styles.scss su šiuo turiniu:

$ pirminis: # ff9900; kūnas fonas: $ pirminis; 

Dabar sukurkite šią Gulp užduotį „Gulpfile“.

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

Prieš paleisdami komandą, nepamirškite „reikalauti“ paketo „Gulpfile“ viršuje:

var sass = reikalauti („gulp-sass“);

Kai paleisite gulp, visi failai su scss plėtiniu bus prijungti prie sass funkcijos, kuri juos konvertuos į CSS. Tada jie nukreipiami į paskirties funkciją, kuri juos įkelia į CSS aplanką.

Failų ir aplankų žiūrėjimas

Kol kas tai yra patogu, bet mums vis dar reikia įvesti komandą kiekvieną kartą mes norime paleisti užduotį, kuri nėra labai efektyvi, ypač kai kalbama apie stilių lentelės pakeitimus. „Gulp“ leidžia jums stebėti pakeitimų failus ir paleisti komandas automatiškai.

„Gulpfile“ sukurkite komandą, pavadintą automatizuoti kuri naudos stebėjimo komandą, kad peržiūrėtų pakeitimų rinkinį rinkmenai, ir paleisdama konkrečią komandą, kai keičiasi failas.

gulp.task ('automatizuoti', funkcija () gulp.watch ('*. scss', ['sass']););

Jei įvedate automatizuoti į terminalą, jis pradės ir baigs užduotį, tačiau jis nebus sugrįžęs į užklausą, nes jis stebi pokyčius. Mes nurodėme, kad mes norime žiūrėti visus scss failus šakniniame kataloge ir, jei jie keičiasi, norime paleisti sass komandą, kurią sukūrėme anksčiau.

Jei dabar pakeisite „style.scss“ failą, jį reikia automatiškai suskirstyti į „css“ failą.

Kelių užduočių vykdymas

Yra daug atvejų, kai galbūt norėsite atlikti kelias užduotis. Žiūrėdami savo „JavaScript“ aplanką, galbūt norėsite susikaupti du failus ir tęsti jų redagavimą. Tai galima padaryti dviem būdais.

Jei užduotys susijusios, man patinka grandinę. Geras pavyzdys būtų „JavaScript“ failų susiejimas ir redagavimas. Pirmiausia mes perkeliame savo failus į koncertinį veiksmą, tada juos perkeliame į gulp-uglify, tada naudokite paskirties funkciją, kad juos pateiktumėte.

Jei užduotys yra nesusijusios, galite skambinkite kelioms užduotims. Pavyzdys galėtų būti užduotis, kur norime susieti ir sutvarkyti mūsų scenarijus ir taip pat sudaryti mūsų SASS. Štai jis pilnas Gulpfile apie tai, kaip tai atrodytų.

var gulp = reikalauti („gulp“); var uglify = reikalauti („gulp-uglify“); var concat = reikalauti („gulp-concat“); var sass = reikalauti („gulp-sass“); gulp.task („scenarijai“, funkcija () gulp.src ('js / ** / *. js) .pipe (concat (' scripts.js ')) .pipe (gulp.dest ('. ') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('stiliai', funkcija () gulp.src ('/ *. scss) .pipe (sass ()) .pipe (gulp.dest (' ./ css '));); gulp.task ('automatizuoti', funkcija () gulp.watch (['*. scss', 'js / ** / *. js'], ['scenarijai', 'stiliai'));); gulp.task („numatytasis“, [„scenarijai“, „stiliai“));

Jei įvedate gulp scenarijai į terminalą, visi „JavaScript“ failai, esantys js kataloge, bus susieti, iškeliami į pagrindinį katalogą, tada bus užblokuoti ir išsaugoti pagrindiniame kataloge.

Jei įvedate gulp, visi jūsų scss failai bus sukompiliuoti ir išsaugoti css kataloge.

Jei įvedate gulpas (numatytoji užduotis), jūsų scenarijus užduotis bus vykdoma, po to - jūsų stilių užduotis.

The automatizuoti užduotis stebi kelis aplankus, skirtus mūsų scss ir js failų pakeitimams, ir atliksime abi nustatytas užduotis, jei aptinkamas pakeitimas..

Apžvalga

Naudojant „Gulp“ nėra sunku, daugeliui žmonių tai patinka „Grunt“, nes ji yra paprastesnė. Prisiminkite veiksmus, kurių reikia imtis kuriant naują automatiką:

• Ieškoti papildinio
• Įdiekite papildinį
• Reikalauti „Gulpfile“ papildinio
• Naudokite sintaksę dokumentacijoje

Penkios komandos, kurios yra prieinamos „Gulp“ (užduotis, paleisti, žiūrėti, src, dest), yra vienintelės, kurias reikia žinoti, visi trečiųjų šalių priedai turi puikią dokumentaciją. Štai keletas dalykų, kuriuos naudoju dabar, sąrašas:

• Vaizdų optimizavimas naudojant „gulp-image“ optimizavimą
• Vaizdo spritų kūrimas su gulp-sprite
• Failų sujungimas su gulp-concat
• Failų redagavimas su gulp-uglify
• Failų trynimas su gulp-del
• „Javascript“ įdėjimas su gulp-jslint
• JSON įdėjimas su gulp-jsonlint
• Autoprefix CSS su gulp-autoprefixer
• Ieškokite ir pakeiskite naudodami gulp-frep
• Sumažinkite CSS su gulp-minify-css