GENTLANMANOVÝ PREDCHÁDZAJÚCEHO DEVELOU SET. Vybudovať front-end na prstoch pomocou GULP Pleasant Frontend Project Build

24. septembra. , 2016

Otázky budú zvážené: Práca so SASS Styles pomocou SOURCEMAPS, Lepenie a kompresia súborov JS, montáž vyžadujúcich použitie RJS, HTML predspracovanie, čistenie a kopírovanie súborov, optimalizácia obrazu, zdvíhanie miestneho webového servera a režimu pozorovania - hodinky-tasch. Vitajte v článku, bude veľa zaujímavých!
P.S. Materiál, preto článok bude rozdelený na 3 diely: Zostava základov a projektová organizácia, písanie testovacích aplikácií na chrbticu + vyžadujú. JS a vlastne montáž s GULP.

Prečo potrebujete montáž frontedu.

Jedným z najdôležitejších zásad vo vývoji je modulárnosť. Frakčný systém projektu do mnohých malých, ideálne slabo spojených kusov modulov. Týka sa to nielen javascriptového kódu. To platí aj pre štýly a šablóny HTML, na rôzne knižnice.

To môže vyzerať ako štruktúra jednoduchej aplikácie napísanej na chrbtici + vyžadujú.

A toto je malý testovací projekt, v reálna príloha Súbory môžu byť stovky a tisíce. Urobte si užívateľský prehliadač vykonajte stovky HTTP požiadavky aspoň neľudské. Musíme poskytnúť maximum rýchlo načítanie Písomná služba. Preto jedným z najdôležitejších úloh montážneho nástroja je ministerstvo, zníženie počtu súborov používaných na projekte, legovanie do gangov. Na výstupe musíme mať napríklad krátšiu štruktúru, to je:

Rozdiel je dobre viditeľný: namiesto desiatok súborov máme jeden index.html, jeden súbor CSS, optimalizované a komprimované obrazy v samostatnom priečinku, hoci nie je viditeľná v snímke :-)

A tiež najzaujímavejšia vec: v priečinku JS sme dostali iba 3 komprimované súbory.
P.S. Prečo tri, a nie jeden, poviem neskôr.
Všimol si, že ide o skutočnú štruktúru testovanej aplikácie, ktorú čoskoro píšeme.

Popísal som len jeden dôvod na použitie montážnych nástrojov, ale je to už dostatočné na začatie používania GULP, Grunt, Webback alebo niečo podobné vo vašich projektoch. A nezáleží na tom, či píšeme obrovskú službu, malé kúpele (ako v našom článku) alebo vstupnej stránke. Princípy zhromaždenia sú rovnaké pre všetky projekty a líšia sa len v rôznych úlohách a prístupoch k ich riešeniu. V našom príklade vytvoríme štruktúru, ktorá môže expandovať v budúcnosti, ale výstup bude mať vždy elegantný stoh súborov, pripravený na výstup na vašu výrobu - bojové miesto.

Ako riadne organizovať projekt.

Princíp tohto: Tam je časť s vývojárskymi súbormi, zbierajú sa a všetko ostatné, že toto dobré slúži. Vytvorte 2 priečinky v koreňovom jazyku: SRC a stavať. V SRC a len v SRC budeme pracovať, vytvárať nové súbory, upravíme ich a bavte sa všeobecne. V screenshot vyššie, kde pár tucet súborov vidíte obsah priečinka SRC nášho testovacieho projektu. A tesne pod niektoré elegantné súbory z priečinka Build. Vytvára sa len automaticky, montážne nástroje, čo tam nie je rozhodnúť. Každopádne, s každou montážou, jeho obsah je udržiavaný novými súbormi (a v režime vývoja zloženia priečinkov vôbec - je odstránený, aby nie je na Corp oči)

Okrem SRC a Build, Package.JSON, GULPFILE.JS FOLDER, NODET_MODULES FOLDER a voliteľné, .GInGROORE (ak pracujete s Gitz), bude zakorenené. Stále musím si všimnúť priečinok protokolov - to je generácia Apache a dlhotrvajúci zvyk udržať projektové protokoly vo svojom vlastnom priečinku, samozrejme, eliminuje ho z archívu GITY :-)

Takto vyzerá štruktúra projektu:

Podľa obsahu budovania si myslím, že nie sú žiadne otázky, vysvetľujem SRC viac:

1. html - index.html, root indexový súbor. Projekt. Prečo nie okamžite v koreňoch SRC? Pretože to bude preódovať a vytvoriť záliv. Ako sa dozviete trochu neskôr, keď je blízko montáže.
2. IMG - obrázky, nie komprimované, obyčajné
3. JS - ALL JAVASCIPT DOGGOVEJ PROJEKTY, MODELY A PREZKUŠENSTVO
4. Lib - Knižnice tretích strán, ako je pozadia.js, vyžadujú .js, lodash.js a ďalšie
5. Skripty - JS skripty, ktoré sú potrebné na bojovej stránke, ale nie sú potrebné v režime vývoja. Znamená kódy pre analytiku, rôzne experimenty a iné marketingové kusy.
6. Štýly - SASS súbory so štýlmi. Zozbieraný súbor CSS sa zloží do rovnakého priečinka (len pre režim vývoja)
7. TPL - HTML-šablóny. Použité zobrazenia backbose pomocou funkcie Require.js Text Plugin

Vzhľad testovanej aplikácie je docela neusknutý. Môžete povedať, že takýto kecy je vyrobený párom hTML ROY a CSS kód bez jedného súboru JS.
Ale sledujeme gól, ktorý nie je nakresliť krásny obraz a vytvoriť spoľahlivú štruktúru projektu a zvážiť čo najviac aspektov aspektov. Keď sa projekt rozbije až stovky súborov, budeme pripravení na tento útok a ľahko sa budeme riadiť so zvýšenými objemmi. Preto napriek chudobným a vonkajším poslaním testovanej aplikácie sa naučíme princípy zhromaždenia pre veľké a komplexné projekty.

Aké montážne úlohy riešime.

Dovoľte mi pripomenúť, že sme sa dohodli na dvoch montážnych režimoch: vývoj a výrobu. Píšeme všetky naše úlohy, zapamätame si tieto dva režimy. Nie sme potrební všetky operácie počas procesu vývoja, a nie všetky v zhromaždení pre výrobu.

Tu je zoznam toho, čo urobíme po napísaní testovanej aplikácie:

1. Vymazanie súborov a priečinkov z výsledkov predchádzajúceho zhromaždenia
2. Montáž CSS zo súborov SASS, s kompresiou a bez
3. Pripojenie SOURCEMAPY NA ŠTÁTNYCH STYLE, ZÁUJEM VÁM VÁM VÁM NA PRÍKROČNEJ PRÍKROČNOSTI, PREČO JE POTREBNÉ
4. Montáž JS-BANDL s vyžabanými
5. Lepenie a komprimovanie jednotlivých súborov JS (analytici)
6. Predspracovanie HTML.
7. Optimalizácia a kompresia obrazu
8. Zdvihnite lokálny webový server
9. objektívne úlohy pozorovania pri práci v režime vývoja - hodinky-tasch
10. Kolekcia niektoré úlohy V partii - konečné chute na výrobné zhromaždenie a vývojové práce

Zaujímali sme sa teda, prečo je hračkárstvo všeobecne potrebný, rozhodol o štruktúre projektu, podrobne demontovali, že by sme chceli od zhromaždenia a hovorili o testovacej aplikácii. V ďalšej časti článku napíšeme jednoduchú aplikáciu chrbticu v spojení s vyžadujúcim .js. Ak nie ste oboznámení s chrbticou a / alebo vyžadujúcou, nie je nič hrozné. Vlastne chrbtica-ussocode v aplikácii nestačí. Môžete jednoducho používať svoju obľúbenú knižnicu namiesto toho alebo len napísať kód na JavaScript / JQuery a preskočte sekciu RequireJs Nastavenia.

V tých dňoch, keď boli miesta malé, nie je potrebná samostatná montáž frontedu. Objem a zložitosť CSS a JS sa však zvýšili, a zobrazenie, v ktorom je vhodné vyvinúť, sa začal odlišovať od pohľadu, v ktorom je potrebné ukázať výsledok užívateľovi. Tam boli takéto úlohy ako zreťazenie (lepenie) súborov, minimalizačný kód a dokonca aj predmontáž. Výsledkom bol špecializovaný systém na montáž frontentant, ktorý povieme.

Samozrejme, akonáhle je potreba zostavy viditeľná, okamžite sa nástroje používané backend začali preniesť na fronten. Ich hlavným problémom je dôvod, prečo sú v súčasnosti menej používané pre frontu, sú úplne nezaostrené v rámci svojej špecifickosti, pretože štruktúra projektu, použité technológie a vývojový cyklus sú veľmi závislé od úlohy projektu a môžu sa výrazne líšiť . Rovnaký mravca má napríklad verbálnu syntax a nevedie najmä o tom, ako urobiť veci potrebné pre frontu: vstavané úlohy pomerne trochu, ale rozširuje sa zle. Ak hovoríme o GNU, je to oveľa viac univerzálne, pretože prevádzkuje príkazy shell. Z nevýhody, musíte spomenúť špeciálnu syntax, ktorá je potrebné ďalej študovať, potreba poznať škrupinu dobre, ako aj trend smerom k rýchlej komplikácii makefile s nárastom požiadaviek na montáž.

Pozrime sa na stredné miesto so štandardnou štruktúrou a pokúste sa uviesť hlavné etapy zostavy, ktoré prechádza. Pre jednoduchosť, predpokladajme, že sa neobťažujete s vytvorením rôznych súborov JS pre rôzne stránky, ale zároveň chcete udržať niekoľko malých súborov v oblasti vývoja, aby ste podporili akúkoľvek modulárnosť. Zvyčajne vyzerá ako niečo také:

/ libs / jquery.min.js underscore.min.js / js / common.js carousel.js popups.js ....

Montážny systém zvyčajne robí nasledovné:

concientase všetky súbory JS na jednu (v požadovanom poradí, nechceme si stiahnuť naše skripty skôr ako jQuery);
kontroluje JS kód na platnosť (napríklad pomocou jshintu);
minimalizuje kód, ak je to potrebné, bude popísané (to znamená, že je nezrozumiteľná);
vytvorí súbory CSS (Objednávka je tiež dôležité, pretože vlastnosti sú často predefinované);
minimalizuje CSS;
zloží súbory do samostatného adresára, z ktorého ich pripojíte vo vašom HTML.

Táto jednoduchá schéma je často komplikovaná dodatočnými požiadavkami: Skúšky sú poháňané, CSS-predprocesory sú zostavené, obrázky sú optimalizované, šablóny sú zostavené.

