Ugodan projekt Frontend. Naredbe naredbe

U ovom članku detaljno ćemo analizirati proces okupljanja projekta projekta, koji je naišao na moj svakodnevni rad i vrlo lakše za rutinu.
Članak ne tvrdi da je istina u posljednjoj instanci, budući da danas postoji veliki broj različitih sklopova i pristupa Skupštini, a svatko odabire okus. Podijelit ću samo svoje misli o ovoj temi i pokazati svoj radni tok.

Koristit ćemo kolektor za gutljaja. Prema tome, čvor JS mora biti instaliran u sustav. Instaliranje čvorova za određenu platformu nećemo uzeti u obzir, jer To je dušo za nekoliko minuta.
I prvo će odgovoriti na pitanje - zašto gulp?
Od manje ili više alternativa za rušenje imamo gnus i ručak.
Kad sam upravo počeo dolaziti na kolektore - već je bilo grudno i gulp na tržištu. Prvi se pojavio ranije i na tome ima veću zajednicu i razne dodatke. Prema NPM:
Grunt - 11171 paket
Gulp - 4371 paket

Ali guntu mi se činilo kroz kurve verbalne. Nakon čitanja nekoliko članaka, u usporedbi - preferiram gutljaj zbog svoje jednostavnosti i vidljivosti.
Brunch je relativno mladi projekt, sa svim prednostima tih plusa i minusa. Gledam ga s interesom, ali još ga nisam koristio.

Nastavimo:

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

Npm init

Možete jednostavno pritisnuti Enter na sve pitanja instalatera, jer Sada to nije u osnovi.
Kao rezultat toga, u mapi projekta generiramo datotečni paket.json, približno takav sadržaj.

("Ime": "HABR", "Verzija": "1.0.0", "Opis": "", "Glavni": "index.js", "Skripte": ("Test": "Echo" Greška: Nije naveden test "&& izlaz 1"), "Autor": "", "Licenca": "ISC")

Neke izmjene pod našim potrebama:

("Ime": "Habr", "verzija": "1.0.0", "Opis": "", "Autor": "", "licenca": "ISC", "DEVDependencije": ("Gulp": "^ 3.8.1"))

u bloku DevDepends, naznačili smo da trebamo gulp i odmah ćemo propisati sve naše dodatke.

Dodaci:

S stilovima, radim isto kao i sa JS, ali samo umjesto Rigger "A - koristim ugrađeni uvoz SCS-a.
Naš main.scss će izgledati ovako:

/ * * Treća strana * / @import "CSS: ../../ bower_components / normalizirati.css / normalizirati.css"; / * * Custom * / @import "parcijalne / app";

Na taj način ispada da je lako kontrolirati redoslijed spojenih stilova.
Provjerite naš zadatak, trčanje

Gulp stil: graditi

Prikupljamo slike

Zadatak na slikama izgledat će ovako:

Gulp.task ("slika: izgraditi", funkcija () (gulp.src (path.src.img) // Odaberite naše slike. Cijev (imagemin (// Pjevanje Progressive: TRUE, SVGOPLUGINS: [(RemoveViewbox: False ), Koristite:, isprepleteni: istinito))) .Pipe (Gulp.Dest (Path.Build.img)) // i baciti ugradnju .Pipe (Connect.Reload ());)));

Koristim zadane postavke imagemina, uz iznimku isprepletenih. Pročitajte više o API ovog dodatka možete čitati.
Sada, ako stavimo neku sliku u SRC / IMG i pokrenete naredbu

Gulp slika: graditi

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

Fontovi

S fontovima, obično ne moram provoditi bilo kakve manipulacije, ali što god vam milujete paradigmu "radimo u srcu / i prikupljamo u izgradnji /" - jednostavno kopiram datoteke iz SRC / fontova i umetnite u izgradnju / fontove. Ovdje zadatak

Gulp.task ("fontovi: izgraditi", funkcija () (gulp.src (path.src.fonts) .pipe (Gulp.Dest (Put.Build.fonts))));

Sada ćemo definirati Taq s imenom "Build", koji će pokrenuti sve što smo ovdje objavili

Gulp.task ("Build", ["HTML: Build", "JS: Build", "Stil: Build", "Krsti: Build", "Slika: Build"]);

Promjene datoteke

Kako se ne mogu popeti na cijelo vrijeme u konzoli, zamolimo gutljaj svaki put kada promijenite neke datoteke za pokretanje željenog zadatka. Da biste to učinili, napišite takav zadatak:

Gulp.task (watch ", funkcija () (sat (funkcija (događaj, cb) (gulp.start (" HTML: graditi ");)); gledati (, funkcija (događaj, cb) (gulp.start (" stil " : Build ");)); sat (funkcija (događaj, cb) (gulp.start (" JS: graditi ");)); sat (funkcija (događaj, cb) (gulp.start (" slika: graditi "););); Sat (funkcija (događaj, cb) (gulp.start (" fontovi: graditi ");));));

Razumijemo da ne bi trebalo biti problema. Jednostavno prolazimo kroz naše putove definirane u varijabli put, au funkciji koja se zove prilikom promjene datoteke - molimo pokretanje potrebnog zadatka.
Pokušajte trčati u konzoli

Gulp Watch.

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

Web poslužitelj.

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

Gulp.task ("Webserver", funkcija () (connect.server ((host: Server.Host, Port: Server.port, Liveload: TRUE));)););););););

Ne postoji još ništa za komentar. Mi ćemo jednostavno započeti poslužitelj od ligoda na hostu i portu koji smo definirali u objektu poslužitelja.

Čišćenje

Ako dodate neku sliku, pokrenite sliku: Izgradite zadatak i zatim uklonite sliku - ostat će u mapi za izgradnju. Tako bi bilo zgodno - povremeno ga očistiti. Stvoriti za ovaj jednostavan zadatak

Gulp.task ("čist", funkcija (CB) (RIMRAF (put.Clean, CB););

Sada kada pokrenete naredbu

Gulp čist.

samo je izbrisao mapu za izgradnju.

I konačno, mala milost

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

Gulp.task ("OpenBrowser", funkcija () (OPN ("Http: //" + Server.Host + ":" + Server.Port + "/ Build");));

Kada trebamo, pokrenut ćemo ga - i u našem pregledniku će automatski otvoriti karticu s našim projektom.
Cool :)

Konačni sporazum

Posljednja stvar - definirat ćemo zadani zadatak koji će pokrenuti cijeli skup.

Gulp.task ("zadano", ["Build", "WebServer", "Watch", "OpenBrowser"]);

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

I voila :) radni komad za vaš projekt je spreman i čeka vas.

Par riječi u zaključku

Ovaj članak je pomislio kao način osvježavanja u sjećanje na suptilnost za izgradnju frontendrskih projekata i olakšati prijenos tog iskustva na nove programere. Ne morate koristiti ovu izvedbu na svojim projektima. Postoji yeoman.io gdje ćete naći generatore gotovo za bilo kakve potrebe.
Napisao sam ovaj kolektor za 2 razloga.
- Volim koristiti rigger u vašem HTML kodu
- Gotovo u svim gradim da sam se susreo - koristi se privremena mapa (obično.TMP /) za snimanje međuprostora sklopa. Ne sviđa mi se ovaj pristup i htio sam se riješiti privremenih mapa.
- I htjela sam mi sve to iz kutije :)

Moja radna verzija kolektora možete preuzeti na moj Github.

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

p.s. Sve pogreške, nedostaci i plićaci - molimo napišite u osobnom

Ovaj priručnik sadrži opis korisnih i najčešće korištenih front-end alati. Možete saznati proces instaliranja alata i glavnih točaka rada s njima.

NPM.

Uvod

U procesu razvoja projekta često je potrebno dodati knjižnice i dodatke trećih strana. Kao rezultat toga, programer mora tražiti željenu ovisnost, preuzeti, raspakirati arhivu i kopirati datoteke na projekt. Batch menadžeri pomoći će automatizirati ovaj rutinski rad.

Upravitelj serije - softver koji vam omogućuje upravljanje instalacijskim procesom, izbrisati, konfigurirati i ažurirati razne komponente.

Dodavanje knjižnica trećih strana koristeći serijskog upravitelja zamijenjen je par naredbi na terminalu.

Jedan od skupnih menadžera koji se koriste u frontend-projektima je NPM.

nPM. (Upravitelj paketa) - upravitelj paketa, koji je dio node.js. Koristi se za preuzimanje paketa iz NPM Cloud Server ili za preuzimanje paketa na ovaj poslužitelj.

Službena stranica

Početak rada

Da biste instalirali NPM, morate preuzeti i instalirati Nodejs (NPM će biti automatski instaliran): https://nodejs.org/en/.

Upotreba

Instaliranje paketa

Paket se zove jedna ili više JavaScript datoteka, koje su neke vrste knjižnice ili alata. Da biste instalirali paket pomoću NPM-a, morate izvršiti sljedeću naredbu:

NPM instalacija<название пакета>

Korištena je globalna instalacija paketa -G. Nakon instalacije, paket zajedno s izvorom je u direktoriju node_modules /.

Provjerite verziju

Da biste provjerili trenutnu verziju NPM-a, morate izvršiti naredbu:

Konfiguriranje konfiguracije datoteka

Datoteka paket.json. Sadrži informacije o vašoj aplikaciji: ime, verziju, ovisnost i slično. Bilo koji direktorij u kojem se ova datoteka tumači kao stde.js-paket.

Za izradu datoteke paket.json. Morate izvršiti naredbu:

Npm init

Nakon toga, morat ćete popuniti neke informacije o projektu.

Ova datoteka će se pohraniti imena i verzije svih paketa potrebnih u projektu. Uz pomoć tima nPM instalacija Možete učitati sve pakete u paket.json..

Da biste instalirali neki paket i automatsko spremanje u datoteku paketa.json, koristi se naredba:

NPM instalacija<название пакета> --save-dev.

Alternative

Pređa.

Značajka

