Nedavno Gulp. Dobivanje velike popularnosti i jasno je zašto. Brže je, ljepše i lakše od Grunt.. Morao sam često raditi s njim, ali uvijek sam preuzeo gotove rješenja i nisam u potpunosti shvatio kako je to sve uradio. Na ovaj vikend sam odlučio rastaviti i zatvoriti ovaj mali problem. Uzmi ovo i razgovaraj danas.

Šta je Gulp?

Gulp je prednji alat za montažu. Omogućuje vam automatizaciju ponavljajućih zadataka (montaže i miniranje CSS i JS datoteka, pokretanje testova, ponovno pokretanje pregledača i drugih). Stoga gulp ubrzava i optimizira proces web razvoja.

Instaliranje gulpa.

Instaliranje Gulp je dovoljno lako. Ako nešto ne radi, pišite u komentare ili razbolite vaš problem. Dakle, za instalaciju morate napraviti 3 koraka:

• Instalirajte Gulp Global
• Instalirajte Gulp kao devDevencije (ovisnosti za razvoj)
• Kreirajte gulpfile.js datoteku

Prvi korak je instaliranje gulp globalnog. Otvorite terminal i napišite:

nPM instalirajte --Glal Gulp

Nakon toga morate instalirati Gulp kao povdemende za svoj projekt. Obavezno imate datoteku paketa.json. Ako nije, onda ga kreirajte pisanjem u NPM INIT konzolu. Sada možete instalirati Gulp kao devDedendentecije:

nPM instalacija --Save-dev Gulp

Konačno, morate stvoriti gulpfile.js u korijenu vašeg projekta, koji će sadržavati vaše zadatke (zadatke). Kao intermedijarni korak, instalirat ćemo Gulp-Util dodatak. Da biste prikazali kako su dodaci instalirani:

nPM instalacija --save-dev gulp-util

Sada je došlo vrijeme napisati naš prvi zadatak. Otvorite novostvorenu datoteku Gulpfile.js i pišite na njega kako slijedi:

/ * Datoteka: gulpfile.js * / // sakupi sve naše dodatke var gulp \u003d zahtijevaju ("gulp"), gutil \u003d zahtijevaju ("gulp-util"); // stvoriti zadatak koji će se izvršiti prema zadanim postavkama Gulp. Zadatak ("zadano", funkcija () (povratak gutil. Log ("Gulp radi!"));

A sada moramo pokrenuti gulp u terminalu i vidjeti ćemo nešto slično tome:

\u003e Gulp [12:32:08] Korištenje Gulpfile ~ / projekti / gulp-scotch-io / gulpfile.js [12:32:08] Pokretanje "zadanog" ... [12:32:08] Gulp radi! [12:32:08] Završio "Default" nakon 1 ms

Pregled

Sam gulp je vrlo vaga na mogućnostima. Ali sve što morate staviti u zasebne dodatke. Oni zajedno sa Gulpom stvaraju čuda.

Gulp API je vrlo mali, a sadrži samo 4 funkcije veće narudžbe:

• gulp.task.
• gulp.src.
• gulp.Dest
• gulp.Watch

gulp.Task definira naše zadatke. Pozvani su argumenti ovisnosti (niz) i funkciju (glavne akcije). Ovisnosti možda nisu:

gulp. Zadatak ("MyTask", funkcija () (// učiniti nešto)); Gulp. Zadatak ("ovisetak", ["MyTask"], funkcija () ( // učiniti nešto nakon što će se izvršiti "Mytask" });

gulp.src označava datoteke koje želimo koristiti. Koristi. Pristup cijevi datotekama putem dodataka.

gulp.dest bodova u mapu u kojoj želimo sačuvati modificirane datoteke.

gulp.src i Gulp.Dest koristi se za jednostavnu kopiju datoteka:

gulp. Zadatak ("copyhtml", funkcija () () ( // Kopirajte sve HTML datoteke iz izvora / javnosti / Gulp. SRC ("Izvor / *. HTML"). Cijev (gulp. DEST ("javnost")); ));

U Gulpu je izgrađen sistem odgovora datoteke (gulp.Watch). Ovaj zadatak možete koristiti za pokretanje ostalih zadataka koje su vam potrebne prilikom promjene datoteka.

Želite li birati više bodova u brzini Google stranice? Ne znate kakav montaža "prednjeg"? Tada ćete ovdje biti zanimljivi.

Šta je čvor.js?

Đo.js je uobičajeni nazvan "sjeverni Javascript". Ova platforma omogućava vam pisanje programa pomoću JavaScript sintakse.

Postoje implementacije za Windows, Mac OS i Linux.

Komplet uključuje upravitelj paketa NPM.S kojim možete instalirati pakete.

Šta je Gulp?

Gulp je paket napisan na node.js, koji pomaže webmasterima da izgrade projekte na izgledu izgleda.

Da biste instalirali Gulp, morate koristiti naredbenu liniju.

NPM instalirajte Gulp.

Na kraju ovog članka postoji datoteka koja će pomoći prikupljanju tipičnog projekta.

U ovom primjeru, sa Gulp, učinit ćemo sljedeće:

• Automatski optimizirajte slike za web;
• Sakupite jedan minimalni stilovi iz precisatora (SASS, SCSS);
• Prikupite jednu minimalnu datoteku sa skripti.

Kako prikupiti prednji kraj pomoću Gulp-a?

Da bismo shvatili kako sve radi, ispitut ćemo sve u koracima.

Struktura se može pogledati u snimku zaslona.

• Mapa imovine - za izvore slike, stilove i skripte;
• Javna mapa - Rezultat skupštine projekta bit će smještena u njoj;
• gulpfile.js - datoteka koja opisuje logiku rada radnika;
• package.json je datoteka koja sadrži informacije o programima i dodacima koji se koriste za ispravan rad Gulp-a.

paket.json.

Sadržaj datoteke:

("Ime": "Gulp_project", "Verzija": "1.0.0", "Opis": "Primer", "Glavna": "Gulpfile.JS", "Skripte": ("Test": "Echo \\" GREŠKA: Nema navedenog testa \\ "&& izlaz 1"), "Autor": "Dmitriy Ilichev", "Licenca": "ISC", "Devdependencija": ("Gulp": "^ 3.9.0", "Gulp-CSSO ":" ^ 1.0.0 "," Gulp-Concat ":" ^ 2.6.0 "," Gulp-Uglify ":" ^ 1.2.0 "," Gulp-imagemin ":" ^ 2.3.0 "," Gulp -Sass ":" ^ 2.1.1 "))

Ova je datoteka jasna na sljedeći način:

• Naziv projekta Gulp_project, verzija i opis;
• Glavna datoteka je gulpfile.js;
• Autor projekta, licenca - sve to nije toliko važno i jednostavno ova polja mogu biti prazna;
• Zanimljiva točka je devdefindencije. Opisuje zavisnosti.

Datoteka se može uređivati \u200b\u200bu uobičajenom uređivaču teksta. Takođe se može kreirati za novi projekt naredbom NPM Int.

Na osnovu toga, čvorovi .js razumije da ćemo morati raditi:

• Gulp verzija 3.9.0 i viša za montažu;
• Gulp-CSSO verzija 1.0.0 i više - dodatak za miniranje stilova (CSS);
• Gulp-Concat verzija 2.6.0 i više - dodatak za lijepljenje više datoteka na jedan;
• Gulp-Uglify verzija 1.2.0 i više - dodatak za miniranje JavaScripta;
• Gulp-Imagemin verzija 2.3.0 i više - dodatak za optimizaciju slika;
• Gulp-Sass Verzija 2.1.1 i više - Dodatak da biste dobili CSS iz SASS-a (SCS).

Odlično! Nakon toga morate ga instalirati. To se radi iz komandne linije. Dok ste u mapi Projekta morate izvršiti naredbu:

NPM instalacija

Sve potrebne informacije bit će uzete iz paketa.json.

Nakon što se pojavi sva ta magija servisna mapa node_modules.

gulpfile.js.

Sadržaj datoteke:

Odredite varijable * * / var gulp \u003d zahtijevaju ("gulp"), // Prijavljena gulp JS Uglify \u003d zahtijevaju ("gulp-rulp"), // minifikacija JS CONCAT \u003d zahtijevaju ("gulp-concat") , // lijepljenje datoteka imagemin \u003d zahtijevaju ("gulp-imagemin"), // minifikacija CSSO \u003d zahtijevaju slike ("gulp-csso"), // minifikacija CSS sass \u003d zahtijevaju ("gulp-sass"); // Sass Connecting (SCS) u CSS / * * * Stvorite zadatke (ukusi) * * /// SASS zadatak. Pokreće Gulp Sass Command Gulp.Task ("Sass", funkcija () (gulp.src ("./ imovina / stilovi / stil.Scss") // datoteka koja procesi ("). Uključeno (" Greška ") , sass.logerror)) // Pretvori Sass u CSS .pipe (CSSO ()) // Minifixture CSS, dobiveno na prethodnom koraku. cijev (gulp./ javno / css / ")); // Rezultati Pišemo na navedenoj adresi)); // zadatak "JS". Pokreće Gulp JS Command Gulp.Task ("JS", funkcija () (gulp.src (["./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/bootstrap. Min .js "," ./assets/javascriptits/script.js "]) // Datoteke koje nastaju .pipe (Concat (" min.js ")) // Ljepivo sve js .pipe (Uglify ()) // Rezultati "Port" minifixture.pipe (Gulp.Dest ("./ javno / JS /")) // Rezultat mi pišemo na navedenoj adresi); // Problem "slike". Lansira "gulp slike" by Gulp.Task ("Slike", funkcija () (gulp.src (". Imovina / slike / ** / *") // Preuzimamo sve datoteke u mapi i njegove podmape. Imagemin ()) // Optimiziramo slike za web. Cijev (gulp.Dest ("./ javno / slike /") // rezultat mi pišemo na navedenoj adresi); // zadatak "sat". Pokreće se naredbom "Gulp Watch" / widira promjene u datotekama i automatski započinje drugi gulp.task zadatke ("Gleda", funkcija () (// prilikom promjene * .scs datoteka u mapi i podmapa stilova Pokrenite zadatak SASS Gulp. Gledajte ("./ imovina / stilovi / ** / *. SCSS", ["sass"]); // prilikom promjene mape *.js datoteke "Javascripts" i podmape upravljaju JS Gulp. Zadatak gledanja ("./ imovina / javascripts / ** / *. JS", ["JS"]); // Kada promijenite nijednu datoteku u mapi "Slike", pokrenite zadatak gulp.watch (") ./ Imovina / slike / ** / * ", [" slike "]);));

Glavni čip - u zadatku paziti. Nakon što ga jednom pokrenete, možete sigurno raditi sa izvorima, a projekt će se automatski prikupiti svaki put kada sačuvate datoteke sa uređivačem.

Na izlazu se spremamo za objavljivanje predloška na Internetu.

Zadaci se mogu lansirati odvojeno. Kao rezultat toga, u arhivi na kraju članka naći ćete sljedeće:

! Bilješka Da biste prvo raspakirali ovu arhivu, prvo ćete trebati izvršiti naredbu NPM Install. Ova mapa sadrži prilično veliki broj datoteka, a svaki put kada ih kopirate / zalijepite - gubljenje vremena.

U pritvoru

Postoji ogroman skup drugih korisnih dodataka. Na primjer, prekrasan jade predložak, koji ponekad ubrzava HTML kod, neko će možda trebati manje i tako dalje.

Predstavljeni primjer je samo platforma i predložak iz kojeg je moguće početi koristiti sve ove prekrasne čipove bez mnogo znanja.

Radni reneri i sustavi montaže visoko ubrzavaju rad, automatiziranje kompilacije, testiranja i drugih rutinskih zadataka. Kao i u bilo kojem drugom području, na ovom tržištu postoji snažna konkurencija. Do 2014. godine zadatak Ranner Grunt dominirao je među njima, ali kasnije, mali tim je odvojen od projekta, koji je odlučio da napravi alternativni alat, gulp, orijentisanu skupštinu projekta.

Da bismo vam pomogli da odlučite o odabiru, u okviru članka, razmislite o glavnim menadžerima zadataka:

• grunt.

a također dodirnuti druge načine i izrade metode.

Izgledajući malo unaprijed, recimo da koristimo Gulp u Waveaccess-u. Implementirati alat se pokazao vrlo jednostavnim: u porodici Jetbrains proizvodi (ideja, web oluje, vješta), što koristimo dugogodišnju dodatke imaju odlične dodatke za rad sa gulp / Grunt i NPM / nodejs.

Zadatak-menadžer vs. Skupština projekta: Koja je razlika?

Upravitelj zadataka - alat za automatizaciju zadataka. U konfiguraciji rečenica možete snimiti imena ovih zadataka; funkcija koja ih izvodi; Dodaci za ubrzavanje standardnih akcija, ali sami zadaci mogu biti proizvoljni. Na primjer:

• Zadaci za implementaciju (ZIP projekat, Projekt preuzimanja na udaljeni poslužitelj i TP)
• Zadaci skupštine projekta (minifikacija, optimizacija, verifikacijski kod za valjanost i TP)
• Zadaci za migraciju podataka itd.

Primjeri takvih alata - Grunt i Gulp.

Montažni sistem - Ovo je alat koji rješava samo jedan tipičan zadatak skupštine projekta na Java skriptu, koji uključuje:

• spajanje,
• provjera kodeksa za valjanost,
• Šifra i TD.

Slični alati uključuju WebPack, brokoli, ručak, pregledi i druge.

Svi slični fontend zadaci mogu se automatski izvesti pomoću drugih sredstava: Na primjer, koristeći NPM Run, o čemu ćemo razgovarati i u članku.

Primer

Razmislite o gulpskoj datoteci za sastavljanje projekta:

Const Gulp \u003d zahtijevaju ('gulp'); Const Coffee \u003d Zahtijeva ('gulp-kafa'); Const conct \u003d zahtijevati ('gulp-concat'); Const Uglify \u003d Zahtijeva ('gulp-rulp-rulp'); Const Imagemin \u003d zahtijevati ('gulp-imagemin'); Const SourCemaps \u003d Zahtijeva ('Gulp-SourCemaps'); Const Del \u003d zahtijevati ('del'); )

Ali skupština je poseban slučaj velikog tipičnog zadatka. Za Gulp možete napisati drugu konfiguraciju - recimo, za raspoređivanje:

Var gulp \u003d zahtijevaju ("gulp"); var zip \u003d zahtijevati ("gulp-zip"); var del \u003d zahtijevati ("del"); Var install \u003d zahtijevati ("gulp-instalacija"); var korake \u003d zahtijevaju ("Run-Sequence"); Var awslambda \u003d zahtijevati ("čvora-aw-lambda"); Gulp.Task ("Clean", funkcija (CB) (del (["./ dist", "./dist.zip"], CB);); Gulp.Task ("Kopiraj", funkcija () ("index.js") .pipe (Gulp.Dest ("dist /"));)); Gulp.Task ("čvorovi", funkcija ("./ paket.json") .pipe (Gulp.Dest ("dist /")) .pipe (instalacija: istina));); // očistiti sve AWS-SDK direktorije iz čvorova. Nemojte ih prenijeti otpremajući od lambda instance već // imati ga na globalnoj razini. Gulp.Task ("Clean-AWS-SDK", funkcija (povratni poziv) (DEL (["dist / node_modules / ** / AWS-SDK "], povratni poziv);)); gulp.task (" zip ", funkcija () (povratni gulp.src ([" dist / ** / * ","! ""! .pipe (zip ("dist.zip")) .pipe (gulp.Dest ("./"));)); gulp.task ("upload", funkcija (povrat) (AWSLAMBDA.Deploy (". / dist) .zip ", zahtijevaju (" ./ lambda-config.js "), povratni poziv);)); gulp.task (" raspoređivanje ", funkcija (povratni koraci"], ["CLEAN"] , ["čvorovi"], ["CLEAN-AWS-SDK"], [ZIP "], [" Upload "], povratni poziv);));

A mogu se opisati novim zadacima kao kombinacija postojećih:

Gulp.Task ('Deploy', Gulp.Series ('Clean', 'Copy', 'čvor-modovi', 'Clean-AWS-SDK', 'zip', 'upload');

To je razlika. Sada razmotrite osnovne alate.

gulp vs. Grunt.

Dakle, pred nama su dva zadatka Ranner: Gulp i Grunt. Oba koristi node.js i npm, a zadatke su stavili pomoću JavaScripta.

Na prvi pogled su slični,, međutim, Gulp ima nešto što ga čini pogodnijim za sastavljanje: Vještina je paralelna za obradu zadataka i kompaktnu konfiguraciju, lakonic API. Pogledajmo bliže njihovom principu rada.

Podaci o navoju

Imamo datoteku grantova koja čini Skupštinu i obradu CSS-a.

Može se vidjeti iz nje koje Grunt prilikom pokretanja svakog procesa:

otvara datoteku;

pokrenut proces;

štedi promjene;

zatvara prerađenu datoteku kako bi se spriječio sljedeći postupak u njemu;

zapisuje datoteku u konačnu mapu.

Odnosno, lanac uključuje stvaranje više vremenskih mapa i uštede intermedijarne datoteke:

Dodaci pišu različite autore. Svakom dodatku može raditi s datotekama, zaobilazeći, datoteke moraju biti dostavljene kao predmete. U Gulpu se ovaj zadatak izvodi virtualnim datotečnim sistemom Vynyl-FS. A Gulp odmah šalje datoteku na sljedeći postupak bez stvaranja privremenih datoteka i bez spremanja na disk.

Ista konfiguracija za Gulp već je kompaktnija:

Njegov ukupni radni mehanizam - streaming datoteke bez pisanja na disk:

Slijed izvršenja zadatka

Postoji još jedna razlika: Gulp prema zadanim asinhrono vrši stvari. U ovome postoje prednosti i nedostaje. U istoj konfiguracijskoj datoteci dajemo naredbu da prebrojite datoteke iz Div / * SCSS direktorija i pošaljete ih sassu.

Potoci šalju rezultat V.PIPE. Metoda. Cijev vam omogućuje da prikupite rezultat u međuspremniku u dijelovima, a kada je puna, odmah pošaljite podatke u potoku za čitanje, bez završne obrade direktorija.

Izvršenje sekvencijalnog zadatka čini gulp brz i moćnu, ali povremeno potrebu da i dalje obavljaju zadatke sinkrono kao u Grutkoj. Problem se može riješiti putem povratka potoka ili obećanja. Zadatak HABRÉ-a je detaljnije demontiran. Postoji alternativa na web mjestu NPM.JS

Ako koristite grupu, ali vas privlače striming podaci - isti vid-fS modul može se koristiti za implementaciju u Grunt-u.

Gulp Laconic API ima samo 5 metoda:

Zadatak (ime, fn). Registruje značajku nazvanu. Možete odrediti ovisnost o drugim zadacima ako ih prvo trebate izvršiti.

Trčanje (zadaci ...). Obavlja zadatke.

Gledajte (GLOB, FN). Izvodi funkciju ako datoteka na mjestu mjenjača Globa.

SRC (GLOB). Kao parametar uzima masku datoteke i vraća nit koji predstavlja ove datoteke. Tada se protok može prenijeti na ulazni dodatak.

Dest (mapa). Spremanje datoteka u navedenu mapu.

Posebno bih želio primijetiti prisustvo.Watch () u "izvornom" projektu API, jer praćenje stalnih promjena u datotekama je najvažnija komponenta skupštine. Ukratko o API-u omogućava fokusiranje na svoj glavni zadatak sastavljanja projekata.

Alternativa Gulp i Grunt

Uprkos popularnosti gulpja (više od 130 za preuzimanje dnevno) i Grunt (više od 86 za preuzimanje dnevno prema NPMJS.com), programeri vide u ovim sistemima i njihovim nedostacima: na primjer, ovisnost o priručnicima, nepotpunom Dokumentacija, neugodno uklanjanje pogrešaka. Alternativno, možete razmotriti sisteme za montažu projekata (kao što su brokoli i WebPack) ili NPM skripte.

Sistemi skupštine projekata

Razmotrite nekoliko alternativnih rješenja na platformi čvora.js. Da biste sastavili projekat, oni mogu zamijeniti gulp i grunt.

Ovaj sistem, poput Gulp-a, nastao kao natjecateljski zadatak-rani Grunt, ali programeri su ga u početku precizirali kao pomoćnik za izgradnju sa svim prednostima i nedostacima. Neće "razumjeti" bez postavki, da je * .js datoteka sa skriptama, * .coffee je kava; Njegova konfiguracija je kompaktnija. Međutim, bilo kakve proizvoljne akcije u fazi skupštine neće se moći obavezati.

Ovdje je config datoteke ručak. Napisano je u kavi (možete pisati i na JS):

Expocons.config \u003d Datoteke: Javascripts: "Javascripts / app.js": / ^ aplikacija / "Javascripts / vendor.js": / ^ (Bower_componenti | dobavljač: "Stylesheets / app.css" red : Nakon: ["dobavljač / stilovi / pomagači.css"] Predlošci: Joino: "Javascripts / app.js"

Ovdje želim obratiti pažnju na operatore za zajednički i narudžbu. Na nivou ručke konfiguracije čini se da morate prikupljati datoteke u željenom redoslijedu. Kao rezultat, konfiguracija traje 20-30 linija.

Brokula.

Indi-alat, koji je u razvoju. Njegovi programeri želeli su stvoriti konkurenciju već gulp.

U odnosu na Gulp, alat brokoli koristi ostale principe:

Skupština ubrzanja. Svaki dodatak provodi intermedijarnu keširanje rezultata montaže umjesto djelomičnih pobunjenih samo potrebnih datoteka.

Drveće umjesto datoteka. Gulp najbolje pretvara jednu datoteku u jedan finale. Zadani brokolli koristi samo drveće, a ne datoteke i oni ih pretvoru u druge drveće (degenerirana iz jedne verzije).

Trenutno se alat aktivno razvija, pojavljuju se novi dodaci, ali za ozbiljne projekte je prerano: dodaci nisu dovoljni.

WebPack je fleksibilan modularni modularni sistem montaže. Ima neobičnu sintaksu, ali sama prihvaća bilo kakve sintakse modula.

Razumijevanje da se morate takvi divovi natjecati kao Gulp, kreativci su odlučili olakšati naš život u razvoju velikih projekata. I dodao uslužni program:

Sposobnost automatskog izgradnje drva ovisnosti i resursa.

Udobni alati za implementaciju dinamičkog učitavanja.

Kompatibilnost sa praktički bilo kojim modulima (AMD, UMD, ES 2015, zajednički JS, moduli trećih strana na osnovu njih).

Kompatibilnost s preprocesorima (SASS, Babel, pismo kafe, tip skripte itd.).

Učitavanje uživo (asinhrona tehnologija pokretanja, a koja pregledač ažurira ne čitave stranice, već odvojene aplikacije).

Sposobnost dijeljenja koda i generirati puno datoteka snopa, izbjegavajući stvaranje jednog teškog paketa.js.

Sposobnost optimizacije koda.

Odvojeno možete primijetiti fleksibilan pristup ovisnosti. Modul može biti JS, CSS i HTML datoteka, pa čak i JPEG sa PNG-om. Možete koristiti potrebe ("myjsfile.js") i zahtijevati ("mycssfile.css"), podijeliti i koristiti dijelove artefakta.

Pročitajte više o mogućnostima, konfiguracijama alata, dodaci se mogu naći na Github-u, u prezentaciji s prednjim prednjim podacima: duboko uranjanje u WebPack.

nPM skripte

Zadaci montaže mogu se riješiti koristeći NPM skripte. Mnogi plaše ovu ideju: Nekoliko mogućnosti, skripte nisu dovoljno brze u usporedbi s gulazom ili WebPack-om. Ipak, ovi nedostaci su pretjerani.

NPM Skripcijske mogućnosti

NPM skripte rješavaju dosta zadataka. Na primjer, možete implementirati skripte zamke:

("Ime": "NPM-Scripts-Primer", "Verzija": "1.0.0", "Opis": "Scripts Scripts", "Scripts": ("Preduild": "Echo ja trčim prije scenarija" , "Build": "Cross-Env Node_ENV \u003d produkcija web tapack" "Postbuild": "Echo Ja trčim nakon skripte za izgradnju"))

Skripte će biti učitane u skladu s prefiksima: Predužiranje, na primjer, počinje prije izgradnje, jer ima prefiks pre. U skladu s tim, postBuild će biti učitani zadnji. Tim za izgradnju NPM-a pokrenut će ih u željenom redoslijedu.

Možete nazvati jednu skriptu od drugog za razgradnju složeni zadaci. Na primjer, ovdje predinguild zadatak naziva čist zadatak.

("Ime": "Primer" NPM-Scripts-"," Verzija ":" 1.0.0 "," Opis ":" NPM skripte Primer "," Scripts ": (" Clean ":" Rimraf ./dist && mkdir dist "," Preduild ":" NPM Run Clean "," Build ":" Cross-Env Node_env \u003d produkcija WebPack "))

Ako zadatak postane previše komplikovan, uvijek možete nazvati zasebnu datoteku:

("Ime": "NPM-Scripts-Primer", "Verzija": "1.0.0", "Opis": "NPM skripte Primer", "Scripts": ("Build": "čvor": "čvor": "čvorovi")))

Zbog gulpskog streaminga za zadatke montaže, postalo je mnogo pogodnije od Grunt. Ali može se implementirati kroz NPM. U Windows-u i Unixu, strujanje se vrši prema zadanim postavkama, bez spremanja srednjih datoteka.

Na primjer, u UNIX-u možete napraviti grepski sadržaj datoteke i poslati ga u novu datoteku:

Grep 'Moje ime' bigfile.txt\u003e linesthathavemyname.txt

Preusmjeravanje (\u003e) šalje željene žice u odredišnu datoteku. Zadatak se vrši bez spremanja intermedijarnih datoteka.

Ali postoje neugodnosti: ne možete ostaviti komentare u paketu.json. Izlaz izlaz može biti stvaranje kratkih skripti s razumljivim imenima usmjerenim na neki mali zadatak. Po detaljnije, pitanje zamjene tačke renera NPM skripte dobro osvijetljeno u članku engleskog jezika Zašto sam napustio gulp i Grunt za skripte NPM-a.

Ishod

Na tržištu se nalazi sjajni alati za konkurs za automatizaciju rutinskih zadataka (na primjer, gulp i grunt), kao i alate za automatizaciju skupštine projekta (webpad, brokula, Medusa, pregledi itd.).

Ako pogledate zadatke, tada je Gulp u odnosu na Grunt jednostavniji, shvaćeni i proizvesti: pobjeđuje zbog uštede na diskovnim operacijama. Ali Grunt ima više dodataka (na primjer, postoji ispitni dodatak). Zbog toga ostaje puno ventilatora.

Ako govorimo samo o Skupštini, onda Gulp ima sve prednosti preko Grušta:

Stream arhitektura za prijenos datoteka preko lanca koji pruža Vynyl-FS modul.

Prema zadanim postavkama - pogubljenje asinhronog zadatka.

Laconic API je samo 5 funkcija.

Istovremeno, WebPack Build je jednako zanimljiv alat. Pruža tehnologiju ponovnog učitavanja uživo koja ubrzava obnovu pretraživača. Ovo je ogroman plus: tehnologija štedi vrijeme da pritisnete tipku za ažuriranje koje programeri moraju stalno pritisnuti. Gulp također ima ponovno učitavanje uživo, ali WebPack je teško uporediti sa gulazom ili Grunt-om, jer se "oštri" samo pod izgradnji i ne zna "kako riješiti proizvoljne zadatke.

Sve ove odluke savršeno su integrirane sa porodicom proizvoda iz jetbrainsa, međutim, mi smo u Waveaccessu preferirali Grutkiju za dovoljno mogućnosti za obje pješačke slike i za frontend stručnjake.

Ako imate bilo kakvih pitanja i morate razviti web projekat, pišite nam na [Zaštićen e-poštom]

• Pocrtavati
• Grunt.
• Gulp.
• Trkači zadataka.

U ovom ćemo članku detaljno analizirati proces sastavljanja projekta projekta, koji je prošao kroz moj svakodnevni rad i vrlo lakši za rutinu.
Članak ne tvrdi da je u posljednjem trenutku istina, jer danas postoji veliki broj različitih montaža i pristupa Skupštini, a svi biraju ukus. Podijerit ću samo svoje misli na ovu temu i pokazati svoj tijek rada.

Koristit ćemo kolektor za gulp. U skladu s tim, čvor JS mora biti instaliran u sustavu. Instaliranje čvorova za određenu platformu nećemo uzeti u obzir, jer Goosle u par minuta.
I prvo će odgovoriti na pitanje - zašto gulp?
Više ili manje alternativa za rušenje imamo grund i ručak.
Kad sam tek počeo dolaziti u kolektore - na tržištu su već bili grunt i gutljaj. Prvi se pojavio ranije i na tome ima veću zajednicu i razne dodatke. Prema NPM-u:
Grunt - 11171 paket
Gulp - 4371 paket

Ali Grunt mi se činio kroz chur verbalno. I nakon što sam pročitao nekoliko članaka, u poređenju - preferirao sam Gulp za svoju jednostavnost i vidljivost.
Brunch je relativno mlad projekat, sa svim prednostima ovog pluseva i minusa. Gledam ga zanimljivim, ali još ga nisam koristio.

Nastavljamo:

Kreirajte mapu za naš projekt, na primjer "HABR". Otvorite ga u konzoli i izvršite naredbu

NPM init

Možete jednostavno pritisnuti ENTER na sva instalacijska pitanja, jer Sada nije u osnovi.
Kao rezultat toga, u mapi Projekta generiramo se datotekom paketa.json, otprilike takav sadržaj.

("Ime": "Verzija": "1.0.0", "Opis": "", "Glavna": "Indext.js", "Skripte": "Pogreška": "Echo" Greška: Nema navedenog testa "&& izlaz 1"), "Autor": "", "Licenca": "ISC")

Neke modifikacije iz nje prema našim potrebama:

("Ime": "Verzija": "1.0.0", "Opis": "" "" Autor ":" "," Licenca ":" ISC "," DevDedendencije ": (" Gulp ": "^ 3.8.1"))

u bloku za devedrence, pokazali smo da nam treba gulp i odmah ćemo propisati sve naše dodatke.

Dodaci:

Sa stilovima, ja radim isto kao i kod JS, ali samo umjesto rigim "A - koristim ugrađeni uvoz SCSS-a.
Naši glavni.SCSS će izgledati ovako:

/ * * Treća strana * / @impoport "CSS: ../../ bower_componene / normalizirano / normalizirano"; / * * Custom * / @impoport "partial / app";

Na taj se način pokaže da je lako kontrolirati redoslijed povezivanja stilova.
Provjerite naš zadatak, trčanje

Gulp Style: Build

Sakupljamo slike

Zadatak na slikama izgledaće ovako:

Gulp.Task ("Slika: Build", funkcija () (Gulp.SRC (Path.Src.img) // Odaberite naše slike. Cijev (imagemin ((// pjeva ih Progresivno: [(RemoveViewbox: FALSE )]], Upotreba :, Prepletena: True))) .pipe (Gulp.Dest (Path.Build.img)) // i bacanje u izgradnju .pipe (connect.reload ()););

Koristim zadane postavke slike, s izuzetkom isprepletenih. Pročitajte više o API ovog dodatka koji možete pročitati.
Ako stavimo sliku u SRC / IMG i pokrenemo naredbu

Ljubav slika: Build

dakle, vidjet ćemo našu optimizitu sliku u izgradnji. Takođe, Gulp će ljubazno pisati u konzoli koliko je prostora spremio za korisnike naše stranice :)

Fontovi

Sa fontovima, obično ne trebam vršiti nikakve manipulacije, ali sve što mislite paradigma "Radimo u SRC / i sakupljam u izgradnji /" - jednostavno kopiram datoteke iz SRC / Fontova i ubacim u izgradnju / fontove. Evo zadatka

Gulp.Task ("Fontovi: Build", funkcija () (gulp.src (Path.Src.Fonts) .pipe (Gulp.Dest (Path.Build.fonts))));

Sada definiramo Taq sa imenom "Build", što će pokrenuti sve što smo ovdje obračunali

Gulp.Task ("Build", ["HTML: Build", "JS: Build", "Stil: Build", "Fontovi: Build: Build"]);

Promjene datoteka

Da se ne popnemo stalno u konzoli, pitamo gulp svaki put kada promijenite neku datoteku da biste pokrenuli željeni zadatak. Da biste to učinili, napišite takav zadatak:

Gulp.task (sat ", funkcija () (sat (funkcija (događaj, cb) (Gulp.Start (" HTML: gradi ");)); sat (funkcija (događaj (" ° CL) : Graditi ");)); sat (, funkcija (događaj, cb) (gulp.start (" JS: Build ");)); satovi (, funkcija (funkcija (" funkcija "(" Slika ") ");))); Satovi (, funkcija (događaj, cb) (gulp.start (" fontovi: graditi ");)););

