Gentleman front-end fejlesztője. Építsen front-end az ujjaidon a Gulp Pleasant Frontend Project Build segítségével

szeptember 24. , 2016

A kérdések figyelembe veszik: a SASS stílusokkal való munka a SourCemaps használatával, a JS fájlok ragasztásával és tömörítésével, az RJS, a HTML előfeldolgozásával, a fájlokat, a képoptimalizálással, a helyi webszerver és a megfigyelési mód felemelésével. Üdvözöljük a cikkben, sok érdekes lesz!
P.S. Anyaganyag, ezért a cikk 3 részre oszlik: összeszerelési alapok és projektszervezés, írásvizsgálati alkalmazások a gerinc + igényeiről.js és valójában összeszerelés a Gulp-szel.

Miért van szüksége a FRONTENT-ra.

A fejlesztés egyik legfontosabb alapelve a modularitás. A projektkód frakcionálása sok kis, ideális esetben gyengén kapcsolt modulokba. Ez nem csak a JavaScript-kódot érinti. Ez vonatkozik a stílusokra és a HTML sablonokra, a különböző könyvtárakra.

Ez úgy néz ki, mint a gerinc + igénylő egyszerű alkalmazás szerkezete.

És ez egy kis tesztprojekt, igazi melléklet A fájlok több száz és ezer lehet. A felhasználói böngésző létrehozása több száz HTTP kérést tesz lehetővé legalábbis embertelen. Meg kell adnunk gyors betöltés Írott szolgáltatás. Ezért az összeszerelő eszköz egyik legfontosabb feladata egy minisztérium, a projekten használt fájlok számának csökkenése, ragasztva őket a bandákba. A kimeneten egy rövidebb struktúrával kell rendelkeznünk, például ez:

A különbség jól észrevehető: több tucat fájl helyett egy index.html, egy CSS fájl, optimalizált és tömörített képek külön mappában, bár a screenshot nem látható :-)

És a legérdekesebb dolog: a JS mappában csak 3 tömörített fájlt kaptunk.
P.S. Miért három, és nem, később elmondom.
Megjegyzem, hogy ez a tesztalkalmazás valódi szerkezete, amelyet hamarosan írunk.

Csak egy okot írtam le az összeszerelő eszközök használatára, de már elegendő a Gulp, Grunt, Webpack vagy valami hasonló a projektekben. És nem számít, hogy egy hatalmas szolgáltatást, egy kis gyógyfürdőt (mint a mi cikkünkben) vagy a céloldalon írunk. Az összeszerelés elvei minden projekt esetében ugyanazok, és csak különböző feladatokban és megközelítésekben különböznek egymástól. Példánkban olyan struktúrát hozunk létre, amely a jövőben bővülhet, de a kimenetnek mindig van egy tiszta veremfájlok, amely készen áll a termelésre - egy harci oldalra.

Hogyan szervezzük meg megfelelően a projektet.

Ennek elve: A fejlesztői fájlokkal rendelkező szakasz van, összegyűjtött és minden más, amit ez a jó szolgál. Hozzon létre 2 mappát a projekt gyökerében: SRC és építés. Az SRC-ben és csak az SRC-ben fogunk dolgozni, új fájlokat hozunk létre, szerkeszteni őket, és általában szórakozhatunk. A fenti képernyőképen, ahol egy pár tucat fájl, a tesztprojekt SRC mappájának tartalmát látja. És csak néhány szép fájl alatt a Build mappából. Csak automatikusan alakul ki, az összeszerelő eszközök, semmi sem szabályozni. Mindenesetre, minden egyesülést, annak tartalmát új fájlok (és az építési mappák fejlesztési módjában) tartják fenn - egyáltalán eltávolítják - nem távolítják el, hogy ne corp a szemek)

Az SRC és a Build, a package.json, a Gulpfile.js mappa mellett a Node_modules mappa és az opcionális ,.gitignore gyökerezik. Még mindig fel kell vennie a naplók mappáját - ez egy apache generációja és hosszú távú szokása, hogy a projekt naplózását saját mappában tartja, persze, a Gita Repository eltávolítása :-)

Így néz ki a projektszerkezet:

Építési tartalom szerint úgy gondolom, nincsenek kérdések, megmagyarázom az SRC-t:

1. html - index.html, root index fájl. Projekt. Miért nem azonnal az SRC gyökere? Mert előkészíti és létrehoz egy Gulpot. Hogyan, tanulni egy kicsit később, amikor közel van a gyülekezethez.
2. IMG - képek, nem tömörítettek, rendes
3. JS - Minden JavaScript kutyás projekt, modellek és prezentációk gerinc
4. LIB - Harmadik fél könyvtárak, mint a background.js, igények.js, lodash.js és mások
5. Scripts - JS parancsfájlok, amelyekre szükség van egy harci oldalra, de nem szükséges a fejlesztési módban. Az Analytics kódok, különböző kísérletek és egyéb marketingdarabok.
6. Stílusok - SASS fájlok stílusokkal. Az összegyűjtött CSS fájl ugyanabba a mappába kerül (csak a fejlesztési módban)
7. TPL - HTML-sablonok. Használt Backbone Nézetek a szükséges igényekhez.js szöveg bővítmény segítségével

A tesztalkalmazás megjelenése elég nem volt. Azt mondhatjuk, hogy egy ilyen szar egy pár által készül hTML sorok és CSS kód egyetlen JS fájl nélkül.
De folytatjuk a célt, hogy ne rajzoljunk egy gyönyörű képet, és hozzon létre egy megbízható projektstruktúrát, és minél több szempontot kell figyelembe venni. Amikor a projekt több száz fájlból áll, készen állunk erre a támadásra, és könnyen kezelhetjük a megnövekedett köteteket. Ezért a tesztalkalmazás szegényeinek és külső küldöttségének ellenére megismerjük a nagy és összetett projektek összeszerelését.

Milyen összeszerelési feladatokat megoldunk.

Hadd emlékeztessem Önt, hogy két összeszerelési módot értünk el: a fejlesztés és a termelés. Minden feladatunkat meg fogunk írni, emlékezve ezekre a két módra. A fejlesztési folyamat során nem szükséges minden művelet, és nem minden a termelés összeszerelésében.

Itt van egy lista arról, hogy mit fogunk tenni a tesztalkalmazás írása után:

1. A fájlok és mappák törlése az előző összeszerelés eredményeiből
2. CSS összeszerelése a SASS fájlokból, tömörítéssel és nélkül
3. Csatlakoztatja a sourcemaps-t a stílusokhoz, ugyanakkor megmutatom Önt a példában, miért van szükség
4. A JS-BANDL összeszerelése az igényekkel
5. Az egyes JS fájlok (elemzők) kötése és tömörítése
6. HTML előfeldolgozása.
7. Optimalizálás és kép tömörítés
8. Emelje fel a helyi webszervert
9. Objektív megfigyelési feladatok, amikor a fejlesztési módban dolgozik - Watch-Tasch
10. Gyűjtemény néhány feladat Egy csomó - végső ízlése a termelési összeszerelési és fejlesztési munkákhoz

Tehát azon tűnődtük, hogy miért szükséges a határ menti, úgy döntött, hogy a projekt felépítéséről van szó, részletesen lebontották, hogy szeretnénk a gyülekezetből, és beszéltünk a tesztalkalmazásról. A cikk következő részében egy egyszerű gerincalkalmazást írunk az előírt.js-vel együtt. Ha nem ismeri a gerincét és / vagy igényeit.js, semmi szörnyű. Valójában az alkalmazásban lévő gerinc-ussokód nem elég. Könnyedén használhatja kedvenc könyvtárát, vagy csak írja a JavaScript / JQuery kódot, és hagyja ki a Readjs beállítások részét.

Azokban a napokban, amikor a webhelyek kicsiek voltak, nem volt szükség a front külön összeszerelésére. Azonban a CSS és a JS hangereje és összetettsége megnövekedett, és a nézet, amelyben kényelmes fejleszteni, elkezdett különbözni attól a nézetetől, amelyben meg kell mutatni az eredményt a felhasználónak. Olyan feladatok voltak, mint a fájlok összefűzése (ragasztása), minimalizálja a kódot és még az előkészítést is. Az eredmény a szakosodott rendszer volt a frontendant összeszerelésére, amelyet meg fogunk mondani.

Természetesen, amint az összeszerelés szükségessége észrevehető volt, azonnal a Backend által használt eszközöket elkezdte átadni a frontendre. Fő problémájuk az az oka, hogy jelenleg kevésbé használják az elülső részeket, teljesen nem élesítik a sajátosságát, mivel a projektszerkezet, a felhasznált technológiák és a fejlesztési ciklusok nagyon függnek a projekt feladataitól, és jelentősen eltérhetnek . Ugyanaz a hangya, például egy verbális szintaxissal rendelkezik, és nem tudja különösen tudni, hogyan lehet az elülső dolgokat: beépített feladatok eléggé, de rosszul bővül. Ha a GNU-ről beszélünk, sokkal inkább univerzális, mert héjparancsokat működtet. A hátrányok, meg kell említeni, hogy meg kell említeni egy speciális szintaxist, amelyet tovább kell vizsgálni, hogy a héj jól ismeri a héjat, valamint a makefile gyors szövődményének tendenciáját a Közgyűlés követelményeinek növekedésével.

Nézzük meg a közepes méretű webhelyet egy szabványos struktúrával, és próbálja meg felsorolni az összeszerelés fő szakaszait, amelyeket áthalad. Az egyszerűség kedvéért tegyük fel, hogy nem zavarja a teremtés különböző JS fájlok a különböző oldalakon, de ugyanakkor szeretné megtartani több kisebb fájlokat a fejlesztési környezetben támogatni bármilyen modularitás. Általában valami ilyesmi:

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

Az összeszerelési rendszer általában a következőket teszi:

Összegyűjti az összes JS-fájlt egy (a kívánt sorrendben, nem szeretnénk letölteni a parancsfájljainkat, mint a jQuery);
ellenőrzi a JS kódot érvényességi (például JSHINT használatával);
minimálisra csökkenti a kódot, ha szükséges, leírja (vagyis érthetetlen);
cSS-fájlokat hoz létre (az itt is fontos, mivel a tulajdonságok gyakran újradefiniálódnak);
minimalizálja a CSS-t;
fájlokat hajtogat egy külön könyvtárba, ahonnan csatlakoztatja őket a HTML-ben.

Gyakran előfordul, hogy ez az egyszerű rendszer bonyolítja további követelmények: teszteket hajtott, CSS-preprocessors összeállítani, képek vannak optimalizálva, sablonok összeállítani.