Stvaranje web-poslužitelja i automatske pokretanja stranice u pregledniku prilikom spremanja kôda, praćenje promjena u projektnim datotekama.
Koristeći razne JavaScript, CSS i HTML preprocesnici (cofript, manje, SASS, STYLUS, Žade, itd.).
Minifikacija CSS i JS koda, kao i optimizacije i uspostavljanja pojedinih projektnih datoteka na jedan.
Automatsko stvaranje prefiksa dobavljača (konzole na CSS naslov Svojstva koja dodaju proizvođače preglednika za ne-standardne nekretnine) za CSS.
Upravljanje datotekama i mapama unutar projekta - stvaranje, brisanje, preimenovanje.
Pokretanje i praćenje izvršenja naredbi vanjskih operativnog sustava.
Rad sa slikama - kompresija, stvaranje Sprites, mijenjanje veličine (PNG, JPG, SVG, itd.).
Brisanje (slanje na vanjski poslužitelj) projekta na FTP, SFTP, itd.
Povezivanje i korištenje u projektu je neograničeno velike količine node.js i Gulp komunalnih usluga, programa i dodataka.
Stvaranje različitih projektnih kartica i automatizacije drugih ručnog rada.

Početak rada

Nodejs i NPM-ovi moraju biti ugrađeni u sustav.

Korak 1: Za GULPJS Global Instalacija pomoću MANAGE MANAGE NPM, morate izvršiti naredbu:

NPM Instalirajte gulp -G

Korak 2: Morate ga instalirati za aplikaciju:

NPM Instalacija --save-dev gulp

Učitavanje dodatnih dodataka koje se mogu koristiti pri sastavljanju projekta, također se provodi pomoću NPM-a na sljedećoj naredbi:

NPM instalacija<название плагина> --save-dev.

Svi instalirani dodaci su u direktoriju node_modules /.

Upotreba

Korak 1: Prvo morate povezati gutljaj. na projekt. Da biste to učinili u datoteci gulpfile.js. Prepisujemo liniju:

Var gulp \u003d zahtijevaju ("gulp");

Funkcija zahtijevaju () Omogućuje povezivanje dodataka iz mape node_modules /.

Korak 2: Pomoću varijable Gutljaj. Možete stvoriti ukus za sastavljanje projekta:

Gulp.task ("examppletask", funkcija () ());

Metoda zadatak Uzima dva parametra: naziv i funkcija s okusom tijela.
Ova uputa se već može izvršiti. Da biste to učinili, registrira se u konzoli:

Gulp Exampletask.

Glavni timovi

U nastavku je složeniji primjer upute:

Gulp.task ("examppletask", funkcija () ("izvor-datoteke") .pipe (plugin ()) .pipe (gulp.dest ("mapa");));

Analizirat ćemo naredbe korištene u ovom primjeru:

gulp.src. - Uzorak izvornih datoteka datoteka za obradu pomoću dodatka;
.pipe (plugin ()) - Nazovite guulp dodatak za obradu datoteke;
.Pipe (Gulp.Dest ('Folder')) - Izlaz datoteke rezultata u odredišnoj mapi.

Maske

GULP.SRC funkcija prihvaća masku datoteka kao parametar. Primjeri maski:

./ - Trenutni direktorij;
../ - imenik roditelja;
js / index.js. - index.js datoteku u js mapi;
js / *. js - sve datoteke s nastavkom JS-a u JS mapi;
js / ** / *. js - sve datoteke s JS proširenjem u CUS mapi iu svojim poddirektorima;
! JS / *. JS - Isključenje datoteka s JS nastavkom u ulaganju JS mape.

Niti

Korištenje tokova je jedna od najvažnijih prednosti Gulpjsa.

Teme omogućuju prijenos nekih podataka sekvencijalno iz jedne funkcije na drugi, od kojih svaki obavlja neke radnje s tim podacima.

Funkcija gulp.src () Stvara protok objekata koji predstavljaju datoteke koje se prenose kao parametar. Sljedeći s značajkama cIJEV Transporter se sastavlja pomoću koji se prolazi protok objekata. Ova se funkcija prenosi kao parametar dodatak, koji na bilo koji način obrađuje protok objekata.

Ispod je primjer korištenja potoka. U ovom primjeru koriste se dodaci trećih strana. gulp-jshint. i gulp-concit, koji se moraju instalirati i povezati gulpfile.js.

Funkcija gulp.src. Uzima datoteke na masku js / *. js, Pokreće jshint i prikazuje rezultat. Zatim čini concatenate datoteke i na kraju sprema rezultirajuću datoteku nakon concatenation u direktoriju dist /.

Gulp.task ("primjer", funkcija () (povratak gulp.src ("js / *. Js") .Pipe (jshint ()) .Pipe (Convex.js ")) .Pipe (Gulp.Dest ("Dist"));););

Dodaci trećih strana

Razmotrite primjer korištenja dodataka trećih strana. Da biste to učinili, stvorite Upute za priključak JS datoteke:

Korak 1: Prvo trebate spojiti naredbu dodatka zahtijevati:

Var koncat \u003d zahtijevaju ("gulp-koncat");

Korak 2: Tada trebate stvoriti ukusne za concatenate datoteke s JS proširenjem koje se nalazi u JS / Imenik. Na kraju, rezultirajuća datoteka nalazi se u Disti / JS direktorij:

Gulp.Task ("Koncit", funkcija () (Retur Gulp.src ("JS / *. JS") .Pipe (Convex.js ")) .Pipe (Gulp.Dest (" Disting / JS ") );););););

Gulp koncat.

dodatne informacije

Također možete odrediti zadatak koji će uzrokovati izvršenje drugih zadataka.

Gulp.task ("graditi", ["HTML", "CSS"]);

Osim toga, postoji metoda gledati. Promatrati promjene u datotekama:

Gulp.watch ("maska \u200b\u200bdatoteka za promatranje", ["Ime okusa, koji je dovršen prilikom mijenjanja datoteka"];

U gulpfile.js. Možete stvoriti zadani zadatak:

Gulp.task ("zadani", ["Task1", \u200b\u200b"TASK2"]);

Ovaj zadatak počinje od konzole od strane tima:

Glavni dodaci

gulp-AutoPrefixer. - Automatski stavlja prefikse na CSS svojstva;
gulp-preglednik-sinkronizacija - stvara vezu, nakon čega će se stranica automatski ažurirati kada se klijent ili čak poslužiteljske datoteke mijenjaju;
gulp-Unks - Optimizacija CSS datoteka. Plugin analizira HTML kod i pronalazi sve neiskorištene i duplicirane stilove;
gulp-CSSO. - CSS ministar;
gulp-htmlmin. - jednostavna HTML ministarska;
gulp-htmlhint. - HTML validator;
gulp-uglify - JavaScript ministar;
gulp-Concit. - koncentriranje datoteka;
gulp-WebServer. - omogućuje vam stvaranje i pokretanje poslužitelja;
gulp-jshint. - Provjerite kvalitetni JS kod;
gulp-jasmin. - testovi jasmina;
gulp-JSDOC. - Generiranje JSDOC dokumentacije.

Uz puni popis gulp-dodataka možete čitati vezu:
http://gulpjs.com/plugins/

Alternative

Gruntjs.

Značajka

Podrška asinhrono testiranje.
Sposobnost postavljanja promatrača (promatrača) na različite objekte.

Početak rada

Da biste spojili Jasmine u svoj projekt, morate preuzeti knjižnicu i povezati sljedeće datoteke na glavnu HTML stranicu:

lib / jasmin - * / jasmin.js - sam FremymVork;
lib / jasmin - * / jasmine-html.js - registracija rezultata u obliku HTML-a;
lib / jasmin - * / jasmin.css - pojavu rezultata ispitivanja ispitivanja;
Spekunner.html - datoteku koja treba otvoriti u pregledniku za početak ispitivanja.

Sinkronizacija s alatima

Gulpjs.

Jasmine se može povezati s sklopom projekta na Gulpjs:

Korak 1: Prvo, morate instalirati gulp-jasmin plugin:

Npm instalirajte gulp-jasmin --save-dev

Korak 2: Tada trebate spojiti dodatak u datoteci za montažu i stvoriti tanak za početak testa:

Var jasmine \u003d zahtijevaju ("Gulp-jasmin"); gulp.task ("jasmin", funkcija () (gulp.src ("ispitne datoteke") .pipe (jasmin ());));

Karmajs.

(Na kraju članka je opisan rad s ovim alatom).

Za povezivanje Jasmine u Karmaji trebate:

Korak 1: Instalirajte Karmaj:

Npm instalacija -G karma-cli

Korak 2: Ugradite dodatke potrebne za pokretanje ispitivanja napisanih na Jasminu u preglednicima Chrome i Phantomjs:

NPM Instalirajte karmu-Jasmine Karma-Chrome-Launcher karma-fantomjs-bacač

Korak 3: Instalirajte samog jasmina:

Npm instalacija -G jasmina

Korak 4: U karma konfiguracijskoj datoteci spojite dodatke i registrirajte put do testova.

Upotreba

Ključne riječi

opisati - definicija testa;
to - definicija testa;
očekujte - definiranje očekivanja koje se provjeravaju u testu.

Opišite i ima značajke dva parametara: prvo - ime, drugi - funkcija s kodom.

Primjer osnovnog testa

Opišite ("naziv ekipe za biranje", funkcija () ("ispitno ime", funkcija () (očekujte (2 + 2) .tobe (4);)));));

Metode za provjeru rezultata

očekivati \u200b\u200b(). Tobe () - Provjera varijabli na jednakosti ('\u003d\u003d\u003d');
očekivati \u200b\u200b(). Ne.tobe () - Provjera varijabli na jednakosti ('! \u003d\u003d');
očekivati \u200b\u200b(). Toequal () - provjeriti jednakost varijabli i objekata, uključujući sadržaj;
očekivati \u200b\u200b(). toberefined () - Provjerite postoji li postojanje;
očekujte (). to nebendenefined () - Provjerite nepostojanje;
očekivati \u200b\u200b(). Tobenull () - Provjerite vrijednost varijable na null;
očekivati \u200b\u200b(). Tobetrathy () - provjera za istinu;
očekivati \u200b\u200b(). Tobefalsy () - Provjerite jesu li lažnost;
očekujte (). Tobleenshan () - potvrda o činjenici da vrijednost treba biti manja od;
očekivati \u200b\u200b(). Tobegraaterthan () - potvrda o činjenici da vrijednost treba biti više nego;
očekivati \u200b\u200b(). Tobecloseto () - potvrda o činjenici da vrijednost treba biti blizu broja;
očekivati \u200b\u200b(). Totch () - provjerite usklađenost s regularnim izrazom;
očekivati \u200b\u200b(). tocontain () - Provjerite sadržaj u nizu;
očekivati \u200b\u200b(). Tothrow () - provjeravanje poziva iznimke;
očekivati \u200b\u200b(). TohaveEenced () - Provjera poziva funkcije.

Dodatne funkcije

Kako bi se izbjeglo kopiranje bilo koje logike koja se koristi u testovima, koriste se funkcije. befoach / afteeach., Oni počinju u skladu s tim prije / nakon svakog testa.

Funkcije se koriste za testiranje asinkronih poziva radi. i čekanja.

radi. - usvaja asinkronu funkciju za izvršenje;
čekanja - uzima tri parametra: prvi je funkcija koja se mora vratiti Pravi Ako asinkroni poziv u funkciji radi. Provedena je, drugi je poruka o pogrešci, treći - čeka u milisekundima.

Opisati ("primjer testiranja asinkronog poziva", funkciju () (var rezultat \u003d 0; funkcija asyncfunc () (rješenje + 2;), 500);) to ("ispitno ime", funkcija () ) (asyncfunc ();)); Waitsfor (funkcija () () rezultat \u003d\u003d\u003d 2;), "vrijednost se nije promijenila", 2000);));)