Razumijemo da ne bi trebalo biti problema. Jednostavno prolazimo kroz svoje staze definirane u varijabli puta, a u funkciji koja se naziva prilikom promjene datoteke - počnite počnite potreban zadatak.
Pokušajte trčati u konzoli

Gulp Watch.

i promijenite različite datoteke.
Pa, nije cool?)

Web server.

Da biste uživali u čudećoj LiverOad - moramo stvoriti lokalni web poslužitelj. Da biste to učinili, napišite sljedeći zadatak:

Gulp.task ("Webserver", funkcija () (Connect.Server ((Domaćin: server.host, luka: server.port, Liveload: True));));

Nema čak ničega komentirati. Jednostavno ćemo pokrenuti poslužitelj iz LIVELUAD-a na domaćinu i porta koji smo definirali u objektu poslužitelja.

Čišćenje

Ako dodate neku sliku, zatim pokrenite sliku: izgradite zadatak, a zatim uklonite sliku - ostat će u mapi izgradnje. Tako bi bilo prikladno - da je povremeno očisti. Stvoriti za ovaj jednostavan zadatak

Gulp.Task ("Clean", funkcija (CB) (Rimraf (Path.Clean, CB);));

Sad kad pokrenete naredbu

Gulp čist.

upravo izbrisao mapu izgradnje.