Mindezek a feladatok, és még több, képesek megoldani a modern összeszerelő eszközöket. Figyelembe vesszük a legnépszerűbb megoldásokat, amelyek a NODE.JS platformon dolgoznak. Előnyük egyértelmű nyelv, amely ismeri (vagy úgy véli, hogy ismerik az összes Frontend-fejlesztőt, a kezdeti összpontosítani a frontend feladatainak megoldására, valamint egy tiszta csomópont.js környezetre, amelyben már fejlesztheti az alkalmazást .

Röfög.

Grunt a legrégebbi, legfontosabb és legnépszerűbb eszköz az összeszereléshez. Szinte az összes összeszerelési rendszer vizsgálta, az egyik vagy más módon összehasonlítja magukat a GRUT-szel, és néhányan gyorsabban vagy egyszerűbb alternatívákban merülnek fel. Ennek ellenére néhány alapvető hibája van.

Először is, mint sok frontend-fejlesztő azt mondja, hogy rácsot választanak. Egy egyszerű összeszerelési rendszer beállításához szüksége lesz egy konfiguráció a száz sor alatt. Azonban önmagában ez nem olyan hiányosság: a konfiguráció meglehetősen könnyen olvasható, és a Grunt népszerűségének köszönhetően általában nem lehet egy kész konfigurációt találni a modell feladat alatt.

Másodszor, a grunt univerzális termékként fejlesztették ki, vagyis az alapja, hogy szinte minden olyan feladatot megoldani, amely a projekt összeszereléséhez kapcsolódik. Hűvös, de a sokoldalúságnak fizetnie kell. Mindkettő említett több-ellenállás és sebesség. A csomópontok más összeszerelési rendszereihez képest észrevehetően lassabb, és különösen kellemetlen, hajlamos lassítani, ahogy a projekt növekszik. Ha nem megy be a grunt építészet részleteit, akkor az ok abban rejlik, hogy minden alkalommal, amikor minden alkalommal összegyűjtenie, például a JS fájlt, átveszi az összes JS fájlt. Megpróbálhatja felgyorsítani az összeszerelési folyamatot, kézzel szükséges linkeket beszélve a fájlok között, de egy komplex fájlfüggőfával rendelkező projekten túlságosan bonyolult lehet.

Mindezek ellenére a Grunt hatalmas ökoszisztémával rendelkezik: több száz bővítmény, több ezer projekt, több milliárd fejlesztő, ez minden. Ez az, hogy nem elég, hogy a grunt univerzális, szintén egy plugin az Ön feladata, valószínűleg írva.

Összefoglalva azt mondhatjuk, hogy a Grunt kiváló választás a kis- és középvállalkozások számára, különösen akkor, ha korábban nem állított fel szerelési rendszert. Hatalmas közösség, egy csomó bővítmény, érthető dokumentáció és még cikkek, valamint az oroszok számára azoknak a szerencsétleneknek, akik nem tudják. És persze, ha a jövőben valamilyen oknál fogva a GRUT megszűnik Önnek, akkor mindig egy másik rendszerbe juthat, amely megfosztja a hibáit.

Korty.

Gulp - jelenleg fejlődő jelenlegi szerelési rendszer. Az architektúra alapja a node.js-ben lévő patakok használata, amely lehetővé teszi, hogy ne rögzítse az ideiglenes fájlokat és mappákat a lemezre. A Gulp fő előnyei - a konfiguráció sebessége és rövidsége. Ráadásul, ha az első kétségtelenül, akkor a rövidséggel a GRUT-hez képest egyszerűen a másik szerkezetének köszönhető. Ha a Grunt Configben van, akkor egyedileg működik a pluginokkal, mindegyikük beállítása, majd a Gulp konfigurációban le kell írnia az összes fájlt (vagy fájlkészletet) összegyűjteni kívánt folyamatot. Itt van egy életmód a Compilation Sass:

Gulp.Task ("Styles", funkció () ("styles / *. SCSS") .pipe (SASS (((stílus: "kibővített")) .pipe (átnevezés ((utótag: ".min")). cső (minifycss ()) .pipe (gulp.dest ("Build / Styles / CSS"));));

Az első sorban regisztráljuk a Gulp feladatot a névstílusokkal. Ezután következetesen leírjuk, hogy mit kell tennie az egyes fájlokhoz, amelyek alkalmasak a stílusok / * maszk számára. SCSS: Compile Sass, Add.Min a fájl nevére, minimalizálja, tegye a végső könyvtárba. Ha meg kell tennie a fájlt, akkor egyszerűen hozzáadjuk a megfelelő parancsot, például.pipe (Adjon hozzá egy megjegyzést egy ASCII egyszarvúnak a fájl megkezdéséhez) (remélem, hogy ez a mindennapi feladat, végül plugin). Szeretem ezt a megközelítést a konfiguráció írásához: jobban leírja, hogy mi történik a fájlokkal.

Természetesen, míg a Gulp elveszíti a plug-ins számát, de van egy plug-in feladat. Valószínűleg elegendő meglévő bővítmény van, és ha valami nagyon rossz, akkor mindig írhat saját (vicc). By the way, van egy Gulp-Grunt csomag, amely lehetővé teszi, hogy futtassa a GRUT feladatok Gulp-t, ha nagyon szükséges.

Ha tetszik egy hasonló megközelítés az összeszereléshez, a sebesség fontos, és nem kell konkrét feladatokat elvégezni, a plugint, amely csak a grunt, akkor a Gulp kiváló választás lehet. Jelenleg a Gulp továbbra is a legsúlyosabb rohadós versenytárs.

Brokcolli.

A vizsgált összeszerelő eszközök legfiatalabba valójában a fejlesztési szakaszban. A brokcolli fejlesztők nem rejtik el, hogy az öblítő inspirálta, de úgy vélik, hogy néhány fogalom alapul, tévesen. Például kiválasztották az összes köztes összeszerelési eredmény (és az egyes plug-insek által végrehajtott) gyorsítótárat, hogy csak a szükséges fájlok részleges lázadása helyett gyorsítsanak fel. Nem tetszettek, hogy a Gulp a legjobban működtethető az egyik fájl átalakításával egy döntőbe, azaz egy-egy. A "sokat egy" típusú műveletek végrehajtásának javítása érdekében a Gulp jelenleg fejlődik bonyolult rendszer Egy virtuális fájlrendszer létrehozásával, hogy a brokcolli fejlesztők felesleges komplikációnak tűnnek, és megnyilvánulnak a Gulp valódi fogalmai gyengeségeinek megnyilvánulása. A Brokcolli kezdetben a fák helyett a fájlok helyett a fák fogalmát működteti, és csak a fák átalakulását más fákra (még degenerált és egy csúcsról is) teszi.

Az összeszerelés problémájának nagyon ésszerű elméleti megközelítése nem távolítja el a brokcolli kiterjesztések számának problémáit. Sajnálatos módon körülbelül két tucat, és csak a legalapvetőbb feladatok teljesülnek. Ha meg akarsz próbálni valami újat, nézd meg a brokcollit, nagyon gyors, aktívan fejlesztették ki, de valószínűleg komoly projektekben használható.

Villásreggeli

A Brunch-t ugyanazzal a feladattal hozták létre - az összes fronton, de teljesen megközelítette a másik oldalról. A Brunch-fejlesztők úgy döntöttek, hogy jó megértést kapnak a téma területéről, vagyis egy kevésbé univerzális eszköz készítése, amelyet pontosan a frontendum feladatainak megfelelően élesítenek, például bármilyen beállítás nélkül, megérted, hogy * .js egy fájl Scripts, * .coffee - Coffeescript és így tovább. A Brunch meglehetősen gyors, sokkal gyorsabban, de egy kicsit lassabb Gulp. A Brunch feltétel nélküli előnyei is tartalmazhatnak egy igazán kompakt konfigurációt, kevesebbet, mint a grunt és a gulp, időnként. Itt például egy egyszerű konfigurális brunch:

Exports.config \u003d Fájlok: JavaScripts: Javascripts: "Javascripts / App.js": / ^ App / "JavaScripts / Vendor.js": / ^ (Bower_Components | Vendor) / stíluslapok: közös : Után: ["Vendor / styles / helpers.css] sablonok: közös:" JavaScripts / App.js "

Ne feledje, hogy a konfiguráció mind a kávécripten (mind ebben az esetben) és a szokásos JS-en írható. Olyan rendszeres modult hozunk létre, amely a JSON-t az összeszerelési beállításokkal visszaadja.

Figyeljen a közösség és a megrendelés gombjaira. Ez az a tárgyi terület ismerete, amelyet említettem - a Brunch Config szinten tudja, hogy legvalószínűbb, hogy ragasztja a fájlokat, és néhányat a többiek előtt. Pontosan ez lehetővé teszi, hogy a 20-30-as brunch vonal 400 sorának 400 sorát cserélje ki.

Plusz, a BRUNCH ökoszisztéma sokkal kisebb, mint Grunt és még a Culp. Plugins körülbelül 50 (hasonlítsa össze a 450+ -al a Gulp-ben), a fejlődés nem túl gyors, általában minden nagyon szomorú itt.

Összefoglalva: Ha nagyon szereted a rövid konfigurációkat, a sebesség fontos, de ha nincs szüksége különleges lépésekre az összeszerelési szakaszban, akkor a brunch. Zavarodott, persze nem nagyszámú Plugins, de talán a helyzet megváltozik.

Enb.

Nos, a végén a legédesebb. Azt akarom mondani, hogy a Yandex Marat Dulin által kifejlesztett összeszerelési rendszer, amelyet enbnek neveznek. Most már és a projektünkön használjuk. A megközelítés alapvetően különbözik az összes leírt rendszertől: Kezdetben létrejött, hogy a BEM-módszert alkalmazó projektekkel dolgozzon, bár a szerző megjegyzi, a platformja mentes a BEM ideológiájától, és felhasználható minden megfelelő struktúra projektjétől .

Röviden, mi a lényeg. Az enb-ben a célpont fogalmát működtetjük, vagyis az összegyűjtendő végleges fájl, vagy a csomópontok (az általános esetekben lévő mappák), amelyekre szükség van néhány fájlkészletet. A célfájl összegyűjtése érdekében néhány technológiát (nagyjából beszédet, plun extractineket használunk, bár a technológiák kisebb méretűek és szakosodottak). Az első ENB-t a célok megteremtéséhez szükséges forrásokkészlet határozza meg (alapértelmezés szerint több alapvető technológiát vesz igénybe, a Bem-módszerrel való együttműködés, azaz * .bemdecl-fájl, amelyben a függőség A különböző blokkokból származó csomópontból kimondja ezt a függőséget (amikor a blokk, amelyen az oldal attól függ, a másiktól függ, mindkettőt a kívánt sorrendben csatlakoztatja), majd megtalálja az egyes regisztrált technológiákhoz szükséges fájlokat. Az Enb követi a konfigurációban leírt fájlátalakítási sorrendet (itt lehet nyomon követni néhány analógiát a Gulp segítségével). Annak ellenére, hogy bizonyos különbségek vannak a standard összeszerelési rendszer megközelítéséből, józanul alapvető fogalmakkal, majd az Enb-val való munka meglehetősen könnyű.

Az ENB fő előnyei: a felgyülemlési sebesség a rugalmas gyorsítótárazási rendszer miatt és a köztes adatok cseréjének képessége különböző technológiák, a független folyamatok párhuzamosítása, valamint a legsúlyosabb technológiák külön altermékekké történő elosztása. Az Enb rendkívül könnyű új technológiákat írni, ha nem tetszik a szabvány viselkedése.

A hátrányok magukban foglalják azt a tényt, hogy az enb configa meglehetősen verbose, mivel az összes összeszerelési szakasz teljesen kezelhető. Plusz, az Enb még mindig a Bem-módszertanra írta, és hogy a projekthez teljesen más struktúrával rögzítse, szükségtelen televíziókra van szükség. Az ENB esetében nincs olyan sok írásos technológia (kb. 60), de a BEM projektek többségével a bummokkal együtt.

Összefoglalva: Enb - a legjobb választás A BEM módszertanon alapuló projektek esetében, amelyeket személyesen figyelembe vettem a legmegfelelőbb a közepes és nagy helyszínek számára, mivel a blokkok és a bibiók kódjának megszervezése. Ez nagyon gyors, összegyűjti tucatnyi oldalt és több száz fájlt a másodpercek számlálásához, egyszerűen beállítva és kellemes használatra. Ha a projekt nagy, akkor a kód és a fájlok szabályai ezer sorban, azt tanácsolom, hogy vizsgálja meg a BEM-t a Frontend projektek szerkezetének megszervezésének módjaként. És ha szeretsz BEM, szeretni fogja, és eNB, mint a legtöbb természetes szerszám a BEM projektek.

Szeretne több pontot tárcsázni a Google Oldalsebességben? Nem tudom, milyen "front-end" összeszerelés? Akkor itt érdekes lesz.

Mi a csomópont?

A NODE.JS az "Northern JavaScript" néven. Ez a platform lehetővé teszi, hogy programokat írjon a JavaScript szintaxis segítségével.

A Windows, a Mac OS és a Linux megvalósításai vannak.

A készlet tartalmaz egy csomagkezelőt NPM.Amellyel telepíthet csomagokat.

Mi a Gulp?

A Gulp egy olyan csomópont, amelyet a node.js, amely segít a webmestereknek az elrendezés elrendezésében.

A Gulp telepítéséhez használja a parancssorot.

NPM Telepítse a Gulpot.

A cikk végén van olyan fájl, amely segít egy tipikus projekt összegyűjtésében.

Ebben a példában a Gulp segítségével a következőket fogjuk tenni:

Automatikusan optimalizálja a képeket az interneten;
Gyűjtsön össze egy minimális stílust az előfeltételektől (SASS, SCSS);
Gyűjtsön össze egy minimális fájlt szkriptekkel.

Hogyan kell összegyűjteni egy front-end Gulp segítségével?

Ahhoz, hogy megértsük, hogy minden működik, mindent meg fogunk vizsgálni lépésekben.

A szerkezet megtekinthető a képernyőképen.

Eszközök mappa - képforrásokhoz, stílusokhoz és szkriptekhez;
Nyilvános mappa - A projektszerelvény eredménye benne helyezkedik el;
gulpfile.js - olyan fájl, amely leírja a munkás munkájának logikáját;
a csomag.json olyan fájl, amely információkat tartalmaz a Gulp helyes működéséhez használt programokról és bővítményekről.

package.json.

Fájl tartalma:

("Név": "Gulp_Project", "verzió": "1.0.0", "Leírás": "Példa", "Fő": "Gulpfile.js", "Scripts": ("Teszt": "Echo \\" Hiba: Nincs teszt megadva \\ "&& kijárat 1"), "Szerző": "Dmitriy Ilichev", "Licenc": "ISC", "Devdependenciák": ("Gulp": "^ 3.9.0", "Gulp-CSSO ":" ^ 1.0.0 "," Gulp-Concat ":" ^ 2.6.0 "," Gulp-Uglify ":" ^ 1.2.0 "," Gulp-Imagemin ":" ^ 2.3.0 "," Gulp -Sass ":" ^ 2.1.1 ")))))

Ez a fájl a következőképpen világos:

A projekt neve Gulp_Project, verzió és leírás;
A fő fájl Gulpfile.js;
A projekt szerzője, az engedély - mindez nem olyan fontos, és egyszerűen ezek a mezők üresek lehetnek;
Érdekes pont a devdependenciák. Ez leírja a függőségeket.

A fájl szerkeszthető a szokásos módon szöveg szerkesztő. Az új projekthez az NPM INT parancs segítségével is létrehozható.

Ennek alapján a node.js megérti, hogy meg kell dolgoznunk:

Gulp 3.9.0-es verzió és magasabb az összeszereléshez;
Gulp-CSSO 1.0.0 és újabb verzió - plugin a stílusok (CSS) miniszterzéséhez;
GULP-CONCAT 2.6.0 és annál magasabb verzió - plugin több fájl ragasztásához egy;
Gulp-Ugliferify 1.2.0 és annál magasabb verzió - plugin a JavaScript minimalálásához;
Gulp-Imagemin 2.3.0 és annál magasabb verzió - plugin a képek optimalizálásához;
Gulp-Sass verzió 2.1.1 és annál magasabb - plugin, hogy CSS-t kap a SASS (SCSS).

Kiváló! Ezt követően telepítenie kell mindent. Ez kész van parancs sor. Míg a projektmappában végre kell hajtania a parancsot:

NPM telepítés

Minden a szükséges információk a package.jsonból származik.

Mindezek a mágia után megjelenik a Node_modules Service mappa.

gulpfile.js.

Fájl tartalma:

/ * * * Határozza meg a változókat * * / var gulp \u003d igényel ("Gulp"), // jelentette a Gulp JS Uglify \u003d szükséges ("Gulp-Uglifery"), // minifikáció JS CONCAT \u003d igényel ("Gulp-Concat") , // fájl ragasztás imagemin \u003d igényel ("Gulp-imagemin"), // a CSSO \u003d a képek minifikálása ("Gulp-CSSO"), // minifikáció CSS \u200b\u200bSASS \u003d szükséges ("Gulp-Sass"); // SASS konvertálás (SCSS) a CSS / * * * feladatok létrehozása (ízlés) * * /// Sass feladat. Elindítja a Gulp Sass Command Gulp.task ("Sass", Funkció () (Gulp.SRC ("/ Assets / Styles / Style.Scss ") // fájl, amely a folyamatok.pipe (Sass (). Be (" Hiba " , sass.logerror)) // Convert Sass in CSS .pipe (CSSO ()) // minifixture CSS, az előző lépésben. Cső (Gulp.dest ("./ Public / CSS /")); // eredmény Írunk a megadott címen); // "JS" feladat. Elindítja a Gulp JS parancsot Gulp.task ("JS", FUNCTION () (Gulp.SRC (["./assets/jasavarcrips/jquery-2.1.4.min.js", "./assets/javascripts/bootstrap. Min .js "," ./assets/javascripts/script.js "]) // fájlok, amelyek folyamatosan (concat (" min.js ")) // ragasztják az összes js .pipe (Ugliferify ()) // az eredményeket "Port" minifixture.pipe (gulp.dest ("./ public / js /")) // eredmény, amit a megadott címen írunk); // Probléma "képek". Elindítja a "Gulp képeket" a Gulp.task ("Képek", Funkció () () (Gulp.SRC (". Eszközök / képek / ** / *") // A mappában és az almappáiban bármilyen fájlt készítünk. Cső ( Imagemin ()) // Optimalizáljuk a webes képeket. Cső (Gulp.dest ("./ Public / Images /")) // Eredmény, amit a megadott címen írunk); // "Watch" feladat. A "Gulp Watch" paranccsal kezdődik // A fájlok változásait figyeli, és automatikusan elindítja a másik Gulp.task feladatokat ("Watch", Funkció () (// * .scss fájlok módosítása a stílus mappában és az almappákban Futtassa a Sass Gulp feladatot. Nézd ("./ Eszközök / stílusok / ** / *. SCSS", ["SASS"]); // A * .js fájlok "JavaScripts" és az almappák futtatásakor a JS Gulp futtatása. Nézési feladat ("./ Eszközök / JavaScripts / ** / *. JS", ["JS"]); // Ha bármilyen fájlt megváltoztat a "Képek" mappában és almappákban, indítsa el a Gulp.watch feladat (" ./ Eszközök / képek / ** / * ", [" Képek "]);));

Fő chip - a feladatban néz.. Miután egyszer futtatta, biztonságosan működhet a forrásokkal, és a projekt automatikusan összegyűjti minden alkalommal, amikor a szerkeszthető fájlokat mentheti.

A kimeneten készen állunk arra, hogy közzéteszi a sablont az interneten.

A feladatok külön-külön indíthatók el. Ennek eredményeként az archívumban a cikk végén megtalálja a következőket:

! jegyzet Az archívum kicsomagolásához először az NPM telepítési parancsot kell végrehajtania. Ez a mappa meglehetősen nagy számú fájlt tartalmaz, és minden alkalommal, amikor másolja / illessze be őket - az időpocsékolás.

Őrizetben

Vannak hatalmas más hasznos bővítmények. Például egy csodálatos jade sablon, amely időnként felgyorsítja az írást hTML kód, Valaki lehet, hogy kevesebbre és így tovább.

A bemutatott példa csak egy platform és egy sablon, amelyből lehet elkezdeni mindezeket a gyönyörű zsetonokat sok tudás nélkül.

BAN BEN utóbbi időben Korty. Nagy népszerűségű, és világos, miért. Gyorsabb, szebb és könnyebb, mint Röfög.. Gyakran kellett dolgoznom, de mindig vettem készenléti megoldások És nem értette teljes mértékben, hogy mindent megtett. Ezen a hétvégén úgy döntöttem, hogy szétszerelem és zárja be ezt kis probléma. Vegyük ezt és beszélj ma.

Mi a Gulp?

A Gulp egy elülső szerelési eszköz. Lehetővé teszi az ismétlődő feladatok automatizálását (összeszerelés és minifikáció CSS \u200b\u200bés JS fájlok, indítási tesztek, újraindítás a böngésző és mások). Így a Gulp felgyorsítja és optimalizálja a webfejlesztési folyamatot.

A Gulp telepítése.

A Gulp telepítése elég könnyű. Ha valami nem működik, írjon a megjegyzésekbe, vagy dobja a problémát. Tehát a telepítéshez 3 lépést kell tennie:

Telepítse a Gulp Global-t
Telepítse a Gulp-t Devdependenciáknak (fejlesztési függőségek)
Hozzon létre egy gulpfile.js fájlt

Az első lépés a Gulp globálisan telepítése. Nyissa meg a terminálot, és írjon:

nPM Install - Global Gulp

Ezután telepítenie kell a Gulp-t, mint Devdependenciákat a projekthez. Győződjön meg róla, hogy van egy csomag.json fájl. Ha nem, akkor hozzon létre az NPM init konzolba írásával. Most telepítheti a Gulp-t Devdependenciáknak:

nPM telepítése --Save-Dev Gulp

Végül Gulpfile.js-t kell létrehoznia a projekt gyökerében, amely tartalmazza a feladatokat (feladatokat). Mint közbenső lépés, telepítjük a Gulp-util plugint. A bővítmények telepítéséhez:

nPM telepítése --Save-Dev Gulp-util

Most eljött az idő, hogy írja az első feladatunkat. Nyissa meg az újonnan létrehozott Gulpfile.js fájlt, és írja le a következőket:

/ * Fájl: Gulpfile.js * / // összegyűjti az összes bővítményünket var gulp \u003d szükséges ("Gulp"), gutil \u003d igényel ("Gulp-util"); // Alapértelmezés szerint végrehajtandó feladat létrehozása Korty. Feladat ("Alapértelmezett", funkció () (Return Gutil. Napló ("Gulp fut!")));

És most el kell indítanunk a Gulpot a terminálban, és valami hasonlóat fogunk látni:

\u003e Gulp [12:32:08] Gulpfile ~ / Projects / Gulp-Scotch-Io / Gulpfile.js [12:32:08] "alapértelmezett" ... [12:32:08] Gulp fut! [12:32:08] befejezte az "alapértelmezett" után 1 ms

Áttekintés

A Gulp maga nagyon mérlegel a lehetőségekről. De mindössze annyit kell tennie, hogy külön bővítményekre kell helyezni. A Gulp-szel együtt csodákat hoznak létre.

A Gulp API nagyon kicsi, és csak 4 magasabb rendű funkciót tartalmaz:

gulp.task.
gulp.SRC.
gulp.dest
gulp.Watch

a Gulp.task meghatározza feladatainkat. Az érveket a függőség (tömb) és a funkció (fő akciók) hívják. A függőségek nem lehetnek:

korty. Feladat ("Mytask", funkció () (// csinál valamit)); Korty. Feladat ("Depenttedtask", ["Mytask", funkció () () () () // tegyen valamit a "mytask" után });

a Gulp.SRC jelzi a használni kívánt fájlokat. Ez használ. Csőhasználat a fájlokhoz a pluginokon keresztül.

gulp.dest Pontok a mappába, amelyben szeretnénk menteni a módosított fájlokat.

gulp.SRC és GULP.DEST A fájlok egyszerű példányához használható:

korty. Feladat ("copyhtml", funkció () () () () ( // másolja az összes HTML fájlt a forrás / nyilvánosság / Korty. SRC ("SOURCE / * HTML"). Cső (gulp. Dest ("nyilvános")); ));

A Gulpban egy fájlreakciós válaszrendszer van beépítve (Gulp.Watch). Használhatja ezt a feladatot a fájlok cseréje során szükséges egyéb feladatok elindításához.

A feladatkategóriák és az összeszerelési rendszerek nagymértékben felgyorsítják a munkát, az összeállítás, a tesztelés és egyéb rutinfeladatok automatizálását. Mint bármely más területen, erős verseny van ebben a piacon. 2014-ig a Ranner Grunt feladata uralta őket, de később egy kis csapatot elválasztott a projektből, amely úgy döntött, hogy alternatív eszközt, Gulp, orientált projektszerelvényt hoz létre.

A kiválasztásnak a cikk keretében történő eldöntéséhez tekintse meg a fő feladatkezelőket:

röfög.

És érintse meg más eszközöket és építési módszereket is.

Egy kicsit előre nézzük, mondjuk, hogy a Gulp-t a WAVEACCESS-ben használjuk. Végezze el az eszközt, hogy nagyon egyszerű legyen: a Jetbrains termékek családjában (ötlet, webstorma, újrahasznosító), amelyet sok évig használunk, kiváló pluginokkal dolgozunk a Gulp / Grunt és az NPM / NPM / NODEJS-vel való munkához.

Feladatkezelő vs. Projektszerelő rendszer: Mi a különbség?

Feladatkezelő - Szerszám a feladatok automatizálására. A Ranners konfigurációjában rögzítheti e feladatok nevét; az általuk végrehajtott funkció; Plugins felgyorsítja a szokásos műveleteket, de a feladatok maguk önkényesek lehetnek. Például:

A telepítés feladata (ZIP projekt, projekt terhelés távoli kiszolgáló stb)
Projektgyűlési feladatok (minimalizálás, optimalizálás, érvényességi ellenőrző kód és TP)
Az adatátvitelre vonatkozó feladatok stb.

Példák az ilyen eszközökre - Grunt és Gulp.

Összeszerelő rendszer - Ez olyan eszköz, amely megoldja a projektszerelvénynek a Java Script projektjét, amely magában foglalja:

összefoglalás,
az érvényességi kód ellenőrzése,
kódkibocsátás és TD.

Hasonló eszközök közé tartozik a webpack, a brokkoli, a brock, a böngésző és mások.

Minden hasonló frontend feladat automatikusan végrehajtható más eszközökkel: például az NPM futtatásával, amelyet a cikkben is beszélünk.

Példa

Tekintsünk egy Gulp fájlt a projekt összeszereléséhez:

CONST GULP \u003d igényel ("Gulp"); CONST COFECE \u003d igényel ("Gulp-Coffee"); CONST CONCAT \u003d szükséges ("Gulp-Concat"); CONST UGLIFY \u003d igényel ("Gulp-Uglify"); CONST IMACEMEMIL \u003d igényel ("Gulp-Imagemin"); CONST SOURCEMAPS \u003d szükséges ("Gulp-sourcemaps"); const del \u003d szükséges ('del'); )

De a Közgyűlés egy nagy tipikus feladat különleges esete. A Gulp számára egy másik konfigurációt írhat, a telepítéshez:

Var gulp \u003d igényel ("Gulp"); var zip \u003d igényel ("Gulp-zip"); var del \u003d szükséges ("del"); Var install \u003d igényel ("Gulp-Telepítés"); VAR Runne3e \u003d szükséges ("Run-Sequence"); VAR AWSLAMBDA \u003d igényel ("csomópont-aws-lambda"); Gulp.task ("tiszta", funkció (cb) (del (['/ dist "," ./dist.zip ", cb);)); Gulp.task ("Másolás", funkció () ("index.js") .pipe (gulp.dest ("dist /"));)); Gulp.task ("csomópont-modok", funkció ("./ package.json") .pipe (gulp.dest ("dist /")) .pipe (telepítés ((termelés: true)));)); // tisztítsa meg az összes AWS-SDK könyvtárat a NODE_Modules-től. Mi nem kell feltölteni őket, mivel a lambda példány már // Globálisan elérhetővé válik. Gulp.task ("Clean-Aws-SDK", funkció (visszahívás) (DEL (["DIST / NODE_Modules / ** / Aws-sdk "], visszahívás);))); Gulp.task (" zip ", függvény () (RETURN GULP.SRC ([" Dist / ** / * ","! Dist / package.json ") .pipe (zip ("dist.zip")) .pipe (gulp.dest ("./"));)))); Gulp.task ("feltöltés", funkció (visszahívás) (Awslambda.DEPE) .zip ", igényel (" ./ lambda-config.js "), visszahívás);));))); Gulp.task (" Deploy ", funkció (visszahívás) ([" Clean "], [" Másolás "] , ["csomópont-mods"], ["CLEAN-AWS-SDK], [ZIP"], ["FELHASZNÁLÁS"], visszahívás);));

A leírható új feladatok, mint a meglévők kombinációjaként:

Gulp.task ("Telepítés", Gulp.Series ("Tiszta", "Másolás", "Node-Mods", "Tiszta-Aws-SDK", "Zip", "feltöltése");

Ez a különbség. Most tekintse meg az alapeszközöket.

gulp vs. Röfög.

Tehát, előttünk két feladat Ranner: Gulp és Grunt. Mindkettőt a NODE.JS és az NPM használja, és a feladatokat a JavaScript segítségével helyezik el.

Első pillantásra hasonlóak, de a Gulpnak van valami, ami kényelmesebbé teszi az összeszerelést: a készség párhuzamos a folyamatfeladatokkal és a kompakt konfigurációval, a Laconic API-val. Nézzük közelebb a munkájuk elvét.

Menetes adatok

Van egy támogatási fájl, amely a CSS-szerelést és feldolgozást teszi lehetővé.

Látható, hogy az egyes folyamatok indításakor

megnyitja a fájlt;

elindítja a folyamatot;

a módosításokat menti;

bezárja a feldolgozott fájlt, hogy megakadályozza a következő folyamatot;

rögzíti a fájlt a végleges mappába.

Ez az, hogy a lánc több időbeli mappát hoz létre, és a köztes fájl mentése:

A bővítmények különböző szerzőket írnak. Az egyes pluginok számára a fájlok, megkerülések, a fájlok objektumként kell benyújtani. A Gulpban ezt a feladatot a vinyl-fs virtuális fájlrendszere végzi. És a Gulp azonnal elküldi a fájlt a következő folyamatba, anélkül, hogy ideiglenes fájlokat hozna létre, és a lemezre mentés nélkül.

Ugyanez a konfiguráció a Gulp számára már kompaktabb:

Átfogó munka mechanizmusa - a fájlok streaming lemez nélkül:

Feladat végrehajtási sorrendje

Van egy másik különbség: A Gulp alapértelmezés szerint aszinkron módon elvégzi a dolgokat. Ebben és hátrányokkal küzdenek. Ugyanazon konfigurációs fájlban megadjuk a parancsot, hogy számolja a fájlokat a Dev / * SCSS könyvtárból, és küldje el őket SASS-nek.

A patakok küldnek a V.Pipe eredményét. Módszer. A cső lehetővé teszi, hogy az eredményeket a pufferben összegyűjtse az alkatrészekbe, és ha tele van, azonnal küldjön információt az olvasáshoz, anélkül, hogy befejezné a könyvtár tartalmát.

A szekvenciális feladat végrehajtása gyors és erőteljesebbé teszi a Gulp-t, de alkalmanként, hogy még mindig szinkron módon kell elvégeznie a feladatokat, mint a grunt. A probléma megoldható a visszahíváson, a patak visszatérésével vagy ígéretével. A Habré feladata részletesebben lebontható. Van egy alternatíva az NPM.JS webhelyen

Ha a GRUT-t használod, de vonzza a streaming adatokat - ugyanazt a vynyl-FS modul használhatja a grunt végrehajtásához.

A Gulp Laconic API csak 5 módszerrel rendelkezik:

Feladat (név, fn). Regisztrálja a nevezett funkciót. Megadhatja a más feladatok függőségét, ha először végre kell hajtania őket.

Futtatás (feladatok ...). Feladatokat hajt végre.

Nézd (Glob, Fn). Funkciót hajt végre, ha a fájl helyén van a fájl.

SRC (Glob). Mivel paraméter veszi a fájlmaszkot, és visszaküldi a fájlokat ábrázoló szálat. Ezután az áramlás átvihető a bejárati pluginba.

DEST (mappa). Fájlok mentése a megadott mappába.

Különösen szeretném megjegyezni a.watch () jelenlétét a "natív" projekt API-ben, mert nyomon követi a fájlok állandó változásait a Közgyűlés legfontosabb eleme. Az API rövid ismerete lehetővé teszi a fő feladatainak összpontosítását a projektek összeszereléséhez.

Alternatívák Gulp és Grunt

Annak ellenére, hogy a GULP népszerűsége (több mint 130 letöltése napi naponként) és grunt (több mint 86 naponta naponta az npmjs.com szerint), a fejlesztők látják ezeket a rendszereket és hátrányait: például a plug-inek függőségét, hiányos Dokumentáció, kényelmetlen hibakeresés. Alternatív megoldásként fontolhatja meg a projektszerelő rendszereket (például a brokkoli és a webpack) vagy az NPM parancsfájlokat.

Projektszerelő rendszerek

Többnek kell tekinteni alternatív megoldások A Platform Node.js.j. A projekt összeszereléséhez cserélhetők a Gulp és a Grunt.

Ez a rendszer, mint a korty, merült fel, mint a versenytárs Task korai Grunt, de a fejlesztők eredetileg fogant meg pontosan, mint az asszisztens építmények minden előnyével és hátrányával együtt. A beállítások nélkül nem fog "megérteni", hogy * .js egy szkriptekkel rendelkező fájl, * .coffee Coffeescript; A konfiguráció kompakt. Azonban az összeszerelési szakaszban bármilyen tetszőleges cselekvés nem fog elkötelezni.

Itt van a Config File Brunch. A Coffeescript-ben írva (JS-re is írhatsz):

Itt szeretnék figyelmet fordítani a közösségre és a megrendelői szolgáltatókra. A Brunch Config szinten úgy tűnik, hogy fájlokat kell gyűjteni a kívánt sorrendben. Ennek eredményeképpen a konfiguráció 20-30 sort vesz igénybe.

Brokkoli.

Az INDI-eszköz, amely a fejlesztés alatt áll. A fejlesztők már meg akarták a versenyt már Gulp.

A Gulphoz képest a brokkoli eszköz más elveket is használ:

Gyorsulás szerelvény. Minden plugin végrehajtja az összeszerelési eredmények közbenső gyorsítótárazását, csak a szükséges fájlok részleges lázadása helyett.

Fák a fájlok helyett. A Gulp a legjobban átalakítja az egyik fájlt egy döntőbe. Az alapértelmezett brokcolli csak fákat, nem fájlokat használ, és más fákká alakítják őket (degenerált egy csúcsból).

Jelenleg az eszköz aktívan fejlődik, új bővítmények jelennek meg, de komoly projektekhez túl korai: a bővítmények nem elég.

Webpack - Rugalmas moduláris rendszer Összeszerelés. Szokatlan szintaxissal rendelkezik, de önmagában bármilyen modulszintaxisot fogad el.

Megértés, hogy versenyeznie kell az ilyen óriásokkal, mint a Gulp, az alkotók úgy döntöttek, hogy megkönnyítik életünket a nagy projektek fejlesztésében. És hozzáadva a segédprogramhoz:

A fafüggések és erőforrások automatikus felépítése.

Kényelmes eszközök a dinamikus terhelés megvalósításához.

Kompatibilis a gyakorlatilag bármely modullal (AMD, UMD, ES 2015, Common JS, harmadik fél modulok alapján).

Kompatibilitás az előfeldolgozókkal (SASS, Babel, Coffee Script, Típus Script stb.).

Élő újratöltés (aszinkron boot technológia, amelyen a böngésző frissíti az egész oldalakat, de külön alkalmazások).

A kód megosztása és sok kötegfájl létrehozása, elkerülve egy nehéz bundle.js létrehozását.

A kód optimalizálásának képessége.

Különben is megjegyezheti a függőségek rugalmas megközelítését. A modul lehet JS, CSS és HTML fájl, sőt a JPEG PNG-vel. Használhatja a szükséges ("myjsfile.js"), és szükség van ("mycssfile.css"), megoszthatja és használhatja újra a tárgyat.

Bővebben a lehetőségekről, a szerszámkonfigurációkról, a pluginokról megtalálható a Github-on, a prezentációban a Frostalks: mélybeesés a webpack-ben.

nPM parancsfájlok

Az összeszerelési feladatok NPM parancsfájlok segítségével oldhatók meg. Sokan megijeszteni ezt az ötletet: kevés képesség, szkript nem elég gyors ahhoz, hogy összehasonlítva a Gulp vagy a Webpack. Mindazonáltal ezek a hiányosságok eltúlozódnak.

NPM Script képességek

Az NPM parancsfájlok sok feladatot megoldanak. Például a csapda szkripteket hajthat végre:

("Név": "NPM-scripts-példa", "Verzió": "1.0.0", "Leírás": "NPM Scripts Példa", "Scripts": ("Prebuild": "Echo, amit a script előtt futtatok" , "Build": "Cross-env node_env \u003d termelési webpack" "Postbuild": "Echo, amit a Build Script után futtatok")))

A szkriptek az előtagok szerint kerülnek betöltésre: PreBuild, például az építés előtt kezdődik, mert előtag előtétele. Ennek megfelelően az utóbuild betöltődik. Az NPM Run Build Team elindítja őket a kívánt sorrendben.

Hívhat egy szkriptet a másiktól, hogy lebomlik a komplex feladatok. Például itt a PreBuild feladat a tiszta feladatot hívja.

("Név": "NPM-Scripts-példa", "Verzió": "1.0.0", "Leírás": "NPM Scripts Példa", "Scripts": ("Tiszta": "Rimraf ./dist && mkdir dist "," Prebuild ":" NPM Futting Clean "," Build ":" Cross-env node_env \u003d termelési webepack ")))

Ha a feladat túl bonyolult lesz, mindig hívhat külön fájl:

("Név": "NPM-scripts-példa", "Version": "1.0.0", "Leírás": "NPM Scripts Példa", "Scripts": ("Build": "Node Build.js")

Az összeszerelési feladatokhoz tartozó Gulp Streaming miatt sokkal kényelmesebbé vált, mint a Grunt. De az NPM-en keresztül valósítható meg. Windows és UNIX rendszerben a streaming alapértelmezés szerint történik, a közbenső fájlok mentése nélkül.

Például a UNIX teheti grep fájl tartalmát, és küldje el egy új fájlt:

Grep 'nevem' bigfile.txt\u003e linesthathavemyname.txt

Az átirányítás (\u003e) elküldi a kívánt karakterláncokat a célfájlhoz. A feladat a közbenső fájlok mentése nélkül történik.

De vannak kényelmetlenek: nem hagyhatsz megjegyzéseket a package.jsonban. A kiutazás lehet, hogy rövid szkriptek létrehozása érthető nevekkel, amelyek egy kis feladatra irányulnak. Részletesebben a Feladat Ranners NPM-parancsfájljainak cseréjének kérdése jól világít az angol nyelvű cikkben, miért hagytam el a Gulp-t és az NPM parancsfájlokat.

Eredmény

A piacon nagy versenyt szerez a rutin feladatok (például a Gulp és a Grunt) automatizálására, valamint a projektszerelvény automatizálására szolgáló eszközök (webpack, brokkoli, medusa, böngészés stb.).

Ha megnézed a feladatkategóriákat, akkor a Gulp a Grunthoz képest egyszerűbb, megértett és termel: nyeri meg a megtakarítást lemezműveletek. De a grunt több pluginnal rendelkezik (például van egy tesztputin). Ennek köszönhetően sok rajongó marad.

Ha csak a gyülekezetről beszélünk, akkor a Gulpnak minden előnye van a grunt felett:

A fájlok átvitele a VYNYL-FS modul által biztosított lánc felett.

Alapértelmezés szerint - aszinkron feladat végrehajtása.

A Laconic API csak 5 funkció.

Ugyanakkor a Webpack Build egyformán érdekes eszköz. Az élő újratöltési technológiát biztosítja, amely felgyorsítja a böngésző megújítását. Ez egy hatalmas plusz: a technológia időt takarít meg, hogy nyomja meg a frissítési gombot, hogy a fejlesztőknek folyamatosan nyomják. A Gulp is élő újratöltése is van, de a Webpack nehéz összehasonlítani a Gulp vagy a Grunt, mivel "élesített" csak az építés alatt, és nem tudja, hogyan oldja meg az önkényes feladatok megoldását.

Mindezek a megoldások tökéletesen integrálódnak a Jetbrains termékcsaládjához, de a Waveaccess előnyben részesítettünk széleskörű lehetőségek És a versek számára, és a frontend szakemberek számára.

Ha bármilyen kérdése van, és szükség van egy webes projektre, írjon nekünk [E-mail védett]

Frontend
Röfög.
Korty.
Feladat futók.