Promatrači

Mogućnost praćenja poziva funkcije se vrši Špijunirati., Ova funkcija uzima dva parametra: prvi je objekt za koji se naziva funkcija, drugi je naziv funkcije koja se mora pratiti.

Ako ("provjeravanje funkcije poziva", funkcija () (Spyon (Spyon (primjer (primjerak (primjerak, na primjer); primjerak (); očekujte (primjerak) .tohavebeencalled (););););

Prilikom testiranja pomoću Špijunirati. Broj poziva možete pratiti, njihove parametre i svaki poziv zasebno.

Da biste stvorili funkciju bez implementacije, možete koristiti createspy., Funkcija createspy. Uzima naziv funkcije identifikacije.

Ako ("provjeravanje funkcije poziva", funkcija () (var primjer \u003d creampy ("primjer"); primjer ("param1", "param2"); očekivati \u200b\u200b(primjer.dentify) .tohaveyencalledwith ("param1", "param2", "param2", "param2" ); Očekivati \u200b\u200b(primjer.calls.dgnetljive duljine) .Tequal (1);));

Stvaranje objekta utikača provodi se pomoću createspyobj., Kao parametri createspyobj. Uzima ime objekta i niz žica, što je popis metoda utikača.

Alternative

Moka.

Upotreba

Generiranje dokumentacije izrađuje se od komentara izvornog koda.

U ovom članku detaljno ćemo analizirati proces okupljanja prednjeg dijela projekta, koji je prošao u mom svakodnevnom radu i vrlo lakše za rutinu. Isto ne tvrdi da u posljednjem slučaju, od danas postoji Veliki broj različitih sklopova i pristupa Skupštini, a svatko odabire okus. Podijelit ću samo svoje misli o ovoj temi i pokazati svoj radni tok.

Koristit ćemo kolektor za gutljaja. Prema tome, čvor JS mora biti instaliran u sustav. Instaliranje čvorova za određenu platformu nećemo uzeti u obzir, jer To je dušo za nekoliko minuta. A za početak ću odgovoriti na pitanje - zašto gulp? Više ili manje alternative za rušenje, imamo groznice i rusti. Kad sam upravo počeo dolaziti na kolektore - već je bio grudnjak i gulp na tržištu. Prvi se pojavio ranije i na tome ima veću zajednicu i razne dodatke. Prema NPM: Grunt - 11171 Packetgulp - 4371 paket

Ali guntu mi se činilo kroz kurve verbalne. A nakon čitanja nekoliko usporedbi, preferiram gutljaj zbog svoje jednostavnosti i vizualnosti. Brunch je relativno mladi projekt, sa svim prednostima i minusima. Gledam ga s interesom, ali još ga nisam koristio.

Nastavimo: Stvorite mapu za naš projekt, na primjer "HABR". Otvorit ću ga u konzolu i izvršiti naredbu NPM Init Možete jednostavno pritisnuti Enter na sve instalater pitanja, jer Sada to nije u osnovi. Na kraju, u mapi s projektom, generiramo datoteku paketa.json, približno takvom sadržaju ("Naziv": "HABR", "verzija": "1.0.0", "Opis": "," Glavni ":" Index.js "," Skripte ": (" Test ":" Echo "Error: Nema testa navedenog" && izlaz 1 ")," Autor ":", ":" ISC ") malo je moguće mijenjati pod našim potrebama: (" Ime ":" HABR "," verzija ":" 1.0.0 "," Opis ":", "Autor": "," licenca ":" ISC "," Devdepends ": (" Gulp »:" ^ 3.8.1 ")) U bloku DevDepends, naveli smo da nam treba gulp i odmah ćemo propisati sve naše dodatke. Dnevnici: Gulp-AutoPrefixer - automatski dodaje dobavljača Prefiksi na CSS svojstva (prije nekoliko godina bih ubio za takve Tulzu :)) Gulp-CSMmin - potreban za komprimiranje CSS CODEGULP-Connect - s ovim dodatkom, lako možemo implementirati lokalni dev poslužitelj s Blackjack i Liveloadgulp-ImageMin - Za komprimiranje imagemin-pngquant slike - dodatak na prethodni dodatak, za rad s PNGGULP-uglify - će stisnuti naš JSGULP -Sass - sastaviti našu SCSS Kodan Holivar zbog mene jako dugo sam radio u svom radu. Bio sam jako impresioniran ovim preprocesorom za njegovu brzinu i jednostavnost studija. Čak je i izvješće o njemu u jednom Rostov Hakatonu. A posebno, u ovom izvješću, nisam govorio vrlo laskav o sassu. Ali vrijeme je prošlo, postao sam stariji i mudriji :) i sada sam se pridružio ovom preprocesoru. Susso nezadovoljstvo je da ne pišem u Ruby. I kada kompilirati SASS / SCSS kod - bilo je potrebno povući u projekt Ruby, s potrebnim zavojima - da sam bio vrlo tužan. Ali sve se promijenilo s dolaskom takvih stvari kao što je Libsass. Ovo je c / c + luka kompajlera za SASS. Gulp-Sass dodatak koristi. Sada možemo koristiti SASS u izvornom čvoru okruženju - da sam beskrajno zadovoljan. Gulp-Sourcemaps - Uzmite za generiranje CSS soundScemaps, koji će nam pomoći kada je ispravljanje pogrešaka Codegulp-Rigger samo ubojica perja. Dodatak vam omogućuje da uvezete jednu datoteku u drugi jednostavan dizajn // \u003d footer.html i ovaj liniju kada se kompajliranje zamijeni sa sadržajem datoteke podnožja datoteke. Htmlgulp-Watch Datoteka - bit će potrebno za praćenje promjena datoteka. Znam da je u Gulpu ugrađeni sat, ali imam neke probleme s njim, posebno, nije vidio novo stvorene datoteke i morao ga ponovno pokrenuti. Ovaj dodatak je riješio problem (nadam se u sljedećim verzijama Gulp to će ispraviti) .Opn - mala sestra, omogućujući vam da otvorite neku vezu u timu preglednika iz čvora jsrumraf - RM -RF za noda sve naše dodatke u paketu. json

("Ime": "HABR", "verzija": "1.0.0", "Opis": "," Autor ":", "licenca": "ISC", "DEVDependencije": ("Gulp": "^ 3.8.1 "," Gulp-AutoPrefixer ":" * "," Gulp-Connect ":" * "," Gulp-CSMmin ":" * "," Gulp-Imager ":" * "," Gulp-Sass " : "*", "Gulp-Sourcemaps": "*", "Gulp-Rigger": "*", "Gulp-ruglify": "*", "Gulp-Watch": "*", "imagemin-pngquant" : "*", "OPN": "*", "RIMRAF": "*")) i pokrenite naredbu u konzoli