Všetky tieto úlohy, a ešte viac, sú schopné vyriešiť moderné montážne nástroje. Budeme zvážiť najobľúbenejšie riešenia, ktoré fungujú na platforme NODE.JS. Ich výhodou je jasným jazykom, ktorý vie (alebo sa domnieva, že poznajú všetkých vývojárov Frontend, počiatočné zameranie na riešenie úloh frontend, ako aj jasný node.js prostredie, v ktorom už možno vyvíjate svoju aplikáciu .

Grunt.

Grunt je najstarším, najdôležitejším a najobľúbenejším nástrojom pre montáž. Takmer všetok zvažovaný montážny systém, jeden spôsob, ako alebo iný porovnáva s gutom a niektoré vznikli ako rýchlejšie alebo jednoduchšie alternatívy. Napriek tomu má pár základných nedostatkov.

Po prvé, ako mnohí vývojári frontend hovoria, grunt je zvolený. Ak chcete nastaviť jednoduchý montážny systém, budete potrebovať konfiguráciu pod stovkami. Avšak samo o sebe, to nie je taký nedostatok: Konfigurácia je prečítaná pomerne ľahko, a na základe popularity grunt, zvyčajne nie je možné nájsť pripravenú konfiguráciu v rámci modelovej úlohy.

Po druhé, Grunt bol vyvinutý ako univerzálny produkt, ktorý je na svojom základe, je možné vyriešiť takmer akúkoľvek úlohu spojenú so zostavou projektu. Je to v pohode, ale všestrannosť musí zaplatiť. Obaja spomínaná multi-rezistencia a rýchlosť. V porovnaní s inými montážnymi systémami na node.js Grunt výrazne pomalšie, a najmä nepríjemné, má tendenciu spomaliť, pretože projekt rastie. Ak nechodíte do detailov o grunt architektúry, potom je dôvod spočíva v tom, že zakaždým, keď potrebujete zbierať, napríklad súbor JS, opätovne potvrdil všetky súbory JS. Môžete sa pokúsiť urýchliť proces montáže, hovoriť manuálne potrebné odkazy medzi súbormi, ale na projekte s komplexným stromom závislostí závislosti, môže byť príliš zložitá.

Napriek tomu všetko, Grunt má obrovský ekosystém: stovky pluginov, tisíce projektov, miliardy vývojárov, to je všetko. To znamená, že nestačí, že Grunt je univerzálny, tiež plugin pre vašu úlohu už, s najväčšou pravdepodobnosťou napísané.

Summovanie, môžeme povedať, že Grunt je vynikajúcou voľbou pre malé a stredné projekty, najmä ak ste predtým nenašli žiadne montážne systémy. Obrovská komunita, banda pluginov, zrozumiteľná dokumentácia a dokonca aj články a správy v ruštine pre tých, ktorí nešťastní, ktorí nemôžu bez neho. A samozrejme, ak sa v budúcnosti pre nejaký dôvod zastavil, že vás prestane usporiadať vás, môžete vždy ísť do iného systému, zbavený jeho nedostatkov.

Gulp.

Gulp - v súčasnosti sa v súčasnosti vyvíja v systéme montáže momentu. Základom jeho architektúry je použitie prúdov v node.js, čo umožňuje nahrávať dočasné súbory a priečinky na disk. Hlavné výhody Gulp - rýchlosť a krátkosť konfigurácie. Okrem toho, ak prvá je nepochybne, stručnosť v porovnaní s gutom sa dosiahne jednoducho z dôvodu svojej druhej štruktúry. Ak v Grunt Config, individuálne pracujete s pluginmi, nastavujete každý z nich, potom v konfigurácii GULP, musíte opísať proces, ktorý má každý súbor (alebo súbor súborov) zhromažďovať. Tu je život kompilácie SASS:

Gulp.Task ("štýly", funkcia () ("štýly / *. SCSS") .pi (Sass ((štýl: "Expanded")) .PIPE (Premenovanie ((prípona: ".min"))). potrubia (minifycss ()) .pipe (Gulp.Dest ("Build / Styles / CSS"););

V prvom riadku zaregistrujú úlohu pre GULP s názvom štýly. Potom sme dôsledne opísali to, čo potrebujete urobiť s každým zo súborov vhodných pre štýly / * masky. SCSS: Compil Sass, Add.min do názvu súboru, minimalizovať, vložiť do finášaného adresára. Ak potrebujete urobiť niečo iné s týmto súborom, jednoducho pridáme príslušný príkaz, napríklad.pipe (pridať komentár s ASCII Unicorn na začiatok súboru) (dúfam, že pre túto každodennú úlohu, konečne plugin). Páči sa mi tento prístup k písaniu konfigurácie viac: lepšie popisuje, čo sa stane so súbormi.

Samozrejme, zatiaľ čo GULP stráca grunt počet plug-inov, ale existuje plug-in úlohy. S najväčšou pravdepodobnosťou máte dosť existujúcich pluginov, a ak je niečo veľmi zlé, môžete vždy napísať svoj vlastný (vtip). Mimochodom, je tu balík Gulp-Grunt Package, ktorý vám umožní spúšťať úlohy GUT z GULP, ak je to veľmi potrebné.

Ak sa vám páči podobný prístup k montáži, rýchlosť je dôležitá a nemusíte vykonávať špecifické úlohy, plugin, pre ktorý je len pre grunt, potom sa GULP môže stať vynikajúcou voľbou. V súčasnosti zostáva GULP najzávažnejším konkurentom GUT.

Broccolli.

Najmladší z posudzovaných montážnych nástrojov je v skutočnosti v štádiu vývoja. Vývojári Broccolli sa neskrývajú, že GULP bol inšpirovaný, ale zvažujú niektoré koncepty, ktoré je základom, chybné. Napríklad si vybrali ukladanie do vyrovnávacej pamäte všetkých výsledkov medziproduktu (a implementované každým z plug-ins), aby ste ho urýchli namiesto čiastočného vyberania iba požadovaných súborov. Tiež sa nepáči, že GULP je najlepšie prevádzkovaný s transformáciou jedného súboru do jedného finále, to znamená jeden až jeden. Zlepšiť realizáciu operácií typu "veľa k jednej", v súčasnosti sa rozvíja Gulp komplikovaná schéma S vytvorením virtuálneho súboru systému, že vývojári Broccolli vyzerajú nadbytočné komplikácie a prejav slabosti skutočných pojmov Gulp. Broccolli spočiatku prevádzkuje koncepty stromov namiesto súborov a robí len transformáciu stromov na iné stromy (dokonca degenerovať a z jedného vrcholu).

Veľmi rozumný teoretický prístup k problému montáže neodstráni problémy o počte rozšírení Broccolli. Bohužiaľ, sú asi dva desiatky a sú splnené iba najzákladnejšie úlohy. Ak chcete vyskúšať niečo nové, pozrite sa na Broccolli, je to veľmi rýchle, je aktívne vyvinuté, ale je to pravdepodobne na použitie vo vážnych projektoch.

Brutať

Brunch bol vytvorený s rovnakou úlohou - venovať grut na všetkých frontoch, ale úplne som sa priblížil z druhej strany. Brunch vývojári sa rozhodli urobiť dobré pochopenie predmetnej oblasti, to znamená, aby urobil menej univerzálny nástroj, ktorý bude nabrúsený práve pod úlohy pedaty, napríklad bez akýchkoľvek nastavení, pochopíte, že * .js je súbor S skripty, * .coffee - Coffeskscript a tak ďalej. Brunch je pomerne rýchly, oveľa rýchlejší grunt, ale trochu pomalší záliv. Bezpodmienečné výhody brunch by mali zahŕňať aj skutočne kompaktnú konfiguráciu, menej ako grunt a GULP, sú občas. Tu, napríklad, jednoduchý konfigurálny brunch:

Exports.config \u003d Súbory: JavaScripts: Javascripts / App.js ": / ^ App /" Javascripts / Vendor.js ": / ^ (Bower_components | Dodávateľ) / Stylesheets: JOUNTO:" SYLESEESEET / APP.CSS " : Po: ["Vendor / Styles / Helpers.css"] Šablóny: Javascripts / App.js "

Všimnite si, že konfigurácia môže byť napísaná na kávovar (v tomto prípade), ako aj na obvykle JS. Vytvárame pravidelný modul, ktorý vráti JSON s nastaveniami montáže.

Venujte pozornosť kľúčem JOPEO a objednávky. Toto je znalosť oblasti predmetu, ktorú som spomenul, je - v konfigurácii brunchovej konfigurácie vie, že budete s najväčšou pravdepodobnosťou chcieť lepiť súbory a niektoré pred zvyškom. To je presne to, čo vám umožní nahradiť 400 riadkov grunt configu na 20-30 brunch.

Navyše, brunch ekosystém je omnoho menší ako grunt a dokonca aj s Gulpom. Pluginy asi 50 (napr. Porovnať so 450+ v Gulp, napríklad), vývoj nie je vo všeobecnosti veľmi rýchly, všetko je dosť smutné.

Summovanie: Ak máte naozaj rád krátke konfigurácie, rýchlosť je dôležitá, ale ak nepotrebuje žiadne špeciálne kroky v fáze montáže, môžete sa pozrieť na brunch. Samozrejme nie veľký počet Pluginy, ale možno sa situácia zmení.

ENB.

No, na konci je najsladší. Chcem povedať o montážnom systéme vyvinutým v Yandex Marat Dulin, ktorý sa nazýva ENB. Je to teraz a používame na našom projekte. Jeho prístup je zásadne odlišný od všetkých popísaných systémov: spočiatku bol vytvorený na prácu s projektmi s použitím metodiky BEM, hoci, ako poznámky autora, jej platforma je bez ideológie BEM a môže byť použitý pre všetky projekty vhodnej štruktúry .

Krátko, čo je podstata. V ENB prevádzkujeme koncepciu cieľa, to znamená, že konečný súbor, ktorý sa má zbierať, alebo uzly (priečinky, vo všeobecnom prípade), pre ktoré potrebujete zbierať niektoré súbory súborov. Aby sme zhromaždili cieľový súbor, používame niektoré technológie (zhruba hovoriť, pluginy v grunt podmienkach, hoci technológie sú menšie a viac špecializované). Prvá ENB je určená zdrojovým súborom súborov, ktoré sú potrebné na budovanie cieľov (niekoľko základných technológií sú v predvolenom nastavení, pracovať s metodikou BEM, to znamená, že hľadajú * .bemDecl súbor, v ktorom závislosť Z tohto uzla z rôznych blokov je popísaný tento strom závislostí (keď blok, na ktorom závisí vaša stránka, závisí od druhej, obidva sú pripojené v požadovanom poradí) a potom nájde súbory potrebné pre každú registrovanú technológiu. ENB nasleduje sekvencia transformácie súborov opísaná v konfigurácii (tu môžete sledovať určitú analógiu s GULP). Napriek niektorým rozdielom zo štandardného montážneho prístupového prístupu, Sobering so základnými pojmami, potom pracujte s ENB je pomerne jednoduché.

Hlavné výhody ENB: Rýchlosť montáže v dôsledku flexibilného systému ukladania do pamäte cache a schopnosť vymieňať si medziprodukty medzi rôzne technológie, paralelizácia nezávislých procesov a prideľovanie najzávažnejších technológií do samostatných subproprocesov. ENB je mimoriadne ľahká písanie nových technológií, ak sa vám nepáči správanie štandardu.

Nevýhody zahŕňajú skutočnosť, že Config ENB je pomerne verzia, pretože je možné spravovať absolútne všetky etapy montáže. Navyše, ENB bola napísaná pre metodiku BEM, a aby ju upevnili na projekt s úplne odlišnou štruktúrou, bude vyžadovať zbytočné televízie. Pre ENB neexistuje toľko písomných technológií (asi 60), ale s väčšinou úloh bem projektov sa zvláda s treskom.

Summovanie: ENB - najlepšia voľba Pre projekty založené na metodike BEM, ktorú osobne považujem za najvhodnejšie pre stredné a veľké miesta, pretože organizácia kódu pre bloky rolí a bibické. Je to veľmi rýchle, zbiera desiatky stránok a stovky súborov na počítanie sekúnd, jednoduché pri zriaďovaní a príjemnom použití. Ak je váš projekt veľký, ste zmätení v kóde a pravidlá súborov na tisíc riadkoch, odporúčam vám preskúmať BEM ako spôsob organizovania štruktúry projektov Frontend. A keď milujete BEM, budete milovať a ENB ako najnárodnejší nástroj na montáž projektov BEM.

Chcete vytočiť viac bodov v Google Rýchlosť stránky? Neviem, aký druh "front-end" zostavy? Potom tu budeš zaujímavá.

Čo je node.js?

Node.js je zvyčajný "severný Javascript". Táto platforma vám umožňuje písať programy pomocou syntaxe JavaScript.

Existujú implementácie pre systém Windows, Mac OS a Linux.

Súprava obsahuje manažér balíkov Npm.S ktorými môžete inštalovať balíky.

Čo je to GULP?

GULP je balík napísaný na node.js, ktorý pomáha webmasters budovať projekty na rozloženia rozloženia.

Ak chcete nainštalovať GULP, musíte použiť príkazový riadok.

NPM inštalácia GULP.

Na konci tohto článku existuje súbor, ktorý pomôže zbierať typický projekt.

V tomto príklade, s GULP, urobíme nasledovné:

Automaticky optimalizovať obrázky pre web;
Zozbierajte jedno minimálne štýly z pretrossors (Sass, SCS);
Zbierajte jeden minimálny súbor s skriptmi.

Ako zbierať front-end pomocou GULP?

Ak chcete pochopiť, ako všetko funguje, preskúmame všetko v krokoch.

Štruktúra je možné zobraziť na screenshot.

Priečinok aktív - pre zdroje obrázkov, štýlov a skriptov;
Verejný priečinok - výsledok projektu zhromaždenia sa bude nachádzať v ňom;
gulpfile.js - súbor, ktorý opisuje logiku pracovnej práce;
package.json je súbor, ktorý obsahuje informácie o programoch a pluginoch používaných na správnu prevádzku GULP.

balenie.json.

Obsah súboru:

("Názov": "GULP_PROJED", "verzia": "1.0.0", "Popis": "Príklad", "Main": "Gulpfile.js", "skripty": ("Test": "ECHO \\" Chyba: Žiadny test zadaný "&& Exit 1"), "Autor": "Dmitriy ilichev", "Licencia": "ISC", "Devmepensepenzence": ("GULP": "^ 3.9.0", "Gulp-CSSO ":" ^ 1.0.0 "," Gulp-Concom ":" ^ 2.6.0 "," Gulp-Uglify ":" ^ 1.2.0 "," Gulp-ImageMin ":" ^ 2.3.0 "," GULP -SASS ":" ^ 2.1.1 "))

Tento súbor je zrejmý nasledovne:

Názov projektu GulP_Project, verzia a popis;
Hlavný súbor je Gulpfile.js;
Autor projektu, licenciu - toto všetko nie je také dôležité a jednoducho tieto polia môžu byť prázdne;
Zaujímavým bodom je Devpozorcia. Popisuje závislosti.

Súbor možno upraviť v obvyklom textový editor. Môže byť vytvorený aj pre nový projekt príkazu NPM INT.

Na základe toho Node.js chápe, že budeme musieť pracovať:

GULP verzia 3.9.0 a vyššie pre montáž;
GULP-CSSO verzia 1.0.0 a vyššie - plugin na ministerské štýly (CSS);
GULP-CONCAT verzia 2.6.0 a vyššie - plugin pre lepenie viacerých súborov do jedného;
GULP-UGRIFY verzia 1.2.0 a vyššie - plugin na mnifunkciu Javascript;
GULP-ImageMin verzia 2.3.0 a vyššie - plugin na optimalizáciu obrázkov;
Verzia GULP-SASS 2.1.1 a vyššie - plugin na získanie CSS z Sass (SCS).

Výborný! Potom musíte ho nainštalovať. Toto je hotové príkazový riadok. Kým v priečinku projektu musíte vykonať príkaz:

Inštalácia npm

Všetko potrebné informácie bude prevzatý z balíka.json.

Po celej tejto mágii sa zobrazí priečinok NODE_MODULES SERVICE.

gulpfile.js.

Obsah súboru:

/ * * * * Určite premenné * * / Var GULP \u003d Vyžadovať ("GULP"), // Hlásené GULP JS Uglify \u003d Vyžadovať ("Gulp-Uglify"), // Minifikácia JS Concat \u003d Vyžadovať ("GULP-CONCAT") , // súbor lepenie imagemin \u003d vyžadujú ("GULP-ImageMin"), // Minifikácia CSSO \u003d Vyžadovať obrázky ("GULP-CSSO"), // Minifikácia CSS Sass \u003d Vyžadovať ("GULP-SASS"); // SASS CONVERTING (SCSS) v CSS / * * * Vytvorte úlohy (chute) * * /// SASS Úloha. Spustí príkaz Gulp Sass Gulp.Task ("Sass", funkcia () (GULP.SRC ("./ Aktíva / štýly / style.scss") // Súbor, ktorý proces.pipe (Sass (). On ("Chyba" , Sass.Logerror)) // Prevod Sass v CSS .PIPE (CSSO ()) // Minifixture CSS, získané v predchádzajúcom kroku. rúrka (Gulp.Dest ("./ Verejné / CSS /")); // Výsledok Píšeme na zadanú adresu); // Úloha "JS". Spustí príkaz GULP JS JS GULP.TASK ("JS", funkcia () (GULP.SRC (["./Assets/javascripts/jquery-2.1.4.min.js", "./asets/javascripts/bootstrap. Min .js "," ./Assets/javascripts/script.js "]) // Súbory, ktoré pristúpia.PIPE (CONCAT (" MIN.JS ")) // GLUE ALL JS JS .PIPE (UGLIBY ()) // výsledný "Port" minifixture.pipe (Gulp.Dest ("./ Verejné / JS /")) // Výsledok píšeme na zadanú adresu); // problém "obrázky". Spustí sa "GULP Images" od Gulp.Task ("Images", funkcia () (GULP.SRC (". Aktíva / obrázky / ** / *") // berieme všetky súbory v priečinku a jeho podpriečinky. Potrubia ( Imagemin ()) // Optimalizujeme obrázky pre web. Potrubie (Gulp.Dest ("./ Verejné / Images /")) // Výsledok píšeme na zadanú adresu)); // úlohy "hodinky". Zapája sa príkazom "GULP Watch" Command // Monitoruje zmeny v súboroch a automaticky spustí ďalšie úlohy GULP.TASK ("Sledujte", funkciu () (// pri zmene * .ssss súborov v štýle priečinka a podpriečinky Spustite úlohu Sass Gulp. Sledujte ("./ Aktíva / štýly / ** / *. SCSS", ["Sass"]); // Pri zmene priečinka * .js súborov "Javascripts" a podpriečinky spustiť JS GULP. Sledujte úlohu ("./ Aktíva / JavaScripts / ** / *. JS", ["JS"]); // Keď zmeníte všetky súbory v priečinku "Images" a podpriečinky, spustite úlohy GULP.WATCH (" ./ Aktíva / obrázky / ** / * ", [" obrázky "]););

Hlavný čip - v úlohe sledovať. Po spustení ho raz môžete bezpečne pracovať so zdrojmi a projekt sa automaticky zhromažďuje pri každom uložení editovateľných súborov.

Na výstupe sa pripravujeme na publikovanie šablóny na internete.

Úlohy môžu byť spustené samostatne. V dôsledku toho v archíve na konci článku nájdete:

! Poznámka Na rozbalenie tohto archívu najprv budete musieť vykonať príkaz NPM Install. Tento priečinok obsahuje pomerne veľký počet súborov a zakaždým, keď ich skopírujete / prilepíte - strata času.

Vo väzbe

Existuje obrovská súprava ďalších užitočných pluginov. Napríklad, nádherná šablóna Jade, ktorá je občas urýchliť písanie hTML kód, Niekto môže potrebovať menej a tak ďalej.

Predložený príklad je len platforma a šablóna, z ktorej je možné začať používať všetky tieto krásne triesky bez veľkých poznatkov.

V v poslednej dobe Gulp. Získanie veľkej popularity a je jasné, prečo. Je rýchlejší, krajší a jednoduchší ako Grunt.. Musel som s ním často pracovať, ale vždy som si vzal riešenia A úplne pochopil, ako to všetko urobil. Na tento víkend som sa rozhodol rozobrať a zatvoriť malý problém. Vezmite si to a dnes budete hovoriť.

Čo je to GULP?

GULP je montážny nástroj. To vám umožní automatizovať opakované úlohy (montáž a minifikácia súborov CSS a JS, spustenie testov, reštartovanie prehliadača a ďalších). Gulp tak urýchľuje a optimalizuje proces vývoja webového vývoja.

Inštalácia GULP.

Nainštalovať Gulp je dostatočne ľahký. Ak niečo nefunguje, písať v komentároch alebo thug váš problém. Takže pre inštaláciu musíte urobiť 3 kroky:

Nainštalovať globálny globálny
Nainštalujte GULP ako Devmepensepenzentujú (Závislosti pre rozvoj)
Vytvorte súbor Gulpfile.js

Prvým krokom je inštalácia GLOBA. Otvorte terminál a napíšte:

nPM inštalácia --global Gulp

Potom musíte pre váš projekt musíte inštalovať GULP ako DevMemon. Uistite sa, že máte súbor balenia .json. Ak to nie je, potom ho vytvorte písaním do konzoly NPM Init. Teraz môžete inštalovať GULP ako Devdemons

nPM Install -sAVE-Dev Gulp

Nakoniec musíte vytvoriť Gulpfile.js v koreňovom projekte, ktorý bude obsahovať vaše úlohy (úlohy). Ako prechodný krok nainštalujeme plugin Gulp-Util. Ak chcete zobraziť, ako sú nainštalované pluginy:

nPM nainštalovať --save-dev gulp-util

Teraz prišiel čas napísať našu prvú úlohu. Otvorte novo vytvorený súbor Gulpfile.js a napíšte jej nasledovne:

/ * Súbor: Gulpfile.js * / // zbierať všetky naše pluginy var Gulp \u003d vyžadujú ("GULP"), GUTIL \u003d vyžadujú ("GULP-UTIL"); // Vytvorte úlohu, ktorá bude vykonaná štandardne Gulp. Úloha ("predvolená", funkcia () (vráti gutil. Log ("GULP beží!"));

A teraz musíme spustiť GULP v termináli a uvidíme niečo podobné:

\u003e Gulp [12:32:08] Použitie Gulpfile ~ / Projects / Gulp-Scotch-Io / Gulpfile.js [12:32:08] Spustenie "Predvolené" ... [12:32:08] Gulp beží! [12:32:08] Dokončené "predvolené" po 1 ms

Prehľad

Samotný Gulp je veľmi váhy o príležitostiach. Ale všetko, čo musíte byť vložiť do samostatných pluginov. Spolu s Gulpom vytvárajú zázraky.

API GULP je veľmi malý a obsahuje iba 4 funkcie vyššieho rádu:

gulp.stask.
gulp.src.
gulp.dest.
gulp.watch

gulp.Task definuje naše úlohy. Argumenty sa nazývajú, závislosť (pole) a funkcia (hlavné akcie). Závislosti nemusia byť:

gulp. Úloha ("mystask", funkcia () (// niečo)); Gulp. Úloha ("DependentTask", ["MyTask"], funkcia () ( // urobí niečo po "mystask" });

gulp.src označuje súbory, ktoré chceme použiť. Používa. Prístup rúry do súborov prostredníctvom pluginov.

gulp.Dest poukazuje na priečinok, v ktorom chceme uložiť modifikované súbory.

gulp.src a Gulp.Dest sa používajú na jednoduchú kópiu súborov:

gulp. Úloha ("copyhtml", funkcia () () ( // Skopírujte všetky súbory HTML zo zdroja / verejnosti / Gulp. Src ("zdroj / *. HTML"). Potrubia (GULP. Dest ("verejnosť")); ));

V GULP je postavený systém odpovede na odpoveď (GULP.WATCH). Túto úlohu môžete použiť na spustenie ostatných úloh, ktoré potrebujete pri zmene súborov.

Úloha Ranners a montážne systémy vysoko urýchľujú prácu, automatizáciu kompilácie, testovania a iných bežných úloh. Rovnako ako v akejkoľvek inej oblasti, na tomto trhu existujú silná konkurencia. Do roku 2014 dominovala úloha Ranner Grunt medzi nimi, ale neskôr bol malý tím oddelený od projektu, ktorý sa rozhodol urobiť alternatívny nástroj, Gulp, orientované projektové zhromaždenie.

Aby ste sa rozhodli rozhodnúť o výbere, v rámci článku zvážte hlavné úlohy manažérov:

grunt.

a tiež sa dotknite iných prostriedkov a metód budovania.

Hľadáme trochu dopredu, povedzme, že používame GULP v WaveAccess. Implementácia nástroja Ukázalo sa, že je veľmi jednoduché: v rodine výrobkov z JetBrains (Idea, Webstorm, RESHARPER), ktorú sme používali mnoho rokov, majú vynikajúce pluginy na prácu s Gulp / Grunt a NPM / Nodejs.

Správca úloh Vs. Systém montáže projektu: Aký je rozdiel?

Správca úloh - nástroj na automatizáciu úloh. V konfigurácii Rannerov môžete zaznamenať názvy týchto úloh; funkcie, ktorá ich vykonáva; Pluginy na urýchlenie štandardných činností, ale samotné úlohy môžu byť ľubovoľné. Napríklad:

Úlohy pre nasadenie (projekt ZIP, zaťaženie projektu vzdialený server atď)
Úlohy montáže projektu (Minifikácia, optimalizácia, overovací kód pre platnosť a TP)
Úlohy pre migráciu údajov atď.

Príklady takýchto nástrojov - Grunt a Gulp.

Montážny systém - Toto je nástroj, ktorý rieši iba jednu typickú úlohu projektu zhromaždenia na skript Java, ktorý zahŕňa:

zlúčenie,
kontrola kódu pre platnosť,
kód Minifikácia a TD.

Podobné nástroje zahŕňajú webpack, brokolica, brunch, browserify a ďalšie.

Všetky podobné funkcie Frontend môžu byť automaticky vykonané pomocou iných prostriedkov: napríklad pomocou NPM behu, o ktorom budeme tiež hovoriť o článku.

Príklad

Zvážte súbor GULP na montáž projektu:

CONST GULP \u003d vyžadujú (ďalej len "GULP"); Const coffee \u003d vyžadujú (ďalej len "gulp-coffee"); CONST CONCAT \u003d Vyžadovať ('Gulp-Concat'); const uglify \u003d vyžadujú (ďalej len "gulp-uglify"); const imagemin \u003d vyžadujú (ďalej len "gulp-imagemin"); const sourcemaps \u003d vyžadujú (ďalej len "gulp-sourcemaps"); const del \u003d vyžadujú ('del'); )

Ale zhromaždenie je špeciálnym prípadom veľkej typickej úlohy. Pre Gulp môžete napísať inú konfiguráciu - povedzte, pre nasadenie:

Var Gulp \u003d vyžadujú ("GULP"); varip \u003d vyžaduje ("Gulp-zip"); var del \u003d vyžadujú ("del"); VaR inštalácia \u003d vyžadujú ("GULP-install"); var runsequence \u003d vyžadujú ("run-sekvencia"); Var awslambda \u003d vyžadujú ("NODDE-AWS-LAMBDA"); gulp.Task ("Clean", funkcia (CB) (DEL (["./ DIST", "./dist.zip"], CB);); gulp.Task ("Kopírovanie", funkcie () ("index.js") .PIPE (GULP.DEST ("DIST /"));); Gulp.Task ("Node-Mods", funkcia ("./ Package.json") .PIPE (GULP.DEST ("DIST /")) .PIPE (Inštalácia (výroba: TRUE)));); // Vyčistite všetky adresáre AWS-SDK z NODE_MODULES. Nemusíme ich odovzdať, pretože inštancia Lambda už bude k dispozícii globálne. Gulp.Task ("Clean-AWS-SDK", funkcia (callback) (DEL (["DIST / NODE_MODULES / ** / Aws-SDK "], spätné volanie);)); Gulp.Task (" ZIP ", funkcia () (RETURN GULP.SRC ([" DIST / ** / * ","! Dist / Package.json "]) .PEPIPE (ZIP ("DIST.ZIP")) .PIPE (Gulp.Dest ("./"));)); Gulp.Task ("Upload", funkcia (cverback) (AWSLAMBDA.DEYPY (". / DIST) .Zip ", vyžadujú (" ./ lambda-config.js "), spätné volanie);)); Gulp.Task (" Nasadiť ", funkcia (spätná spätná väzba) (RETURNICKEJ ROZDELENIA ([" CLEAN "], [" KOPÍROVANIE "] , ["NODE-MODS"], ["CLEAN-AWS-SDK"], [ZIP "], [" UPLOAD "], CALLBACKU););

A môže byť opísaná nové úlohy ako kombinácia existujúcich:

Gulp.Task ('Nasadiť', GULP.Series ('Clean', 'COPY', 'NODE-MODS', 'CLEAN-AWS-SDK', 'ZIP', 'UPLOAD'));

Toto je rozdiel. Teraz zvážte základné nástroje.

gulp vs Grunt.

Takže, pred nami sú dve úlohy Ranner: Gulp a Grunt. Obaja používajú node.js a npm a dali úlohy pomocou Javascriptu.

Na prvý pohľad sú podobné, Avšak, Gulp má niečo, čo je vhodnejšie na montáž: zručnosť je paralelná s procesnými úlohami a kompaktnou konfiguráciou, laconickým API. Pozrime sa bližšie k ich princípe práce.

Závitové údaje

Máme grantový súbor, ktorý robí montáž a spracovanie CSS.

Môže byť zrejmé z nej, že pri štarte každého procesu:

otvorí súbor;

spúšťa proces;

šetrí zmeny;

zatvorí spracovaný súbor, ktorý zabráni tomuto procesu v ňom;

zaznamenáva súbor do posledného priečinka.

To znamená, že reťaz zahŕňa vytvorenie viacerých časových zložiek a uložiť medziľahlé súbory:

Pluginy písať rôznych autorov. Ku každému pluginu môžete pracovať so súbormi, obchádzajúcimi, súbory musia byť predložené ako objekty. V Gulp sa táto úloha vykonáva virtuálny súborový systém VYNYL-FS. A GULP okamžite odosiela súbor do nasledujúceho procesu bez vytvárania dočasných súborov a bez uloženia disku.

Rovnaká konfigurácia GULP je už kompaktnejšia:

Jeho celkový pracovný mechanizmus - streamovanie súborov bez písania na disk:

Postupnosť úlohy

Tam je ďalší rozdiel: Gulp štandardne asynchrónne vykonáva veci. V tomto prípade existujú výhody a nevýhody. V rovnakom konfiguračnom súbore dávame príkaz na spočítanie súborov z adresára Dev / * SCSS a pošlite ich do Sass.

Potoky posielajú výsledok V.PIPE. Metóda. Potrubie vám umožňuje zozbierať výsledok v pufri v častiach, a keď je plná, okamžite odosielate informácie do prúdu na čítanie bez ukončenia prijímania obsahu adresára.

Sekvenčná úloha úlohy robí GULP Rýchle a výkonné, ale občas potreba stále vykonávať úlohy synchrónne ako v Grunt. Problém možno vyriešiť prostredníctvom spätného volania, návratu prúdu alebo sľub. Úloha habré sa podrobnejšie demontuje. Tam je alternatíva na stránke npm.js

Ak používate GRUT, ale vy ste priťahovaní streamingových dát - rovnaký modul VYNYL-FS môže byť použitý na implementáciu v Grunt.

GULP Laconic API má len 5 metód:

Úloha (meno, fn). Registruje funkciu pomenovanú. Ak ich chcete najprv musíte najprv špecifikovať závislosť na iných úlohách.

Spustiť (úlohy ...). Vykonáva úlohy.

Sledujte (glob, fn). Vykonáva funkciu, ak súbor na mieste zmeny globu.

Src (glob). Ako parameter berie súborovú masku a vráti vlákno reprezentujúce tieto súbory. Potom môže byť tok prenesený do vstupného pluginu.

Dest (priečinok). Uloží súbory do zadaného priečinka.

Veľmi by som rád poznamenal prítomnosť () v "natívne" projekt API, pretože sledovanie konštantných zmien v súboroch je najdôležitejšou zložkou zostavy. Stručné rozhranie API umožňuje zamerať sa na jeho hlavnú úlohu na montáž projektov.

Alternatívy Gulp a Grunt

Napriek popularite GULP (viac ako 130 na stiahnutie za deň) a grunt (viac ako 86 na stiahnutie za deň podľa NPMJS.com), vývojári vidia v týchto systémoch a ich nevýhody: napríklad závislosť na plug-ins, neúplné Dokumentácia, nepohodlné ladenie. Alternatívne môžete zvážiť projektové montážne systémy (napr. Brokolica a webpack) alebo NPM skripty.

Projektové montážne systémy

Zvážiť niekoľko alternatívne riešenia na platforme node.js. Na montáž projektu môžu nahradiť GULP a Grunt.

Tento systém, rovnako ako GULP, vznikol ako konkurenčný úlohy-skoro grunt, ale vývojári to pôvodne koncipovali práve ako asistent stavať so všetkými výhodami a nevýhodami. Nebude "pochopiť" bez nastavení, že * .js je súbor s skriptmi, * .coffee je kávovar; Jeho konfigurácia je kompaktnejšia. Avšak akékoľvek ľubovoľné akcie v štádiu montáže sa nebude môcť zaviazať.

Tu je konfiguračný súbor brunch. Je napísaný v kávore (môžete tiež píšete na JS):

Tu chcem venovať pozornosť spoločným a objednávkovým operátorom. Na úrovni konfigurácie Brunch sa zdá, že musíte zbierať súbory v požadovanom poradí. Výsledkom je, že konfigurácia trvá 20-30 riadkov.

Brokolica.

Indi-náradie, ktorý je vo vývoji. Jeho vývojári chceli vytvoriť súťaž už GULP.

V porovnaní s GULP nástroj brokolice používa iné zásady:

Zrýchlenie. Každý plugin implementuje medziproduktové ukladanie výsledkov zostavy namiesto čiastočného vyberania iba potrebných súborov.

Stromov namiesto súborov. Gulp najlepšie transformuje jeden súbor do jedného finále. Predvolené Broccolli používa iba stromy, nie súbory a transformujú ich na iné stromy (degenerovať z jedného vrcholu).

V súčasnosti sa nástroj aktívne vyvíja, objavujú sa nové pluginy, ale pre seriózne projekty je príliš skoro: pluginy nestačia.

Webpack - flexibilný modulárny systém zhromaždenie. Má nezvyčajnú syntax, ale sama používa všetky syntaxy modulu.

Pochopenie, že musíte súťažiť s takýmito gigantmi ako GULP, tvorcovia sa rozhodli zmierniť náš život vo vývoji veľkých projektov. A pridané do užitočnosti:

Schopnosť automaticky budovať závislosti a zdroje dreva.

Pohodlné nástroje na implementáciu dynamického zaťaženia.

Kompatibilný s prakticky akýmikoľvek modulmi (AMD, UMD, ES 2015, Spoločné JS, moduly tretích strán na nich).

Kompatibilita s predprocesormi (Sass, Babel, Coffee Script, typ typu, atď.).

Live Reload (Asynchrónna batožinová technológia, pri ktorej prehliadač aktualizuje nie všetky stránky, ale samostatné aplikácie).

Schopnosť zdieľať kód a vygenerovať veľa súborov zväzkov, vyhnúť sa vytvoreniu jedného ťažkého zväzku.js.

Schopnosť optimalizovať kód.

Samostatne si môžete poznamenať flexibilný prístup k závislosti. Modul môže byť súbor JS, CSS a HTML a dokonca aj JPEG s PNG. Môžete použiť požadovať ("myjsfile.js") a vyžadujú ("mycssfile.css"), zdieľať a používať časti artefaktu znova.

Prečítajte si viac o možnostiach, konfiguráciách nástrojov, pluginy možno nájsť na github, v prezentácii s fronttalks: hlboký ponorenie v webpack.

nPM skripty

Montážne úlohy môžu byť vyriešené pomocou skriptov NPM. Mnohí vystrašiť túto myšlienku: niekoľko možností, skriptov nie sú dostatočne rýchle v porovnaní s GULP alebo Webback. Tieto nedostatky sú napriek tomu prehnané.

Schopnosti skriptu NPM

NPM skripty vyriešia pomerne veľa úloh. Môžete napríklad implementovať chybu skriptov:

("Názov": "NPM-Scripts - príklad", "verzia": "1.0.0", "Popis": "NPM skripty príklad", "skripty": ("PreBuild": "Echo som spustiť pred budovaním skriptu" , "Build": "Cross-ENV node_env \u003d výroba webpack" "Postbuild": "Echo som beží po stavebnom skripte"))

Skripty budú naložené v poradí podľa predpony: PreBuild, napríklad začne pred vybudovaním, pretože má predponu pre. Postbuild bude preto naposledy načítaný. Tím NPM Run Build ich spustí v požadovanom poradí.

Môžete volať jeden skript z druhého, aby ste rozložili komplexné úlohy. Napríklad, tu úloha PreBuild zavolá čistá úloha.

("Názov": "NPM-Scripts - príklad", "verzia": "1.0.0", "Popis": "NPM skripty príklad", "skripty": ("Clean": "Rimraf ./dist && Mkdir Dist "," PreBuild ":" NPM Run Clean "," Build ":" cross-env node_env \u003d výroba webpack "))

Ak sa úloha stane príliš komplikovanými, môžete vždy zavolať samostatný súbor:

("Názov": "NPM-Scripts - príklad", "verzia": "1.0.0", "Popis": "NPM skripty príklad", "skripty": ("Build": "Node Build.js"))

Vzhľadom na streamovanie Gulp pre montážne úlohy sa stalo oveľa pohodlnejším ako grunt. Ale môže byť implementovaný prostredníctvom NPM. V systéme Windows a UNIX sa streaming vykoná štandardne, bez uloženia medziľahlých súborov.

Napríklad v UNIX môžete vytvoriť obsah súborov a odoslať ho do nového súboru:

Grep 'moje meno' bigfile.txt\u003e linesthavemename.txt

Presmerovanie (\u003e) Odosiela požadované reťazce do cieľového súboru. Úloha sa vykonáva bez uloženia medziľahlých súborov.

Existujú však nepríjemnosti: Nemôžete zanechať komentáre v Package.JSON. Cesta von môže byť vytvorenie krátkych skriptov s pochopiteľnými menami zameranými na nejakú malú úlohu. Podrobnejšie, otázka nahradenia úloh Ranners NPM skripty je dobre osvetlená v anglickom jazyku, prečo som opustil GULP a Grunt pre skripty NPM.

Výsledok

Na trhu existuje skvelá súťažné nástroje na automatizáciu rutinných úloh (napríklad Gulp a Grunt), ako aj nástroje na automatizáciu projektovej zostavy (webpack, brokolica, medusa, prehliadač, atď.).

Ak sa pozriete na úlohu Ranners, potom GULP v porovnaní s Grunt je jednoduchší, pochopený a vyrába: vyhrá šetrí disk Operácie. Ale Grunt má viac pluginov (napríklad existuje testovací plugin). Z tohto dôvodu zostáva veľa fanúšikov.

Ak hovoríme len o zhromaždení, potom má GULP všetky výhody nad Grunt:

Architektúra potrieb pre prenos súborov cez reťazec poskytnutý modulom VYNYL-FS.

Štandardne - asynchrónne vykonanie úlohy.

Laconic API je len 5 funkcií.

Zároveň je webpack stavať rovnako zaujímavý nástroj. Poskytuje technológiu Live Reload, ktorá urýchľuje obnovenie prehliadača. Toto je obrovské plus: technológia šetrí čas na stlačenie tlačidla Aktualizovať, že vývojári musia neustále stlačiť. Gulp má tiež živé opätovné načítanie, ale webpack je ťažké porovnať s GULP alebo Grunt, pretože je to "ostré" len pod budovaním a nevie, ako riešiť svojvoľné úlohy.

Všetky tieto riešenia sú dokonale integrované s rodinou výrobkov z JetBrains, Avšak, my vo WaveAccess preferovaný grunt Široké príležitosti A pre verše a pre špecialistov Frontend.

Ak máte akékoľvek otázky a musíte vytvoriť webový projekt, napíšte nám [Chránené e-mail]

Predĺžiť
Grunt.
Gulp.
Bežcov.