I na kraju, mala milost

Ovaj zadatak ne nosi kritičnu funkcionalnost, ali stvarno mi se sviđa :)

Gulp.task ("Openbrowser", funkcija () (opn ("http: //" + server.host + ":" + server.port + "/ gradi");));

Kada trebamo, mi ćemo to pokrenuti - i u našem pretraživaču automatski ćemo otvoriti karticu s našim projektom.
Cool :)

Završni sporazum

Posljednja stvar - definirat ćemo zadani zadatak, koji će pokrenuti cijelu skupštinu.

Gulp.Task ("Default", ["Build", "Webserver", "Gleda", "Openbrowser"]);

Konačno, vaš gulpfile.js će izgledati ovako nešto.
Sada nastupite u konzoli

I Voila :) Radni komad za vaš projekat je spreman i čeka vas.

Par riječi u zaključku

Ovaj je članak mislio kao način da se osvježi u sjećanju suptilnosti za izgradnju frontend projekata i olakšati prijenos ovog iskustva novim programerima. Ne morate koristiti ovu utjelovljenje na svojim projektima. Ima yeoman.io gdje ćete pronaći generatore gotovo za bilo kakve potrebe.
Napisao sam ovaj sakupljač za 2 may razloge.
- Volim da koristim rigger u svom hTML kod
- Gotovo u svim gradnjama koje sam upoznao - koristi se privremena mapa (obično.Tmp /) za snimanje srednjih rezultata sklopa. Ne sviđa mi se ovaj pristup i želio sam se riješiti privremenih mapa.
- I htio sam sve ovo iz kutije :)