nPM Instalacija Bower Više ne mislim na moj rad bez manager paketa i nadam se da ste i vi. Ako ne, onda pročitajte o onome što je to i s onim što možete jesti ovdje. Dodajmo ga na naš projekt. Da biste to učinili, pokrenite COUNFER Init naredba u konzoli. Također možete unijeti sva pitanja. Na kraju dobivamo takav bower.json datoteku ("ime": "habr", "verzija": "0.0.0" , "Autori": ["Insayt.

U ovom članku, razmotrite primjer okruženja za gutljaj koji se može koristiti za udoban Web Project Frontend Frontend. Ovaj zadani primjer je konfiguriran za stvaranje web-lokacija i web-aplikacija, koji se temelji na okviru Bootstrap 4.

Projekt koji se smatra u okviru ovog članka nalazi se na Github na: https://githit.com/itchief/gulp-prooct-bootstrap-4

Video za ovaj članak:

Upute za instalaciju Gulp okolina

Da biste stvorili okoliš, morate imati sljedeće instalirane programe:

"Node.js" instalater za svoj operativni sustav može biti izrađen od ove stranice; projekt zahtijeva verziju programa koji nije niži od 10);
"Gulp" (Install Gulp se može instalirati u sljedeću naredbu u konzoli: NPM Instalacija -G Gulp-CLI).

Sljedeći korak je instalacija NPM paketa i njihovih ovisnosti. Da biste to učinili, u konzoli (treba biti u korijenskom direktoriju projekta), morate izvršiti naredbu:

NPM instalacija

Ova naredba će postaviti sve pakete koji su potrebni i za rad samog okruženja i za prednji dio. Izvodi NPM ove radnje u skladu s uputama napisanim u "paketu.json" datoteku.

Kada koristite prvu verziju projekta (1.0.0), koja koristi manager paketa, i dalje morate izvršiti naredbu:

Bifter instalirati

Ovaj program će postaviti prednje pakete navedene u datoteci Bower.json.

Kako koristiti Gulp okruženje?

Otvorite naredbeni redak (put bi trebao odrediti korijensku mapu projekta) i ući Gulp (Normalni način):

Nakon unosa ove naredbe, zadani zadatak će biti pokrenut, tj. "Zadano". Ovaj zadatak će zauzvrat lansirati niz drugih zadataka: "Build", "WebServer" i "Watch".

"Build" zadatak će izgraditi projekt za proizvodnju (tj. Pokrenut će se "Clean: Build", "HTML: Build", "CSS: Build", "JS: Build", "Fontovi: Build" i "Slika : Izgraditi "). Ti će se zadaci staviti u mapu "imovina / izgradnju" projektne datoteke.

Zadatak "WebServer" dizajniran je za pokretanje lokalnog web-poslužitelja s "Reset Reset" stranica u pregledniku. Uz to, možete samo vidjeti projekt i izvoditi ga testiranje.

Zadatak "Watch" koristi se za praćenje promjena u izvornoj datoteke u mapi i izvršenju imovine / SRC "ako se zove razne zadatke. Drugim riječima, omogućuje vam da automatski pokrenete potrebne zadatke i održavate rezultirajuće datoteke (sadržaj "imovine / izgradnje" mape) su ažurirani.

Osim toga, možete izvršiti selektivni (neovisni) sklop određenog dijela projekta.

Na primjer, za sastavljanje samo CSS dijelova stranice samo unesite naredbu:

Gulp CSS: graditi

Popis drugih zadataka:

Gulp Clean: Graditi // Za čišćenje "imovine / izgradnje" Directory Gulp HTML: Graditi // Za sastavljanje HTML datoteka Gulp JS: Build // Za sastavljanje JS datoteka Gulp fontovi: Build // Za sastavljanje Gulp Image fontovi: Graditi // za sliku okupljanja

Opis Gulp okolica

U ovom odjeljku analizirat ćemo:

glavni alati i struktura datoteka guulp okoliša;
kako je spojen na projekt bootstrap-a spojen na projekt i konfigurirajte ih;
kako samostalno (od nule) za inicijalizaciju projekta Gulp i instalaciju ovisnosti (bez korištenja gotovog paketa.json)
kako od nule do dovršetka inicijalizacije biljaka i instalaciju paketa (bez korištenja gotovog "Bower.json") *;
sadržaj kolektora projekta Gulp (Gulpfile.js)

* U projektu se ne koristi upravitelj paketa, počevši od verzije 2.0.0.

Popis alata

Okoliš osmišljen za razvoj projekta Frontend (web-lokacija) izgrađen na temelju sljedećih alata:

Node.js (okruženje u kojem će se obaviti okoliš);
nPM (batch menadžer uključen u node.js; će se koristiti za učitavanje guulp, plug-ins i paket frontend);
jquery, Popover, bootstrap (paketi koji će se koristiti za izgradnju CSS i JS dijelova stranice);
Gulp i njegovi dodaci (koristit će se za izgradnju projekta i izvršavaju druge web zadatke).

U prvim verzijama projekta dodatno je korišten upravitelj paketa. Koristio se za preuzimanje jQuery, Popover i Bootstrap knjižnica. U verzijama projekta, počevši od 2.0.0, učitavanje podataka knjižnica obavlja NPM.

Projekt Gulp struktura datoteke

Struktura datoteke projekta može se organizirati na različite načine. To može ovisiti o preferencijama određenog programera i projekta za koji je stvoren.

U ovom članku ćemo se pridržavati sljedeće strukture:

Projekt je datoteka "imovina" i "gulpfile.js", "paket.json" mapu. Datoteka "Gulpfile.js" sadržavat će zadatke za Collector projekta Gulp.

Prva verzija projekta također je koristila ".bowerrc" i "Bower.json" datoteke. Datoteka "Bower.json" je konfiguracijska datoteka tvrtke Bower Manager, na temelju kojih su paketi potrebni za učitavanje. U ovom projektu korišten je za preuzimanje bootstrap, jquery i Poppera.

U mapi "imovina" postoje dvije mape: "SRC" (za izvorne datoteke) i "Build" (za gotove datoteke; u ovoj mapi bit će kolekcionar gulp). U mapi "SRC" postoje direktoriji "fontovi" (za fontove), "img" (za izvorne slike), "JS" (za JS datoteke), "stil" (za stilove) i "predložak" (za html fragmente ) i datoteke "index.html".

U prvoj verziji projekta, imenik "Bower_Components" još se nalazio u mapi "SRC". Namijenjen je komponentama, čije je utovar provedeno pomoću Beove. Nema trenutne verzije.

Dvije datoteke nalaze se u "JS" direktoriju: "main.js" i "my.js". Datoteka "My.js" koristi se za pisanje svojih skripta i "main.js" - za definiranje popisa datoteka, sadržaj koji će morati biti uključen u konačnu JS datoteku. Pod iznosima se razumije u datoteku koja bi se trebala ispasti na izlaz (u "graditi" katalogu).

Directory "stil" je dodijeljen stilovima. Postoje tri datoteke u ovom direktoriju: "main.scss" (sadrži popis datoteka, sadržaj kojih želite uključiti u datoteku konačnog stila), "My.scss" (koristi se za pisanje stilova) i "varijable .SCSS "(sadrži scss varijable, s kojima ćemo promijeniti stilove bootstrap 4, kao i koristiti ga za stvaranje varijabli).

Datoteka "Index.html" je glavna stranica projekta koji se stvara. Osim "index.html", druge HTML stranice mogu se postaviti u ovaj direktorij.

Imenik "Predložak" je dizajniran da stavi HTML stranice u njega. Na primjer, u ovom direktoriju možete stvoriti "head.html" i "footer.html" datoteke i uvesti njihov sadržaj (pomoću sintakse // \u003d path_file) odmah na nekoliko stranica. To će vam omogućiti jednostavno stvaranje i uređivanje HTML stranica, jer Odvojeni dijelovi stranica već će biti u odvojenim datotekama.

Povezivanje izvora bootstrap 4 na projekt i njihovu konfiguraciju

Postoje različiti načini povezivanja okvira za bootstrap 4 projektu, kao i opcije za rad s njim.

Najfleksibilnija opcija je korištenje izvornog koda. U ovom slučaju ne možete ne samo vrlo jednostavno promijenite zadane stilove bootstrapali se također povezati s projektom samo te klase i komponente koje će se koristiti u njemu.

Bootstrap 4 stil CSS izvorni kodovi napisani u SCSS-u i prikazani su pomoću velikog broja malih datoteka.

Popis SCSS datoteka (koji se nalazi u "Node_modules / Bootstrap / SCSS /" imenik): "Funkcije.SCS", "Variables.scss", "Mixins.scss", "varijable.scss", "ispis.scss", " Ponovno pokrenite sustav. SCSS "," type.scss "," slike.scss "," code.scss "," grid.scss "," tablice.scss "," Forms.scss "," Gumbi.scss "," prijelazi. SCSS "," Drown.scss "i drugi.

Svaka takva datoteka obavlja ili određeni zadatak usluge ili je odgovoran za stiliziranje određene funkcije ili komponentne funkcije. SCSS datoteke imaju kratka i razumljiva imena. Koristeći samo oni mogu biti vrlo točni razumjeti svrhu svakog od njih.

Konfiguriranje ili promjena bootstrap 4 provodi se zadani stilovi poništavanjem vrijednosti scss varijabli, Sve SCSS varijable za praktičnost prikupljaju se na jednom mjestu (u datoteci "varijables.scss"). No, poželjno je nadjačati njihove vrijednosti, naravno, ne u ovoj datoteci, ali u vlastitom (na primjer, ima isto ime "varijables.scss", ali se nalazi u "imovini / stilu / varijablama.scss").

Na primjer, promjena boje uspjeh. i opasnost., provedeno promjenom vrijednosti varijable $ i $ crvena:

// nadjačati zadane vrijednosti bootstrap $ 4 varijable: # cc2aa; $ Zelena: # 2cc71;

BilješkaNakon kopiranja bootstrap 4 varijable na CSS datoteku ("imovina / stil / varijable.scss"), moraju ukloniti naljepnicu!

Oznaka! Zadano je osmišljeno za utvrđivanje zadane SCSS varijable. Ako SCSS varijabla već ima vrijednost, onda je nova vrijednost ako je označena s ključem! Zadano, neće biti instaliran.

Navedite koji izvor SCSS datoteke Bootstrap 4 moraju sudjelovati u kompilaciji CSS-a, a koji ne, pokretanje kroz SCSS datoteku "imovine / stil / main.scss". Drugim riječima, to je sadržaj ove datoteke koja će odrediti taj skup stilova koji će biti spojeni na web stranicu nakon sastavljanja.

Osim toga, datoteke "imovine / stila / varijable.scss" također su povezane s ovom datotekom (za poništavanje bootstrap varijable) i "imovine / stil / my.scss" (za stvaranje stilova).

Sadržaj datoteke "Main.scss" (primjer):

// nadjačati zadane vrijednosti bootstrap 4 varijable i definiciju svojih @import "varijable"; // Povezivanje željenih SCSS izvora bootstrap 4 @import "../../../node_modules/bootstrap/scss/_funkcije"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_rid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_Forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_rtsicije"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_Breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_Jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_poPover"; @import "../../../node_modules/bootstrap/scss / _cousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/__utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // povezivanje scss datoteka @import "moj";

Osim toga, za rad nekih komponenti Bootstrap 4, trebate JavaScript kod.

Bootstrap 4 JS popis datoteka (nalazi se u "Node_modules / Bootstrap / BOOTSTRAP / DIST /"): "Util.js", "Alert.js", "Button.js", "Carousel.js", "Collapse.js "," DropDown.js "," Modal.js "," Tooltip.js "," popover.js "," Scrollspy.js "," Tab.js "i" Toast.js ".

Definicija Što bootstrap 4 Okvir JS datoteke moraju biti uključene u konačnu JS datoteku projekta, a koja nije, izvodi se "main.js".

Uvoz željenih datoteka na rezultirajuće grade / main.js provodi se sljedećim dizajnom:

// \u003d path_f_file

Izvodi ovu radnju će biti gulp plugin "Gulp-Rigger". Kako instalirati i povezati će biti opisani u nastavku.

Također možete uvesti jquery, Popper u ovu datoteku (morate raditi s padajućem, tooltip i popover komponente) i ako je potrebno, vaše JS datoteke.

Sadržaj datoteke "Main.js" (primjer):

// uvoz jquery // \u003d .././../h/node_modules/jquery/dist/jquery.js // Uvoz Popper // \u003d .././../node_modules/Popper.js/p /Popper.js // uvesti potrebne JS-datoteke bootstrap 4 // \u003d .././../../node_modules/bootstrap/js/dist/util.js // \u003d ../ ../ ./ nede_modules / bootstrap / js / dist / alert.js // \u003d .././../../-Node_modules/bootstrap/js/js/dist/button.js // \u003d .././../node_modules/bootstrap/js / Dist / carouseel.js // \u003d ../../../- nede_modules/bootstrap/js/dist/collapse.js // \u003d ../../../node_modules/Bootstrap/js/js/js/js/js , js // \u003d ../../../node_modules/bootstrap/js/dist/modal.js // \u003d ../../../node_modules/bootstrap/js/js/js/js/js // \u003d ../../../node_modules/bootstrap/js/dist/popover.js // \u003d ../../../node_modules/bootstrap/js/js/js/js/scrollspy.js // \u003d ,/../node_modules/bootstrap/js/dist/tab.js // \u003d .././../../node_modules/bootstrap/js/js/dist/toast.js // uvoz drugih JS datoteka // \u003d moj .js.

Kako od nule inicijalizirati projekt Gulp i instalaciju ovisnosti?

Razvoj projekta obično počinje stvaranjem datoteke "Package.json" (manifest).

Datoteka "Package.json" sadrži opće informacije o projektu (naziv, verzija, opis, ime autora, itd.), Kao i podatke o paketima iz kojih ovaj projekt ovisi.

Da biste stvorili manifest, morate otići u korijensku mapu projekta i ući na naredbu:

Npm init

Nakon unosa naredbe, morate odgovoriti na sljedeća pitanja:

naziv projekta (ime) - "Bootstrap-4";
broj verzije (verzija) - "2.0.0";
opis (opis) - "Start projekt s uporabom bootstrap 4";
autor (autor) - "Site";
git repozitorij (repozitorij git) - "";
ulazna točka, testna naredba, licenca (licenca), ključne riječi (ključne riječi) - zadane vrijednosti.

Na pitanje "Je li to u redu?" Odgovorite "Da" ili pritisnite Enter.

Kao rezultat toga, datoteka "Package.json" pojavljuje se u korijenskoj mapi projekta.

Sada postavite pakete koji će se koristiti u projektu koristeći sljedeću naredbu:

Npm install_pack_save-dev ime // instaliranje paketa i informacije o njemu se automatski propisuje na "devdependencije" odjeljak "paket.Json" NPM Instaliranje title_ paket --Save-Prod // Instaliranje paketa, dok su informacije o tome automatski propisani "ovisnosti" odjeljak "paket.json"

"--Save-dev" ili "--save-prod" ključ određuje koji će se dio datoteke "paket.json" dobiti informacije o tome.

Popis paketa koji će se koristiti u projektu:

NPM Instalacija Gulp --save-dev // Instaliranje Gulp NPM Instalacija preglednika-Sync --Save-dev // Instalacija preglednika-Sync NPM Instaliranje Gulp-AutoPrefixer --Save-dev // Instaliranje Gulp-AutoPrefixer NPM Instaliranje Gulp-cachea -Save-dev // Instaliranje gulp-cache NPM Instaliranje Gulp-Clean-CSS --Save-dev // Instaliranje Gulp-Clean-CSS NPM Instaliranje Gulp-Rimraf --save-dev // Instaliranje Gulp-Clean-CSS NPM Instalacija Gulp-Imagemin --save-dev // Instaliranje Gulp-Imagemin NPM Instaliranje Gulp-vodoinstalater --save-dev // Instaliranje gulp-vodoinstalater NPM Instaliranje gulp-Rigger --save-dev // Instaliranje gulp-Rigger NPM Instaliranje gulp- Sass --save-dev // Instaliranje Gulp-Sass NPM Instalacija Gulp-Sourcemaps --save-dev // Instaliranje Gulp-Sourcemaps NPM Instaliranje gulp-uglify --save-dev // Instaliranje gulp-uglefy NPM Instalirajte Imagemin-jpeg- Recompress --Save-dev // Instaliranje imagemin-jpeg-Recompress NPM Instaliranje Imagemin-PNGQuant --Save-dev // Instaliranje imagemin-PNGQuant NPM Instaliranje Gulp-preimenovanje --Save-dev // Instaliranje imagemin-PNGQuant NPM Instalirajte jquery - -Save-prod npm inst Svi Popper.js --save-prod npm instalacija bootstrap --save-prod

Nakon instalacije svih ovisnosti, datoteka paketa.json će imati sljedeći sadržaj:

("Ime": "BOOTSTRAP-4", "Verzija": "2.0..Com / Icchief / Gulp-projekt-Bootstrap-4.Git"), "ovisnosti": ("jquery": "^ 3.4.1" , "Popper.js": "^ 1.14.7", "bootstrap": "^ 4.3.1"), "devdependencije": ("sinkronizacija preglednika": "^ 2.26.7", "Gulp": "^ 4.0.2 "," Gulp-AutoPrefixer ":" ^ 6.1.0 "," Gulp-Cache ":" ^ 1.1.2 "," Gulp-Clean-CSS ":" ^ 4.2.0 "," Gulp-Rimraf ":" ^ 0.2.2 "," Gulp-imagin ":" ^ 6.0.0 "," Gulp-vodoinstalater ":" ^ 1.2.1 "," Gulp-Rigger ":" ^ 0.5.8 "," Gulp -Sass ":" ^ 4.0.2 "," Gulp-Sourcemaps ":" ^ 2.6.5 "," Gulp-Uglefy ":" ^ 3.0.2 "," Imagemin-JPEG-Recompress ":" ^ 6.0.0 "Imagemin-pngquant": "^ 8.0.0", "Gulp-preimenovanje": "^ 1.4.0")))

Kako od nule inicijalizirati Bower i instalirati paket Frontend?

Definiramo mapu na koju će Beower preuzeti pakete. Da biste to učinili, stvorite datoteku.bowerrc i unesite sljedeće:

("Imenik": "Imovina / SRC / Bower_components /")

Spremi datoteku.bowerrc. Sada će se sve komponente dignuti u imenik Bower_Compones, koji se nalazi u imovini / src /.

Izvršite inicijalizaciju Bower (stvorite Mawer.json datoteku). Stvaranje datoteke Bower.json može se implementirati pomoću naredbe (u korijenskoj mapi projekta):

Bower je inicijalizacije

Nakon toga, potrebno je odgovoriti na sljedeća pitanja:

naziv projekta (ime) - bootstrap-4;
opis (opis) - početak projekta na bootstrap 4 - mjesto;
autor (autor) - stranica;
postavite instalirane komponente kao ovisnost (postavite trenutno instalirane komponente kao ovisnosti) - Y (YES);
Želite li spomenuti ovaj paket kao privatni, to će spriječiti njegovu slučajnu publikaciju u registru Bower (želite li označiti ovaj paket kao privatno koje sprječava slučajno objavljeno u registar) - Y (da);
za druga pitanja ostavit ćemo odgovore koje nudi zadani program;

Kao rezultat tih radnji, bit će stvorena datoteka Bower.json.

Vozite bootstrap 4 i pakete iz kojih ovisi o (Popperu i jquery) našem projektu pomoću Beower.

Da biste to učinili, unesite sljedeću naredbu u konzolu:

Bower instalirati bootstrap # v4.0.0-beta -save

-Save ključ je potreban za snimanje informacija o paketu u odjeljku ovisnosti o datoteci Bower.json.

Kao rezultat toga, Bower.json će imati sljedeći sadržaj:

("Ime": "Bootstrap-4", "Opis": "Start projekt na Bootstrap 4 - Site", "Autori": ["Site"], "Licenca": "ISC", "Ključne riječi": "početna stranica" ":" "," ignoriranje ": [" ** /. * "," Node_modules "," Bower_components "," imovina / src / bower_components / "," test "," testovi "]," ovisnosti ": (" jQuery ":" ^ 3.2.1 "," bootstrap ":" ^ v4.0.0-beta ")))

Ako ne želite inicijalizirati Bower (Bower.json) koristeći HOURWER init naredbu i instalirati pakete ručno, možete jednostavno stvoriti datoteku Bower.json (na primjer, pomoću upravitelja datoteka) i umetnuti gornji sadržaj teksta. Da biste instalirali ovisnosti u projektu, to će biti dovoljno za unos sljedeće naredbe:

Bifter instalirati

Opis kolektora projekta Gulp (Gulpfile.js)

Sve aktivnosti prije, bile su pripremne. Cijela funkcionalnost koja će izvršiti stvoreni okoliš određuje se datotekom "gulpfile.js".

Datoteka "Gulpfile.js" je popis zadataka.

Glavni zadaci koji će izvršiti ovu datoteku su:

prikupljanje više stilova u jednom, kompilacija dobivenih scss u CSS, dodajte autoprofiksi, minimizirajući CSS i stvaranje izvorne karte;
uvesti sve potrebne JS datoteke na jednu, minimiziranje ove datoteke i stvaranje izvorne karte;
prikupite HTML datoteku, prijenos fonta, obradu (kompresija) slika i automatskih ažuriranja stranica putem sinkronizacije preglednika.

Osim toga, tako da se ovi zadaci ne pokreću kada ručno mijenjaju izvorne datoteke, stvorite drugi zadatak "sat". Ona će pratiti promjene datoteka i automatski pokrenuti određene zadatke.

Kod datoteke "Gulpfile.js" (kada koristite Gulp 4):

"Koristite stroge"; / * Put do izvornih datoteka (SRC), na gotove datoteke (izgraditi), kao i promjene koje želite promatrati (gledati) * / var path \u003d (izgraditi: (HTML: "imovina / graditi / ", JS: Imovina / graditi /", CSS: "Imovina / Build / CSS /", IMG: "IMG:" IMG / IMG / ", fontovi:" Imovina / Fontovi / "), SRC: (HTML : "Imovina / src / * HTML", JS: "Imovina / SRC / JS / Main.js", stil: "Imovina / SRC / stil / Main.SCS", IMG: "IMG / SRC / IMG / ** / *. * ", Fontovi:" Imovina / SRC / Fontovi / ** ""), Gledajte: (HTML: "Imovina / SRC / ** / *. HTML", JS: "Imovina / SRC / JS / * * /*.js ", CSS:" Imovina / SRC / stil / ** / *. SCSS ", IMG:" imovina / src / IMG / ** / 2 * ", fontovi:" Imovina / Krs / fontovi / * * / *. * "), Čisto:" ./ssets/build / * "); / * Postavke poslužitelja * / VAR CONFIG \u003d (poslužitelj: (BasesIR: "./Sessets/build"), Obavijesti: False); / * Connect Gulp i Plugins * / VaR Gulp \u003d Zahtijevati ("Gulp"), // Connect Gulp Webserver \u003d Zahtijevati ("Preglednik-Sync"), // poslužitelj za rad i automatsko ažuriranje vodoinstalater \u003d zahtijevaju ("Gulp-vodoinstalater" ), // Modul za praćenje pogrešaka Rigger \u003d Zahtijevati ("Gulp-Rigger"), // Modul za uvoz sadržaja jedne datoteke u drugi sourcemaps \u003d zahtijevaju ("Gulp-Sourcemaps"), // Modul za generiranje SASS izvora CARDS \u003d Zahtijevati ("Gulp-Sass"), // Modul za sastavljanje SASS (SCSS) u CSS AutoPrefixer \u003d Zahtijevati ("Gulp-AutoPrefixer"), // Modul za automatsku instalaciju Cleancs \u003d Zahtijevati autopise ("Gulp-Clean- CSS "), // dodatak za minimiziranje CSS uglefy \u003d zahtijevaju (" Gulp-ruglify "), // Modul za minimiziranje JavaScript Cache \u003d Zahtijevati (" Gulp-Cache "), // Modul za predmemoriranje Imagemin \u003d zahtijevaju (" Gulp- Imagemin "), // plugin za kompresiju PNG, JPEG, GIF i SVG slike jpegrecompress \u003d zahtijevaju (" ImageMin-JPEG-Recompress "), // Plugin za kompresiju JPEG PNGQuant \u003d Zahtijevati (" Imagemin-PNGQ "), // Plugin za kompresiju PNG RIMRAF \u003d Zahtijevati (" Gulp-RimRaf "), // dodatak za brisanje datoteka i direktorija preimenovati \u003d zahtijevaju (" Gulp-preimenuj "); / * zadaci * / / pokretanje gulp.task poslužitelja ("WebServer", funkcija () (WebServer (Config);); // html gulp.task ("HTML: graditi", funkcija () (povratak gulp.src (path.src.html) // Odaberite sve HTML datoteke na određenom putu. Cijev (vodoinstalater ()) // Pogreške praćenja. Cijev (Rigger ()) // uvoz privitaka.Pipe (Gulp.Dest (Put.Build.html)) // Izgled gotove datoteke. Cijev (Webserver.Reload ((Stream: True))); // Restart poslužitelj )); // gulp.task stil prikupiti ("CSS: izgraditi", funkcija () (povratak gulp.src (path.src.style) // pregled main.scss .pipe (vodoinstalater ()) // za praćenje pogrešaka. Cijev ( sourcemaps.it ()) // inicijalizirati sourcemap .pipe (SAS) // SCSS -\u003e CSS .Pipe (AutoPrefixer ()) // Dodaj prefiksi .Pipe (Gulp.Dest (Put.Build.css)) .ppe (Preimenovanje (sufiks: ".min")) .Pipe (Cleancss ()) // minimiziranje CSS .Pipe (Sourcemaps.write (". / ")) // napišite sourcemap .pipe (gulp.Dest (put.Build.css)) // istovariti u izgradnji .Pipe (WebServer.Reload (((stream: TRUE))); // ponovno pokrenuti poslužitelj)) ; / / Gulp.task ("JS: Build", funkcija () (RETURN Gulp.src (path.src.js) // primiti glavnu datoteku .Pipe (vodoinstalater ()) // za praćenje pogrešaka.Pipe (Rigger ()) // uvesti sve navedene datoteke u main.js .Pipe (Gulp.Dest (path.build.js)) .Pipe (preimenovanje (sufiks: ".Min"))) .Pipe (Sourcemaps. init ()) // inicijalizirati sourcemap .pipe (ruglify ()) // minimizirati JS .pipe (Sourcemaps.Write ("./")) // Pisanje Sourcemap .pipe (Gulp.Best.js)) // Mi smo stavili gotovu datoteku.Pipe (WebServer.Reload ((stream: TRUE))); // Ponovno pokretanje poslužitelja)); // Prijenos Gulp.Task fontovi ("fontovi: graditi", funkcija () () () () () ( Povratak Gulp.src (put. Src.fonts) cijevi (gulp.dest (path.build.fonts));)); // obrada slika gulp.task ("slika: izgraditi", funkcija () (povratak gulp.src (Path.src.img) // put s izvorima slika. Cijev (predmemorija (imagemin ([// kompresija slike i Magemin.gifsicle ((isprepleteni: istinito)), jpegrecompress (progresivno: TRUE, MAX: 90, min: 80)), pngquant (), imagemin.svgo ((plugins: false)]))))) gulp.dest (put.Build.img)); // iskrcavanje gotovih datoteka)); // brisanje izgradnje gulp.taska Katalog ("CLEAN: Build", funkcija () (povratak Gulp.src (put.Chean, (čitanje: false)) .Pipe (RIMRAF ());));); // čišćenje cache gulp.task ("predmemorija: jasna", funkcija () (cache.Clearall ();); // montaža gulp.task ("Build", Gulp.Series ("CLEAN: Build", Gulp.sparlell ("HTML: Build", "CSS: Build", "JS: Build", "Krstionica: Izgradite", " slika: graditi "))); // Pokretanje zadataka prilikom promjene Gulp.Sask datoteke ("Watch", funkcija () (gulp.watch.watch.watch.html, gulp.series ("HTML: graditi")); gulp.watch (pat.watch. CSSS, gulp.series ("CSS: graditi"); gulp.watch (path.watch.js, gulp.series ("JS: graditi")); gulp.watch (path.watch.img, gulp.series ( "Slika: graditi")); gulp.watch (path.watch.fonts, gulp.series ("fontovi: graditi"));)););); // zadani zadatak gulp.task ("zadano", gulp.series ("Build", Gulp.parallel ("WebServer", "Watch"));

Kodni kod "Gulpfile.js" sadrži komentare. Uz pomoć njih objašnjava se da izvodi jedan ili drugi fragment uputa.

Stvaranje zadatka u Gulp je vrlo jednostavan:

// Stvaranje zadivljujućih zadataka (Nametask - naziv zadataka) Gulp.task ("Nametrask", funkcija (// Akcije za obavljanje zadatka ...);

Zadaci u Gulp su vrlo jednostavni. Njihov okvir djelovanja u većini slučajeva može biti predstavljen kako slijedi:

dobiti podatke iz izvornih datoteka;
pokretanje podataka putem guulp dodataka;
spremite rezultate (datoteke) u imeniku "Build".

Ako koristite Gulp 3, sadržaj datoteke "Gulpfile.js" mora biti sljedeći:

"Koristite stroge"; / * Parametri za Gulp-AutoPrefixer * / VAR AutoPrefixerlist \u003d ["Chrome\u003e \u003d 45", "Firefox ESR", "EDGE\u003e \u003d 12", "Explorer\u003e \u003d 10", "iOS\u003e \u003d 9", safari\u003e \u003d 9 "," Android\u003e \u003d 4.4 "," Opera\u003e \u003d 30 "]; / * Put do izvornih datoteka (SRC), na gotove datoteke (izgraditi), kao i promjene koje želite promatrati (gledati) * / var path \u003d (izgraditi: (HTML: "imovina / graditi / ", JS: Imovina / graditi /", CSS: "Imovina / Build / CSS /", IMG: "IMG:" IMG / IMG / ", fontovi:" Imovina / Fontovi / "), SRC: (HTML : "Imovina / src / * HTML", JS: "Imovina / SRC / JS / Main.js", stil: "Imovina / SRC / stil / Main.SCS", IMG: "IMG / SRC / IMG / ** / *. * ", Fontovi:" Imovina / SRC / Fontovi / ** ""), Gledajte: (HTML: "Imovina / SRC / ** / *. HTML", JS: "Imovina / SRC / JS / * * /*.js ", CSS:" Imovina / SRC / stil / ** / *. SCSS ", IMG:" imovina / src / IMG / ** / 2 * ", fontovi:" Imovina / Krs / fontovi / * * / *. * "), Čisto:" ./ssets/build / * "); / * Postavke poslužitelja * / VAR CONFIG \u003d (poslužitelj: (BasesIR: "./Sessets/build"), Obavijesti: False); / * Connect Gulp i Plugins * / VaR Gulp \u003d Zahtijevati ("Gulp"), // Connect Gulp Webserver \u003d Zahtijevati ("Preglednik-Sync"), // poslužitelj za rad i automatsko ažuriranje vodoinstalater \u003d zahtijevaju ("Gulp-vodoinstalater" ), // Modul za praćenje pogrešaka Rigger \u003d Zahtijevati ("Gulp-Rigger"), // Modul za uvoz sadržaja jedne datoteke u drugi sourcemaps \u003d zahtijevaju ("Gulp-Sourcemaps"), // Modul za generiranje SASS izvora CARDS \u003d Zahtijevati ("Gulp-Sass"), // Modul za sastavljanje SASS (SCSS) u CSS AutoPrefixer \u003d Zahtijevati ("Gulp-AutoPrefixer"), // Modul za automatsku instalaciju Cleancs \u003d Zahtijevati autopise ("Gulp-Clean- CSS "), // dodatak za minimiziranje CSS uglefy \u003d zahtijevaju (" Gulp-ruglify "), // Modul za minimiziranje JavaScript Cache \u003d Zahtijevati (" Gulp-Cache "), // Modul za predmemoriranje Imagemin \u003d zahtijevaju (" Gulp- Imagemin "), // plugin za kompresiju PNG, JPEG, GIF i SVG slike jpegrecompress \u003d zahtijevaju (" ImageMin-JPEG-Recompress "), // Plugin za kompresiju JPEG PNGQuant \u003d Zahtijevati (" Imagemin-PNGQ "), // Plugin za kompresiju PNG RIMRAF \u003d Zahtijevati (" Gulp-RimRaf "), // dodatak za brisanje datoteka i direktorija preimenovati \u003d zahtijevaju (" Gulp-preimenuj "); / * zadaci * / / pokretanje gulp.task poslužitelja ("WebServer", funkcija () (WebServer (Config);); // html gulp.task ("HTML: graditi", funkcija () (povratak gulp.src (path.src.html) // Odaberite sve HTML datoteke na određenom putu. Cijev (vodoinstalater ()) // Pogreške praćenja. Cijev (Rigger ()) // uvoz privitaka.Pipe (Gulp.Dest (Put.Build.html)) // Izgled gotove datoteke. Cijev (Webserver.Reload ((Stream: True))); // Restart poslužitelj )); // gulp.task stil prikupiti ("CSS: izgraditi", funkcija () (povratak gulp.src (path.src.style) // pregled main.scss .pipe (vodoinstalater ()) // za praćenje pogrešaka. Cijev ( sourcemaps.it ()) // inicijalizirati sourcemap .pipe (SASS ()) // SCSS -\u003e CSS .Pipe (AutoPrefixer ((// Dodaj preglednike: AutoPrefixerlist Prefixes))) .Pipe (Gulp.Best (put.Build , CSS)) .Pipe (preimenovanje (((((Sufix: ".Min")) .Pipe (Cleancss ()) // minimiziranje CSS .Pipe (Sourcemaps.write (". / ")) // napišite sourcemap .pipe (gulp.Dest (put.Build.css)) // istovariti u izgradnji .Pipe (WebServer.Reload (((stream: TRUE))); // ponovno pokrenuti poslužitelj)) ; / / Gulp.task ("JS: Build", funkcija () (RETURN Gulp.src (path.src.js) // primiti glavnu datoteku .Pipe (vodoinstalater ()) // za praćenje pogrešaka.Pipe (Rigger ()) // uvesti sve navedene datoteke u main.js .Pipe (Gulp.Dest (path.build.js)) .Pipe (preimenovanje (sufiks: ".Min"))) .Pipe (Sourcemaps. init ()) // inicijalizirati sourcemap .pipe (ruglify ()) // minimizirati JS .pipe (Sourcemaps.Write ("./")) // Pisanje Sourcemap .pipe (Gulp.Best.js)) // Mi smo stavili gotovu datoteku.Pipe (WebServer.Reload ((stream: TRUE))); // Ponovno pokretanje poslužitelja)); // Prijenos Gulp.Task fontovi ("fontovi: graditi", funkcija () () () () () ( Povratak Gulp.src (put. Src.fonts) cijevi (gulp.dest (path.build.fonts));)); // obrada slika gulp.task ("slika: izgraditi", funkcija () (povratak gulp.src (Path.src.img) // put s izvorima slika. Cijev (predmemorija (imagemin ([// kompresija slike i Magemin.gifsicle ((isprepleteni: istinito)), jpegrecompress (progresivno: TRUE, MAX: 90, min: 80)), pngquant (), imagemin.svgo ((plugins: false)]))))) gulp.dest (put.Build.img)); // iskrcavanje gotovih datoteka)); // brisanje izgradnje gulp.taska Katalog ("CLEAN: Build", funkcija () (povratak Gulp.src (put.Chean, (čitanje: false)) .Pipe (RIMRAF ());));); // čišćenje cache gulp.task ("predmemorija: jasna", funkcija () (cache.Clearall ();); // Sastavljanje gulp.task ("Build", ["CLEAN: Build", "HTML: Build", "CSS: Build", "JS: Build", "Fontovi: Build", "Slika: Build"]); // pokrenite zadatke prilikom mijenjanja datoteka Gulp.Sask ("Watch", funkcija () (Gulp.watch (path.watch.html, ["HTML: graditi"]); gulp.watch (path.watch.css, [ "CSS: graditi"]); gulp.watch (put.watch.js, ["JS: graditi"]); gulp.watch (path.watch.img, ["slika: izgraditi"]); gulp.watch ( Put .watch.fonts, ["fontovi: graditi"]););)); // zadani zadatak gulp.task ("zadano", ["Izgraditi", "WebServer", "Watch"]);

Radni ventilatori i sustavi za montažu visoko ubrzavaju rad, automatiziranje kompilacije, testiranja i drugih rutinskih zadataka. Kao iu 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 je kasnije, mali tim bio odvojen od projekta, koji je odlučio napraviti alternativni alat, Gulp, orijentirani projektni skup.

Kako bi vam pomogao da odlučite o odabiru, u okviru članaka razmotriti glavne upravitelje zadataka:

roktati.

i također dodirnite druga sredstva i izgraditi metode.

Gledajući malo naprijed, recimo da koristimo Gulp u Waveinccess. Implementirajte alat koji se ispostavilo da je vrlo jednostavno: u obitelji od jetbrains proizvoda (ideja, webstorm, resharper), koje smo koristili mnogo godina imaju izvrsne dodatke za rad s gulp / Grunt i NPM / Nodejs.

Upravitelj zadataka vs. Sustav sklop projekta: Koja je razlika?

Upravitelj zadataka - alat za automatiziranje zadataka. U konfiguraciji bennera možete snimati imena tih zadataka; funkciju koja ih obavlja; Dodaci za ubrzanje standardnih radnji, ali sami zadaci mogu biti proizvoljni. Na primjer:

Zadaci za implementaciju (ZIP projekt, preuzimanje projekta na udaljeni poslužitelj i TP)
Zadaci sklopa projekta (minifikacija, optimizacija, kôd za provjeru valjanosti i TP)
Zadaci za migraciju podataka itd.

Primjeri takvih alata - Grunt i Gulp.

Sustav montaže - Ovo je alat koji rješava samo jednu tipičnu zadaću sklopa projekta na Java pismu, koja uključuje:

konkatentacija,
provjera koda za valjanost,
minifikacija koda i TD.

Slični alati uključuju websak, brokulu, brunch, preglednik i druge.

Svi slični zadaci frontend mogu se automatski izvoditi pomoću drugih sredstava: na primjer, korištenjem NPM-a, o čemu ćemo također razgovarati u članku.

Primjer

Razmislite o guulp datoteku za okupljanje projekta:

Konstat gulp \u003d zahtijevaju ('gulp'); Konstantna kava \u003d zahtijevaju ('Gulp-kava'); Const Concat \u003d zahtijevaju ('Gulp-Conct'); const uglefy \u003d zahtijevaju ('gulp-uglify'); zatvor imagemin \u003d zahtijevaju ('gulp-imagin'); const Sourcemaps \u003d zahtijevaju ('Gulp-Sourcemaps'); const del \u003d zahtijevaju ('del'); )

No, skupština je poseban slučaj velikog tipičnog zadatka. Za Gulp možete napisati još jedan config - recimo, za implementaciju:

Var gulp \u003d zahtijevaju ("gulp"); var zip \u003d zahtijevaju ("Gulp-zip"); var del \u003d zahtijevaju ("del"); Var instalacija \u003d zahtijevaju ("Gulp-Install"); var runde \u003d zahtijevaju ("redoslijed pokretanja"); Var awslembda \u003d zahtijevaju ("čvor-aws-lambda"); gulp.task ("čist", funkcija (CB) (del (["./ dist", "/dist.zip "], cb);)); gulp.task ("Kopiraj", funkcija () ("index.js") .Pipe (Gulp.Dest ("Disting /"));); Gulp.task ("čvor-mods", funkcija ("./ paket.json") .Pipe (Gulp.Dest ("Disting /")) .Pipe (instalacija ((((((proizvodnja: true))););););); // očistiti sve AWS-SDK direktorije iz node_modules. Mi ne // trebamo ih prenijeti jer će Lambda instanca već // imati ga dostupno na globalnoj razini. Gulp.task ("CLEAN-AWS-SDK", funkcija (Callback) (Del (Disting / Node_modules / ** / AWS-SDK "], povratni poziv);)); gulp.task (" zip ", funkcija () (povratak gulp.src ([" Disting / ** / * "," DIST / Packag.json "]) .Pipe (zip ("dist.zip")) .Pipe (Gulp.Dest ("./"));)); Gulp.task ("Upload", funkcija (povratni poziv) (Awslamba.Deploy (". / DIST .zip ", zahtijevaju (" ./ lambda-config.js "), povratni poziv);)); gulp.task (" implementirati ", funkciju (povratni poziv) ([" Clean "], [" Clean "], [" Kopiraj "] , ["NODE-MODS"], ["CLEAN-AWS-SDK"], [ZIP "], [" Upload "], povratni poziv);));

A može se opisati novim zadacima kao kombinacija postojećih:

Gulp.task ('implementirajte', gulp.series ('CLEAN', 'Kopiraj', 'Node-Mods', 'Clean-AWS-SDK', 'Zip', 'upload'));

To je razlika. Sada razmotrite osnovne alate.

gulp vs. Roktati.

Dakle, ispred nas su dva zadatka Ranner: Gulp i Grunt. Oboje se koriste od strane tvrtke Node.js i NPM, a stavljaju zadatke pomoću JavaScripta.

Na prvi pogled, oni su slični, međutim, gulp ima nešto što ga čini prikladnijim za okupljanje: vještina je paralelna s procesnim zadacima i kompaktni konfiguracija, lakonski API. Pogledajmo bliže njihovom principu rada.

Podaci o navojama

Imamo datoteku potpore koja čini CSS montažu i obradu.

Može se vidjeti iz nje koji je grča prilikom pokretanja svakog procesa:

otvara datoteku;

pokreće proces;

štedi promjene;

zatvara obrađenu datoteku kako bi se spriječio sljedeći proces;

bilježi datoteku u konačnu mapu.

To jest, lanac uključuje stvaranje više temporalnih mapa i spremanje intermedijarnih datoteka:

Dodaci napišu različite autore. Za svaki dodatak može raditi s datotekama, zaobilazeći, datoteke moraju biti poslane kao objekti. U Gulp, ovaj zadatak obavlja virtualni datotečni sustav vynil-fs. I Gulp odmah šalje datoteku u sljedeći postupak bez stvaranja privremenih datoteka i bez spremanja na disk.

Ista konfiguracija za Gulp već je kompaktnije:

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

Slijed izvršenja zadataka

Postoji još jedna razlika: gulp prema zadanim postavkama asinkrono nastupa stvari. U tome postoje prednosti i kontra. U istoj konfiguracijskoj datoteci dajemo naredbu da brojite datoteke s dev / * SCSS direktorija i pošaljite ih na Sass.

Streami šalju rezultat v.pipea. Metoda. Cijeva vam omogućuje prikupljanje rezultata u međuspremnik u dijelovima, a kada je pun, odmah pošaljite informacije u tok za čitanje, bez završetka primanja sadržaja direktorija.

Redovni zadatak izvršenje čini gutljaj brzo i snažno, ali povremeno potreba da i dalje obavljaju zadatke sinkrono kao u grozdu. Problem se može riješiti putem povratnog poziva, povratak potoka ili obećanja. Zadatak Habréa je demontiran detaljnije. Postoji alternativa na web-lokaciji npm.js

Ako koristite Grut, ali vas privlače streaming podataka - isti Vynil-FS modul može se koristiti za implementaciju u Grunt.

Gulp Laconic API ima samo 5 metoda:

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

Pokrenuti (zadaci ...). Obavlja zadatke.

Sat (glob, fn). Obavlja funkciju ako je datoteka na mjestu globalnih promjena.

SRC (Glob). Kao parametar uzima masku datoteka i vraća niti koja predstavlja te datoteke. Tada se protok može prenijeti na ulazni dodatak.

DESS (mapa). Sprema datoteke u navedenu mapu.

Posebno bih volio primijetiti prisutnost .Watch () u "izvornom" projektu API, jer je praćenje konstantnih promjena u datotekama najvažnija komponenta Skupštine. Krtak API omogućuje se usredotočiti na svoj glavni zadatak za okupljanje projekata.

Alternative Gulp i Grunt

Unatoč popularnosti Gulp (više od 130 do preuzimanja dnevno) i Grunt (više od 86 do preuzimanja dnevno prema NPMJS.com), programeri vide u tim sustavima i njihovim nedostacima: na primjer, ovisnost o dodacima, nepotpunim dokumentacija, neugodno uklanjanje pogrešaka. Alternativno, možete razmotriti sustave montaže projekata (kao što su brokule i webPack) ili NPM skripte.

Sustavi sklopa projekta

Razmotrite nekoliko alternativnih rješenja na platformi node.js. Da bi sastavili projekt, mogu zamijeniti Gulp i Grunt.

Ovaj sustav, kao što je Gulp, nastao kao natjecatelj zadatak - rano grč, ali su programeri u početku osmislili upravo kao pomoćnik za izgradnju sa svim prednostima i nedostacima. On neće "razumjeti" bez postavki, da je * .js je datoteka s skriptama, * .Coffee je Coffescript; Njezin config je kompaktniji. Međutim, bilo koje proizvoljne akcije na stupnju skupštine on neće moći počiniti.

Ovdje je config datoteka. Napisana je u Coffucriptu (možete pisati i na JS):

Exports.Config \u003d Datoteke: Javascripts: Joyo: "Javascripts / App.js": / ^ App / "Javascripts / Vendor.js": / ^ (Bower_components | dobavljač) / stylesheets: "stilove:" stylesheets / app.css "nalog : Nakon: ["dobavljač / stylers.css"] Predlošci: jointo: "Javascripts / App.js"

Ovdje želim obratiti pozornost na operatore zaloga i naručiti. Na razini Bruch config, čini se da morate prikupiti datoteke u željenom redoslijedu. Kao rezultat toga, konfiguracija traje 20-30 linija.

Brokula.

Indi-alat, koji je u razvoju. Njegovi su programeri htjeli stvoriti natjecanje već gutljaj.

U usporedbi s gulpom, brokuli alat koristi druga načela:

Skupština ubrzanja. Svaki dodatak implementira međuprodukt nastavak sklopa rezultata umjesto djelomičnog pobuđenja samo potrebne datoteke.

Stabla umjesto datoteka. Gulp je najbolje transformirati jednu datoteku u jedan finale. Zadani brokolija koristi samo drveće, a ne datoteke, a oni ih transformiraju u druga stabla (degeneriraju iz jednog vrha).

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

WebPack je fleksibilan modularni sustav montaže. Ima neobičnu sintaksu, ali sama usvaja sintaksu modula.

Razumijevanje da se morate natjecati s takvim divovima kao Gulp, kreatori su odlučili olakšati naš život u razvoju velikih projekata. I dodan u uslužni program:

Sposobnost automatskog izgradnje drvnih ovisnosti i resursa.

Udobni alati za implementaciju dinamičkog opterećenja.

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

Kompatibilnost s preprocesorima (SASS, Babil, Caffect, upišite skriptu, itd.).

Reload Live Reload (Asinchronous Boot tehnologija, na kojoj preglednik ne ažurira čitave stranice, već odvojene aplikacije).

Sposobnost dijeljenja koda i generiranje puno paketnih datoteka, izbjegavajući stvaranje jednog teških paketa.

Mogućnost optimizacije koda.

Odvojeno, možete zabilježiti fleksibilan pristup ovisnostima. Modul može biti JS, CSS i HTML datoteka, pa čak i JPEG s PNG-om. Možete koristiti potreban ("myjsfile.js") i zahtijevaju ("mycssfile.css"), ponovno podijelite i koristite dijelove artefakta.

Pročitajte više o mogućnosti, alat konfiguracije, dodatke se mogu naći na Github, u prezentaciji s FrontTalks: duboko uranjanje u websak.

ΒM skripte

Zadaci montaže mogu se riješiti pomoću NPM skripti. Mnogi uplašite ovu ideju: nekoliko mogućnosti, skripte nisu dovoljno brze u usporedbi s Gulp ili WebPack. Ipak, ovi nedostaci su pretjerani.

Mogućnosti NPM skripte

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

("Ime": "NPM-Scripts-Primjer", "verzija": "1.0.0", "Opis": "NPM skripti Primjer", "Skripte": ("Preubuild": "Echo i trči prije skripti" , "Build": "Cross-env node_env \u003d proizvodnja websak" "postbuild": "Echo i trči nakon izgradnje skripte"))

Skripte će biti učitane u redoslijedu prema prefiksima: prebruild, na primjer, počinje prije izgradnje, jer je prefiks pre. Prema tome, postbuild će biti učitan posljednji. Tim za izgradnju NPM će ih pokrenuti u željenom redoslijedu.

Možete nazvati jednu skriptu od druge da razgrane složene zadatke. Na primjer, ovdje prebruild zadatak naziva čisti zadatak.

("Ime": "NPM-Scripts-Primjer", "Verzija": "1.0.0", "Opis": "NPM skripti Primjer", "Skripte": ("Clean": "RIMRAF ./dir && mkdir dist "," Preubuild ":" NPM Run Clean "," Build ":" Cross-ENV NODE_EN \u003d PROIZVODNJA WEBPACK "))

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

("Naziv": "NPM-skriptni primjer", "verzija": "1.0.0", "Opis": "NPM skripti Primjer", "Skripte": ("Izgradite": "čvor Build.js"))))

Zbog streaming za gutljaj za postavke montaže, postalo je mnogo prikladnije od groznika. Ali može se implementirati kroz NPM. U sustavu Windows i Unix, streaming se obavlja prema zadanim postavkama, bez spremanja posrednih datoteka.

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

Grp 'Moje ime' BigFile.txt\u003e Linesthathatemyname.txt

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

Ali postoje neugodnosti: ne možete ostaviti komentare u paketu.json. Izlaz može biti stvaranje kratkih skripti s razumljivim imenima usmjerenim na neki mali zadatak. Detaljnije, pitanje zamjene zadataka Ranners NPM skripte je dobro osvijetljen u članku engleskog govornog područja zašto sam napustio Gulp i Grun za pm skripte.

Ishod

Na tržištu se nalazi veliki natjecateljski alati za automatiziranje rutinskih zadataka (na primjer, Gulp i Grunt), kao i alati za automatizaciju sklopa projekta (webPack, brokula, Meduza, preglednik, itd.).

Ako pogledate radnike zadataka, onda Gulp u usporedbi s Grunt je jednostavniji, shvaćeni i proizvodi: pobjeđuje zbog uštede na diskovnim operacijama. No, Grunt ima više dodataka (na primjer, postoji testni dodatak). Zbog toga ostaje mnogo obožavatelja.

Ako govorimo samo o skupštini, onda Gulp ima sve prednosti u odnosu na Grunt:

Arhitektura toka za prijenos datoteka preko lanca koji pruža Vynil-FS modul.

Po defaultu - asinkroni izvršenje zadataka.

Lakonični API je samo 5 funkcija.

U isto vrijeme, web-graditi je jednako zanimljiv alat. Ona pruža tehnologiju za ponovno učitavanje uživo koja ubrzava obnovu preglednika. Ovo je ogroman plus: Tehnologija štedi vrijeme za pritisak na gumb za ažuriranje koje programeri moraju stalno pritisnuti. Gulp također ima reload live, ali webPack je teško usporediti s Gulp ili Grunt, kao što je "izoštren" samo pod graditi i ne "znati kako riješiti proizvoljne zadatke.

Sve te odluke savršeno su integrirane s obitelji proizvoda od jetbrains, međutim, mi u Waveinccess poželjno je roknuo za mnoge mogućnosti za bilješke i za stručnjake Frontend.

Ako imate bilo kakvih pitanja i trebate razviti web projekt, pišite nam na [Zaštićeno e-poštom]

Savijen
Roktati.
Gutljaj.
Trkači zadataka.