Moja radna verzija kolektora možete preuzeti na mom Github-u.

Nadam se da je članak pokazao koristan za vas :)

P.S. Sve greške, nedostaci i plinovi - molim vas napišite u ličnom

Gentleman's Front-End Developer Set

Nije tajna da moderni programer prednjeg ekipe mora imati u naručju jedan od alata za montažu projekata kao što su Gulp. ili Grunt.. Sve dok neko vrijeme urušio je monopol u ovom pitanju, ali grupa za programere odvojena od Grutkija odlučila je stvoriti svoj lagani i brz gulp.

U ovom ćemo članku pripremiti početni paket za njegovo korištenje u budućim projektima.

Šta koristimo tehnologiju

• Softverska platforma: Čvor.js.
• CSS PRECOCORSOR: Stylus.
• Voditelj zadataka: Gulp.

Zašto menadžer zadataka sa prednjim menadžerom

Donedavno sam se pitao zašto trebam provesti vrijeme za konfiguriranje menadžera zadataka Config, ako se nosim sa izgledom izgled, dok nisam počeo koristiti CSS pre-procesore.

CSS Pre-procesori - stvarno zgodni i ubrzavaju stilove pisanja, ali sastavljajući kôd napisani na predrezoru u redovne CSS, a ne baš trivijalni zadatak koji se rješava jednim gumbom. Evo nas za spašavanje i dođe upravitelj zadataka. Pretvaranje koda se ne događa da pritiskom na tipku, sve se događa na mreži bez vašeg sudjelovanja (naravno, ako sve tačno konfigurirate).

Naravno, zadaci upravitelja zadataka idu daleko izvan procesa povezanih s konverzijom transformacije u čistim CSS-om. Kolektor projekta također se bavi ministarstvom, spajanjem, provjeravanjem koda za greške, sastavljanje slike u Spritesu, optimizaciju slika pod internetom itd. Samo kreirate u svom projektu mnogo logičnih datoteka odvojenih datoteka, koje se potom povoljno prikupljaju u jednom direktoriju već obrađenom i spremni za rad u pretraživaču. Ali malo je kasnije, a sada krenimo s pripremom.

Instalacija čvora.js.

Ako znate kako instalirati čvor.js u svoj sustav i koristiti ga, možete sigurno ići na sljedeću zaglavlje.

Želio bih odmah upozoriti da su sve opisane akcije relevantne za Mac OS X.ali općenito primjenjivo za druge Unix Sistemi. Razvoj kroz upravitelj zadataka i naredbenu liniju u Windows Pomalo teže i evo toga neće biti opisano. Međutim, ako i dalje koristite Windows i niste spremni da ga odbijete, mogu ponuditi verziju korištenja virtualne mašine s instaliranim Ubuntu.Koristim ovu opciju na svom kućnom sistemu, koji je uglavnom prilično zgodan.

Dakle, prvo što moramo preuzeti i instalirati paket čvora u vašem sistemu da radimo sa čvorom kroz konzolu. Idite na službenu stranicu čvora.js i preuzmite svježu stabilnu verziju za vaš sistem. Nakon instalacije, naredba čvora treba biti dostupna u vašem naredbenom retku. Da biste potvrdili da vaš čvor radi, unesite naredbu na naredbenom retku

u odgovoru je uspostavljena verzija instaliranog čvora.js. Ako je sve u redu, nastavite.

Struktura direktorija projekata

U našim projektima koristićemo jedinstvenu verziju strukture:

Razviti - Katalog razvoja korijena └─Start - Katalog projekta ├─Build - Bild prikupio upravitelj zadataka ├─Resource. - Sve izvorne datoteke za razvoj (.psd, itd.) ├─src. - Katalog razvoja │├─css. - Katalog razvoja stila ││├─Imaže. - Sve statičke slike ││├─Sprites. - Slika prikupljena u Spriteu ││├─partial - prilagođene datoteke stilovi │││├─mixins.styl - Prilagođeni misini │││└─styles.styl. - Prilagođeni stilovi ││├─vendor - Ostali vanjske datoteke stilovi ││└─styles.styl. - datoteka glavnog stila │├─fonts. - Katalog fontova │├─img. - Katalog dinamičke slike │├─js. - Katalog razvoja JavaScripta ││ ├ _ *. JS - bočne datoteke JS ││├─_main.js. - Glavni prilagođeni JS ││└─main.js. - Glavna JS datoteka │├─.htaccess. - Config za server │├─ * .html - Page Oznaka datoteka │├─pages.html. - Datoteka sa vezama za sve predložak stranice │├─index.html - datoteka marke index datoteke │└─include - Katalog datoteka za označavanje utikača │ └─ * .html - Priključne datoteke za označavanje (zaglavlje.HTML itd.) ├─package.json - NPM se batch manager config ├─gulpfile.js. - CONFIG GULP. ├─stylus.template.mustache. - maska \u200b\u200bza čitanje Spritesa ├─todo. - Todo list └─.Gitignore. - CONFIG ZA GIT

Instalacija

U konzoli pomoću naredbe CD-a idite na korijenski direktorij razvoja, stvorite katalog našeg MKDIR početnog projekta i pređite na njega.

Uspostavit ćemo našu strukturu za projekt putem konzole:

mKDIR Build Resource SRC SRC / CSS SRC / CSS / Slike / CSS / CSS / CSS / CSS / dobavljač src / JS src / predložak src / predložak / uključi src / img src / fontove

Kreirajte početne datoteke u strukturi projekta:

touch GulpFile.js stylus.template.mustavache .Gitignore src / .htaccess src / todo src / css / stiles.styl src / css / djelomični / stilovi.styl src / css / parcijalni / mixins.styl src / js / main.js SRC / JS / _Main.JS SRC / Predložak / stranica.HTML SRC / TEMPLATE / INDEX.HTML SRC / Predložak / Uključi / Header.HTML SRC / Predložak / uključuju / podnožje / footer.html

Kreirajte paket.json

sva skočna pitanja mogu se prisluškivati \u200b\u200bENTER-om, čvor će ih postaviti zadane vrijednosti ili ispuniti predložena polja.

.Gitignore.

Govoreći Gitu koja katalozi zanemarivanje i ne popunjavanje spremišta:

/ Node_modules / / Build / Resurs /

Direktorijum Node_modules pojavit će se kasnije nakon instaliranja dodataka i sadržavat će sve dodatke na projektu.

src / .htaccess.

Instaliranje dodatnog gzip kompresije i keširanja za server:

AddOutputFilterbytype Deflate Text / HTML Text / Obični tekst / XML Tekst / CSS Tekst / JavaScript aplikacija / JavaScript # Poslužite GZIP komprimirane CSS datoteke ako postoje # i klijent prihvaća Gzip. Rewritecond "% (http: encoding)" gzip "rewretecond"% (quater_filename) \\. GZ "-s rewriteule" ^ (. *) \\. CSS "" $ 1 \\ .css \\ .gz "Serving Gzip komprimirani JS datoteke ako postoje # i klijent prihvaća Gzip. Rewritecond "% (http: enccoding)" gzip "rewritecond"% (quat_filename) \\. GZ "-s rewretereule" ^ (. *) \\. Js "" $ 1 \\ .js \\ .gz "poslužite ispravan sadržaj Vrste i sprečavaju Mod_Deflate dvostruki gzip. Rewriteule "\\ .css \\ .gz $" "-" Rewritereule "\\ .js \\ .gz $" "-" # Poslužite ispravnu vrstu kodiranja. Zaglavlje dodaje sadržaj-kodiranje GZIP # prisilite punoljetnike za predmemoriju GZIPPIPL & # ne-GZIPL CSS / JS datoteke odvojeno. Zaglavlja dodatak varira se kodiranje Istectivective na expiresbytype aplikaciji / JavaScript "Pristup plus 1 mjesec" Expiresbytype Image / JPG "Pristup plus 1 mjesec" Expiresbytype Image / JPEG "Pristup plus 1 mjesec" Pristup plus 1 mjesec "Pristup PLG 1 Mjesec "Expiresbytype Text / CSS" Pristup plus 1 mjesec "

sRC / CSS / Styles.styl

Povežite datoteke u stilu korisnika u glavnu datoteku stila:

@impoport "Djelomični / stilovi"

Imajte na umu da za povezivanje.stil datoteke, proširenje nije navedeno, u skladu s semantikom koda za prerađivač stilusa. Da biste povezali stilove u drugom proširenju, za primjer.css, potreban je indikacija potonjeg.

URADITI.

Ova stranica sadrži todo razvojni list. Više o radu s ovom datotekom možete pročitati na platnoj stranici Plugin Page za dodatak za uzvišeni tekst.

Ovo podešavanje strukture je završena.

Instaliranje dodataka putem NPM serijskog menadžera

NODE.JS Prema zadanim postavkama uključuje NPM serijsko menadžer, u čijim se spremištima prikuplja puno dodataka s kojima moramo raditi.

Postavljanje gulp dodatka

Prvo morate instalirati gulp globalno (sa -G tipkom) na naš sistem

nPM instalirajte Gulp -G

Da li ti treba jednom, dalje globalna instalacija nije potrebno.

Sada morate instalirati Gulp lokalno u katalogu projekta

nPM instalirajte Gulp --Save-dev

Key --Save-dev sugerira da će se informacije o dodatku (nazivima u spremištu i njegovoj verziji) biti dodati u paket.json config i zapamti ga za ovaj projekt. Budući da ne pohranjujemo mapu za tešku težinu sa dodacima Node_modules, spremljenog u konfiguracijskim podacima o instaliranim dodacima omogućit će samo jedan NPM i naredbu za implementaciju svih potrebnih dodataka u projektu.

Za svaku ekipu postoje skraćenice, tako da naredba iznad možemo pisati u kraćem formatu

Ubuduće ćemo koristiti i skraćeni format timova.

Stylus dodatak za gulp

U našim projektima koristimo stigulator preceprocesor koji funkcionira fino i sastavljen na čvoru.

Instalirajte:

nPM i gulp-stylus -d

CSS prerada dodataka

Avtoprefikser - Automatski zamjenjuje prefikse -MS ----- MOZ - WebKit - u željenim svojstvima:

nPM i gulp-autoprefixer -D

Minifikacija CSS-a - Plugin minifina izlaz CSS datoteke eliminirajući ga iz nepotrebnih nedostataka i kartica:

nPM i Gulp-Minif-CSS -D

Dodaci za obradu slike

Udruženje slika u Spritesu - Više ne trebate provoditi vrijeme dragocjenog vremena da kombinirate sve slike u Spritesu, a zatim izračunate njihove koordinate, sve će to automatski napraviti ovaj dodatak za vas:

nPM i gulp.spritesmith -D

Dodaj u prethodno kreiranu stylus.template.mustache masku za izračunavanje položaja u Sprites-u:

((#Items)) $ ((naziv)) \u003d ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.idth)) ((px.idth)) ( px.heeght)) ((px.total_width)) ((px.total_height)) "((((escaped_image)))"; (/ Predmeti))

Dodajte posebne misene u misins.styl:

Širina širine ($ Sprite) $ spriteight ($ sprite) visina $ spriteposition ($ sprite) pozadina $ sprite $ spriteimage ($ sprite) pozadinsko-image url ($ sprite) sprite ($ sprite) ako! Utakmica ("lebde") , Selektor ()) &&! Utakmica ("Active", selektor ()) spriteimage ($ sprite) spritepozice ($ sprite) spritewidth ($ sprite) spriteheight ($ sprite)

Spojite misine i generiranu datoteku s koordinatama na glavni SRC / CSS / styes.styl stil datoteke:

@impoport "djelomični / sprite" @impoport "djelomični / misini"

Imajte na umu da se sprite moraju povezati sa korisničkim stilovima @import "djelomični / stilovi"

Optimizacija slike za Web - Plugin će automatski smanjiti sve nepotrebne informacije sa svojih slika i narezati ih do optimalne veličine, što će u nekim slučajevima omogućiti smanjenje opsega slika do 90%:

nPM i gulp-imagemin -d

Dodaci za obradu JavaScripta

Minifikacija JS. - Dodatak minifikuje vaš JS kôd smanjujući vrijeme preuzimanja:

nPM i gulp-uglify -d

Praćenje JS-a - Plugin će provjeriti vaš JS kôd za identifikaciju svih nedosljednosti i dovest će ih u konzolu:

npm i jshint gulp-jshint -d

HTML obrada dodataka

Povezane datoteke - Dodatak vam omogućuje pohranjivanje statičkih dijelova web stranice, poput zaglavlja, podnožja, u stranu itd. U odvojenim datotekama i povežite ih na bilo koji dio druge datoteke. Ne postoji više, u slučaju manjih promjena u zaglavlju, promijeniti desetine ili čak stotine html stranica predloška:

nPM i Gulp-Rigger -D

Dodatak je takođe kompatibilan sa JS.

Povežite korisnika JS na glavna JS SRC / JS / Main.JS Construction Software:

// \u003d _main.js.

Povežite se na index.html datoteke zaglavlje.html i footer.html

// \u003d uključeno / zaglavlje.html // \u003d uključuje / footer.html

Ostali dodaci

Liveload. - Dodatak vas eliminira da biste svaki put ponovo pokrenuli stranicu u pretraživaču da biste vidjeli promjene, sada se događa automatski dok sprema promijenjenu datoteku:

nPM i gulp-connect -d

Zaštitite gulp od polaska - Ponekad se to dogodi da Gulp može odletjeti iz režima promatranja u slučaju kritičnih grešaka (uglavnom zbog JS). Ovaj dodatak, ako je moguće, pokušava napustiti Gulp procese koji se mogu činiti:

nPM i gulp-vodoinstalater -D

Preimenujte datoteke - Najčešći rad sa imenima datoteka. Dodatak vam omogućuje u potpunosti preimenovanje datoteka, promijenite proširenje, dodajte prefikse i postfiks, na primjer, kako biste donijeli stil stila.styl u Style.min.css:

npm i gulp-rename -d

Sleener - Ponekad postoji potreba da se kompletira katalog direktorija izgradnje, postoji dodatak za spašavanje:

Sourcemap - Da bi nakon mirizacije nakon uklanjanja preglednika ostalo čitljivi putem pogrešaka u pregledniku, morate dodati izvor na miniFier datoteke:

nPM i gulp-sourcemaps -D

Proširene karakteristike satova. - Dodatak čini pametnim, sada ne prepisuje sve datoteke u izgradnji kada promijenite cijelu datoteku, specifična modificirana datoteka je prepisan, što štedi vrijeme i resurse:

npm i gulp-watch -d

Provjerite paket.json

Nakon svega instalirani dodaci, Provjerite naš paket.json. Mora imati oko sljedećeg tipa:

("Naziv": "Start", "Verzija": "1.0.0", "Opis": "Start Pack za razvijanje prednjeg kraja", "Autor": "Ivan Ivanov", "Licenca", "Mit", "Ovisnosti": (), "Devdependencija": ("Gulp": "Najnovije", "Gulp-Autoprefixer": "Najnovije", "Gulp-Connect": "Najnovije", "Najnovije", "JSHINT": "Najnovije", "Jshint-stilski": "Najnovije", "Gulp-jshint": "Najnovije", "Gulp-Minif-CSS": "Najnovije", "Najnovije", "Najnovije", "Gulp-preimenuj": "Najnovije", "Gulp-Rigger": "Najnovije", "Gulp-SourCemaps": "Najnovije", "GULP-Stylus": "Najnovije": "Najnovije", "Gulp-Watch": "Najnovije", "Gulp.spritesmith": "Najnovije", "Rimraf": "Najnovije")

Umjesto najnovije, u vašem slučaju će se pisati posebne verzije instaliranih dodataka. Jer Formiramo naš početni paket koji će se koristiti u raznim projektima, preporučuje se i zamijeniti vrijednosti verzija najnovije kako bi se uvijek uspostavljale trenutne verzije dodataka u projektu.

U mapi Projekta, direktorij node_modules mora se pojaviti i u kojoj se pohranjuju svi datoteke čvora. Svi željeni dodaci su instalirani, možete otići na Config Config.

Postavljanje gulpfile.js.

gulpfile.js. - Ovo je glavna konfiguracijska datoteka našeg zadatka upravitelja, u njemu je u njemu da ćemo pohraniti sve postavke i naredbe.

Sva ispunjavanja gulp-a spušta se na zadatak ( engleski zadatak). Zadatak je zasebna nezavisna funkcija nazvana. Svaki zadatak može biti uzrokovan odvojeno.

Besplatan režim sa modernim standardima

Prije prve datoteke povežite način kompatibilnosti samo savremenim standardima:

"Koristite strogu";

Pročitajte više o ovoj direktivi.

Inicijalizirajte dodatak

Dodaci su inicijalizirani sljedećim dizajnom:

var initplugin \u003d zahtijevati ("naziv dodatka");

U skladu s ovim dizajnom, inicijalizirate sve naše dodatke:

Var Gulp \u003d Zahtijeva ("Gulp"), // glavni plug gulp stylus \u003d zahtijevati ("gulp-stylus"), // Preprocesor Stylus prefikser \u003d zahtijeva ("Gulp-Autoprefixer"), // Prijem CSSmin \u003d zahtijevaju (" Gulp-Minif-CSS "), // minifikacija CSS Uglify \u003d zahtijevaju (" gulp-uglify "), // minifikacija JS jshint \u003d zahtijevaju (" gulp-jshint "), // pogreške praćenja u JS Rigger \u003d zahtijevaju (" gulp -Rigger "), // Rad s uključivanjem u HTML i JS Imagemin \u003d zahtijevaju (" gulp-imagemin "), // minimiziranje slika spritesmith \u003d zahtijevaju (" gulp.spritesmith "), // conjoin slike u Rimrafu \u003d zahtijevaju sprite ( "Rimraf"), // SourCemaps \u003d Zahtijeva ("Gulp-SourCemaps"), // SourCemaps Rename \u003d zahtijevaju ("Gulp-Rename"), // Preimenuj vodoinstalater \u003d zahtijevati datoteke ("Gulp-vodoinstalater"), / / Osigurač za zaustavljanje Galp Watch \u003d Zahtijeva ("Gulp-Watch"), // proširujući mogućnosti gledanja Connect \u003d Zahtijeva ("Gulp-Connect"); // Liveload.

Konstante staza

Za praktičnost odmah definiramo sve načine i maske:

Var Path \u003d (CURTUR: (// Ovdje ukazujemo gdje se spremiti nakon montažnih datoteka HTML: "Build /", JS: "Build / JS /", CSS: "Izgradnja / CSS / Images / ", fontovi:" Build / fontovi / ", htaccess:" Build / ", CondiptImg:" Build / img / ", Sprites:" src / css / images / ", spritscss:" src / css / covel / "), SRC: (// Načini gdje treba uzeti HTML:" SRC / predložak / *. HTML ", // sintaksa src / predložak / *. HTML kaže da Gulp uhvatimo sve datoteke sa Extension.html JS: "SRC / JS / [^ _] *. JS", // U stilovima i skriptima trebat će nam samo glavne datoteke JSHINT: "SRC / JS / *. JS", CSS: "SRC / CSS / Styles.styl", CSSVENDOR: "SRC / CSS / dobavljač\u003e *", // ako želimo biblioteke za odvojeno pohranu tog Rassenger img: "SRC / CSS / slike // sintaksa img / ** / 2 *. znači - uzmite sve datoteke svih ekstenzija iz mape i iz fontova ugniježđenih kataloga: "src / fontovi / montirani", sadržaj: "src / img / ** / 2 *", sprites: "src / css / Sprites / *. PNG ", htaccess:" src / .htaccess "), satovi: (// mi ćemo istaknuti za promjenu ka KIH datoteke Želimo gledati HTML: "SRC / predložak / ** / *. HTML", JS: "SRC / JS / ** / *. JS", CSS: "SRC / CSS / ** / 2 **" , IMG: "SRC / CSS / Images / ** / 7/27, Contmisment:" src / img / ** / *, fontovi: "src / fontovi / ** / 2 *", htaccess: "src / .htaccess ", Sprites:" SRC / CSS / Sprites / *. PNG "), čist:" ./build ", // direktorij koji se može očistiti vanputDir:" ./build "// izvorni korijenski direktorij za pokretanje ministra);

Imajte na umu da možemo koristiti maske na imenima:

• * .js. - Sve datoteke sa JS ekstenzijom
• [^ _] *. JS - Sve datoteke sa proširenjem JS-a, isključujući one počevši od donjeg podvlake
• *.* - Sve datoteke s bilo kojim proširenjem unutar trenutnog zvučnika
• / ** / * .html. - Sve datoteke sa ekstenzijom.HTML u trenutnim direktorijom i svim supsidijarskim direktorijima

Zadatak (zadaci)

Sada kad se sve konstante napisane, možete početi pisati Taskov. Svi zadaci imaju sljedeći dizajn:

Gulp.Task ("zadatak", funkcija () (// neke funkcije));

Mini-server i liveload

Prije svega, konfigurirat ćemo rad lokalnog poslužitelja i Liveload:

// Lokalni poslužitelj Za razvoj Gulp.Task ("Connect", funkcija () (Connect.Server ((// Pomiješajte korijenski poslužitelj Configs :, // Korijenski direktorij luke: 9999 server, // Koji će port koristiti LiverOad: True // inicijalizirati radnoj liveload));));

Najvjerovatnije ćete često morati raditi odjednom u nekoliko projekata. Poslužitelj vam omogućuje istovremeno pokretanje više poslužitelja, dovoljno za različite projekte za registraciju vašeg porta.

Bild HTML.

// Zadatak za izgradnju HTML Gulp.Task ("HTML: Build", funkcija () (gulp.src (Path.Src.html) // Odaberite datoteke na željenoj stazi. Cijev (rigim ()) // zvonjenje putem ringgera . Cijev (gulp.Dest) // Isporučite ih na izgradnju .pipe mape (Connect.Reload ()) // i ponovno pokrenite naš poslužitelj u ažuriranja);

Izgradite JS.

// Provjerite JS na greške i primijenite ih u gulp.task console ("Jshint: Build", funkcija () (povratni gulp.src (Path.Src.jshint) // Odaberite datoteke na željenoj stazi. Cijev (jshint (jshint ( )) // Pokrenite putem jshint .pipe (jshint.reporter ("jshint-stilski")); // stilski izlaz grešaka u konzoli)); // Billing Yavascript Gulp.Task ("JS: Build", funkcija () (gulp.src (Path.Src.js) // Pronađite našu glavnu datoteku.pipe (Rigger ()) // zvonjenje putem ring-a .init ()) // Inicijaliziranje izvora .pipe (Uglify ()) // pjevanje naših JS .pipe (SourCemaps.write ()) // repjutirane kartice. (preimenovanje (sufiks: "..min")) / Dodaj sufiks.min do izlazne datoteke.pipe (Gulp.Dest (Path.Build.js) // Istovar spremna datoteka u izgradnji .pipe (connect.reload ()) // i ponovno pokrenite poslužitelj);

Izgraditi sprite

Sve slike za kombiniranje u Sprites dodaju se do direktorija SRC / CSS / Sprites i nakon pokretanja preko Gulp-a postanite jednostruka slika. U Spritesu ne biste trebali dodavati logotipe i ploče bez jasnih veličina.

// Bilda Sprites Gulp.Task ("Sprites: Build", funkcija () (Var Spritedata \u003d Gulp.SRC (Path.Src.Sprites) // Odaberite odakle snimanje slika u Sprites (Spriteesmith ((Spriteesmith ((IMGNAME: " Sprite.png ", // Ime spreja CSSName:" sprite.styl ", // Stil naziv u kojem pohranjujete položaje slika u imgpath:" Images / sprite.png ", // way way wheels sprite cssformat:" Stylus "// Format u kojem obrađujem položaj CSETSTEMPLATE:" STYLUS.Template.mustache ", // File maska \u200b\u200bCSSvarmap: Funkcija (sprite.name \u003d" S-"+ sprite.Name // Naziv svakog sprita sastojat će se Naziv datoteke i dizajn "S-" na početku imena)))); sprittata.img.pipe (Gulp.Dest (Path.Build.sprites); // Put, gdje spremamo sliku Skidate. css.pipe (Gulp.Dest (Put .build.spritescs)); // Put na kojem spremamo stilove);

Za izlaz Sprite-a dovoljno je koristiti smjesu. Na primjer, za LOREM.PNG datoteku, uzorak iz Sprita izgledat će ovako:

Lorem Sprite ($ S-Lorem)

Sada će objekt sa klase.lorem preuzeti veličinu slike i same slike kao pozadinu.

Bild statičke slike

Statičke slike su slike koje se koriste u predlošku rasporeda.

// BuildIm statičke slike Gulp.Task ("Slika: Build", funkcija () (gulp.src (staza.src.c.img) // Odaberite naše slike. Cijev (imagemin ((// otpjeva ih Progresivno: True, // Compresion.jpg svgoplugins: [(RemoveViewbox: false)]], // SVG isprepleten: TRUE, //svg.gif OptimizationLevel: 3 // omjer kompresije od 0 do 7))) .pipe (gulp. img)) // Istovar u izgradnji .pipe (connect.reload ()) // ponovno pokrenuti server);

Bild dinamičke slike

Dinamičke slike su sadržajne slike koje će se mijenjati na web mjestu i na nivou predloška povezani su samo na demonstraciju. Na primjer, to mogu biti slike za vijesti itd.

// BuildIm Dynamic Images Gulp.Task ("ImagesContent: Build", funkcija () (gulp.src (Path.Src.ConEntimg) .pipe (imagemin ((// otrgnute ih Progresivno: TRUE, //page.jpg SVGOPLUGINS: [(RemoveViewbox: FALSE)]], // SVG isprepleten: True, //sPotion.gif OptimizationLevel: 3 // Omjer kompresije od 0 do 7))) .pipe (gulp.Build.ConEntimg)) // Istovar u Build .pipe (Connect.Reload ()) // Ponovo pokrenite poslužitelj));

Bildim CSS

// Građevinski CSS Gulp.Task ("CSSOWN: Build", funkcija () (gulp.src (Path.Src.CSS) // Odaberite naš glavni stil datoteke. Pipe (sourcemalis.init ()) // Inicijalizirajte soucemap. Cijev (stylus ((komprimira: TRUE ": Uključi CSS": True))) // Compile Stylus .pipe (prefikser: ["Zadnja 3", tj. 8 "," IE 7 "," IE 7 "," IE 7 "," IE 7 "," "]))) // Dodavanje prefiksa dobavljača.pipe (CSSmin ()) // surminem.pipe (sourcemaps.pipe ()) // propyash sourcipemap .pipe (preimenovanje (sufiks:" .min ")) / / Dodaj sufiks.min na izlaz datoteke.pipe (Gulp.Dest (Path.Build.css)) // Piće u izgradnji .pipe (Connect.Reload ()) // Ponovo pokrenite poslužitelj);

Odvojeni zadatak za vanjske stilove:

// Građevina VENDON CSS Gulp.Task ("CSSvendor: Build", funkcija () (gulp.src (Path.Src.CSvendor) // Skidamo dobavljač .pipe mape (SourCemaps.init ()) // Inicijalizirajte soucemap. cijev (cssmin ()) // surrem.pipe (sourcemaps.wite ()) // propyash sourcipemap .pipe (gulp.dest (staza.build.css)) // istovar u Build.pipe (Connect.Reload ()) // ponovno pokrenite poslužitelj));

Takođe dodajte zadatak za Bild General CSS:

// bildim css cijeli gulp.task ("CSS: Build", ["CSSOWN: Build", // "CSSvendor: Build"]);

Ako želite podnijeti vanjske stilove odvojeno od kuće i istovarite ih pojedinačnim datotekama koje su vam potrebne za raspisivanje linije "CSSvendor: Build"

Izgradite fontove

// bildim gulp.task fontovi ("fontovi: graditi", funkcija ().

Build.htaccess.

// bildim htaccess gulp.task ("Htaccess: Build", funkcija () (gulp.src (path.src.htaccess) .pipe (gulp.dest (staza.build.htaccess)) // Istovar u izgradnji);

Uobičajena gradnja

Da bismo se svakog dijela zasebno kupili, propaatski zadatak za opću gradnju:

// Bildim All Gulp.Task ("Build", ["HTML: Build", "JSSHINT: Build", "JS: Build", "Sprites: Build", "Fontovi: izgradnju", " Htaccess: Build, "Slika: Build", "ImagesContent: Build"]);

Čišćenje bilde

Ponekad je potrebno potpuno očistiti direktorij izgradnje. Ovdje će sljedeći zadatak doći na spašavanje:

// očistite bild mape gulp.task ("Clean", funkcija (CB) (Rimraf (Path.Clean, CB);));

Gledati ili praćenje promjena u stvarnom vremenu

Jedan od najvažnijih i korisne karakteristike Gulp je funkcija satova koja vam omogućuje pratiti u realnom vremenu sve promjene s datotekama proizvedenim i, ovisno o tome, izvedite određene korake:

// Pogledajte Gulp.Task ("Watch", funkcija () (// Bildim HTML u slučaju promjene sata (, funkcije (događaj, cb) (gulp.start ("HTML: graditi");); // Buildl Sprites u slučaju promjene sata (, funkcije (događaj, cb) (Gulp.Start ("Sprites: Build");)); // BuildIm kontekstualno uzorkovanje u slučaju promjene sata (, funkcije (događaj, CB) (gulp. Start ("ImagesContent: Build");)); // Bildim CSS u slučaju promjene sata (, funkcije (događaj, CB) (Gulp.Start ("CSS: graditi"); // provjeriti JS u Slučaj promjene sata (, ["jshint"]); // bildim js u slučaju promjene sata (, funkcija (događaj, cb) (gulp.start ("JS: izgradnja");); // bildim statičke slike U slučaju promjene sata (funkcija ("Slika: Build");)); // Bildim fontovi Ako promijenite sat (, funkciju (događaj, cb) (gulp.start ("fontovi: graditi"); / Bildim HTCCESS u slučaju promjene sata (, funkcije (događaj, cb) (gulp.start ("Htaccess: Build");));););

Zadane akcije

Zadane akcije - Koji će zadaci obavljati upravitelj zadataka prilikom ulaska u CULP naredbu u konzoli:

// Zadane akcije Gulp.Task ("Default", ["Build", "Gledaj", "Connect"]);

U našem slučaju, u odbrani, bit ćemo dovedeni u naš projekt, uključit ćemo režim sata i pokrenuti server.

Naredbe naredbenog retka

Sve Galpa naredbe za naredbenu liniju sastoje se od dva dijela. Ovo je direktno samo naziv gulp-a i naziv tablice. Evo popisa naredbi koji se primjenjuju na naš konfiguraciju:

• gulp - glavna naredba, pokreće zadatak zadatka
• gulp gradi - Bildim sve
• gulp Watch - Start Watch
• gulp Clean - Čišćenje kataloga izgradnje
• gulp Connect - Start Server
• gulp HTML: Build - HTML bild
• gulp Jshint: Build - Provjerite JS za greške
• gulp JS: Build - Build JS
• gulp Sprites: Build - Build Sprite
• zaljubljena slika: Build - Bild statičke slike
• gulp Imagecontent: Build - Bild dinamičke slike
• gulp CSSown: Build - CSS Custom Bild
• gulp CSSvendor: Build - Bild vanjski CSS
• gulp CSS: Build - Common CSS Bild
• gulp fontovi: Build - Bild fontovi
• gulp Htaccess: Build - Build.htaccess

U ovoj fazi gulpfile.js je završen.

Kopirajte početni paket u projekt

Za početak, prođite kroz konzolu u mapu u kojoj se razvijamo, poput CD-a razvija / primjer i kopiraj sve iz početnog paketa na naš projekt CP -A ~ / razvijanje / start /. ~ / Razvijanje / primjer /

Ova metoda kopiranja je najprikladnija, jer To će precizno kopirati sve, uključujući skrivene datoteke .Gitignore itd.

Zaključak

Upotreba ovaj vodič Pripremili smo početni paket za korištenje Gulp-a u svojim projektima za razvoj prednjeg kraja.

Takođe je ovaj paket dostupan na GitHub-u

Post Scriptum

Ovaj članak nije konačan i ažurirat će se ovisno o promjenama i poboljšanjima.