Gulp de leírás oroszul. A Gulp telepítése és használata

A Gulp telepítése meglehetősen egyszerű. Először telepítse a Gulp csomagot globálisan:

Npm install -g gulp

Ezután telepítse a projektbe:

Npm install --save-dev gulp

Gulp használata

Hozzon létre egy Gulp feladatot az egyik JavaScript-fájlunk kicsinyítéséhez. Hozzon létre egy gulpfile.js nevű fájlt. Ez határozza meg a gulp paranccsal futtatott feladatokat.

Adja hozzá a következő parancsokat a gulpfile.js fájlhoz:

Var gulp = megköveteli ("gulp"), uglify = megköveteli ("gulp-uglify"); gulp.task ("miniify", function () (gulp.src ("js / app.js") .pipe (uglify ()) .pipe (gulp.dest ("build"))));

Telepítse a gulp-uglify-t az npm-en keresztül futással npm install --save-dev gulp-uglify majd futtassa a feladatot a gulp miniify segítségével. Tegyük fel, hogy van egy app.js nevű fájl a js mappájában, akkor egy új app.js jön létre a build mappában, amely a js / app.js tömörített verzióját tartalmazza.

Mi folyik itt valójában?

Néhány dolgot megteszünk a gulpfile.js fájlban. Először betöltjük a gulp és a gulp-uglify modulokat:

Var gulp = megköveteli ("gulp"), uglify = megköveteli ("gulp-uglify");

Ezután meghatározunk egy miniify nevű feladatot, amely futáskor meghívja a második argumentumként megadott függvényt:

Gulp.task ("kicsinyítés", függvény () ());

A végén, és ez a legnehezebb, meghatározzuk, mit kell tennie a feladatunknak:

Gulp.src ("js / app.js") .pipe (uglify ()) .pipe (gulp.dest ("építés"))

Ha nem ismeri a szálakat, és a legtöbb front-end fejlesztő nem ismeri őket, akkor a fenti kód nem mond semmit.

Streamek

Az adatfolyamok lehetővé teszik bizonyos adatok áthaladását egy sor általában kis függvényen, amelyek módosítják az adatokat, majd átadják a következő függvénynek.

A fenti példában a gulp.src () függvény egy fájlnak vagy fájlkészletnek megfelelő karakterláncot vesz fel, és létrehozza az ezeket a fájlokat reprezentáló objektumok folyamát. Ezután az uglify () függvényhez áramlanak (vagy átterjednek), amely fájlobjektumokat vesz fel, és új fájlobjektumokat ad vissza a kicsinyített forrással. Ez az eredmény ezután a gulp.dest () függvénybe kerül, amely elmenti a módosított fájlokat.

Íme, mi történik diagram formájában:

Ha csak egy feladat van, a függvény nem csinál semmit. Azonban vegye figyelembe a következő kódot:

Gulp.task ("js", függvény () (vissza gulp.src ("js / *. Js") .pipe (jshint ()) .pipe (jshint.reporter ("alapértelmezett")) .pipe (uglify () ) .pipe (concat ("app.js")) .pipe (gulp.dest ("build");));

Ennek saját maga futtatásához telepítse a gulp, gulp-jshint, gulp-uglify és gulp-concat fájlokat.

Ez a feladat a js / *. Js-nek megfelelő összes fájlt (más szóval az összes fájlt JavaScript fájlok js mappából), lefuttatja számukra a JSHint-et, kinyomtat egy jelentést, kicsinyíti az egyes fájlokat, majd egyesíti őket, és elmenti a build / app.js fájlba. Diagramként:

Ha ismeri a Gruntot, észre fogja venni, hogy ez egészen más, mint a Grunt működése. Grunt nem használ streameket. Ehelyett fájlokat vesz fel, minden fájlhoz egy feladatot futtat, és új fájlba menti, megismételve a teljes folyamatot minden egyes feladatnál. A fájlrendszer számos hívása következtében a Grunt lassabb, mint a Gulp.

Az adatfolyamok jobb megértéséhez olvassa el az adatfolyam kézikönyvét.

gulp.src ()

A gulp.src () függvény egy vagy több fájlt vagy tömböt vesz fel, és visszaad egy adatfolyamot, amely továbbítható a bővítményeknek.

A másik két beépülő modul egyértelműbb: az uglify () függvény minimalizálja a kódot, a concat ("app.js") függvény pedig az összes fájlt egy app.js nevű fájlba fűzi össze.

gulp-load-plugin

Az általam igen hasznosnak talált modult gulp-load-pluginsnak hívják, automatikusan betölti a Gulp-bővítményeket a package.json fájlból, és csatolja az objektumhoz. A fő alkalmazások a következők:

Var gulpLoadPlugins = igényel ("gulp-load-plugins"), plugins = gulpLoadPlugins ();

Mindent egy sorba írhatsz ( var plugins = igényel ("gulp-load-plugins") ();), de nem vagyok nagy híve az egyvonalas hívásnak.

A kód futtatása után a plugins objektum CamelCase stílusú nevű beépülő moduljait tartalmazza (például a gulp-ruby-sass plugins.rubySass néven töltődik be). Használhatja őket a szokásos módon. Például a js-feladatunk így csökken:

Var gulp = igényel ("gulp"), gulpLoadPlugins = megköveteli ("gulp-load-plugins"), plugins = gulpLoadPlugins (); gulp.task ("js", függvény () (vissza gulp.src ("js / *. js") .pipe (plugins.jshint ()) .pipe (plugins.jshint.reporter ("alapértelmezett")) .pipe (plugins.uglify ()) .pipe (plugins.concat ("app.js")) .pipe (gulp.dest ("build");));

Ehhez csatolva van egy package.json fájl, amely valami hasonlót tartalmaz:

("devDependencies": ("gulp-concat": "~ 2.2.0", "gulp-uglify": "~ 0.2.1", "gulp-jshint": "~ 1.5.1", "gulp": " ~ 3,5,6"))

Ez a példa valójában nem sokkal rövidebb. Nagy és összetett Gulp-fájlok esetén azonban ez egy vagy két sorra csökkenti a fájlfeltöltési blokkot.

A gulp-load-pluginok március elején kiadott 0.4.0-s verziója a beépülő modul lusta betöltését adta, ami javítja a teljesítményt. A beépülő modulok nem töltődnek be, amíg meg nem hívjuk őket, ami azt jelenti, hogy nem kell attól tartanod, hogy a package.json fájl nem használt bővítményei befolyásolják a teljesítményt (bár valószínűleg mindenképpen el kell őket távolítani). Más szóval, ha olyan feladatot futtat, amelyhez csak két beépülő modul szükséges, akkor nem tölti be az összes beépülő modult, amely más feladatokhoz szükséges.

Fájlkövetés

A Gulp képes figyelni a fájlváltozásokat, és végrehajtani egy feladatot vagy feladatokat, ha változásokat észlel. Ez a funkció meglepően hasznos (valószínűleg az egyik leghasznosabb számomra a Gulpban). Elmentheti a Less fájlt, és a Gulp CSS-vé alakítja, és frissíti a böngészőt anélkül, hogy az Ön részéről bármilyen műveletet végezne.

Fájl vagy fájlok megtekintéséhez használja a gulp.watch () függvényt, amely fájlok mintáját vagy tömbjét (például gulp.src ()), vagy feladatok tömbjét veszi fel a visszahívási függvény futtatásához vagy végrehajtásához.

Tegyük fel, hogy van egy összeállítási feladatunk, amely a sablonfájljainkat HTML formátumba konvertálja, és szeretnénk definiálni egy figyelési feladatot, amely figyeli a sablon változásait, és egy feladatot futtat, hogy azokat HTML formátumba konvertálja. Az óra funkciót így használhatjuk:

Gulp.task ("watch", függvény () (gulp.watch ("sablonok / *. Tmpl.html", ["build"]);));

Most, amikor módosítja a sablonfájlt, egy összeállítási feladat fog lefutni, amely előállítja a HTML-t.

A feladatok tömbje helyett egy visszahívási funkciót is megadhat a figyeléshez. Ebben az esetben a függvény egy eseményobjektumot kap, amely információkat tartalmaz a függvényt meghívó eseményről:

Gulp.watch ("templates / *. Tmpl.html", függvény (event) (console.log ("Esemény típusa:" + event.type); // hozzáadva, módosítva vagy eltávolítva console.log ("Esemény elérési útja:" + event.path); // fájl elérési útja));

A gulp.watch () másik nagyszerű tulajdonsága, hogy visszaad egy figyelőt. Használja további események meghallgatására vagy nézendő fájlok hozzáadására. Például a feladatlista futtatásához és egy függvény egyidejű meghívásához hozzáadhat egy figyelőt a változási eseményhez, amikor a figyelő visszatér:

Var watcher = gulp.watch ("sablonok / *. Tmpl.html", ["build"]); watcher.on ("módosítás", függvény (esemény) (console.log ("Esemény típusa:" + event.type); // hozzáadva, módosítva vagy eltávolítva console.log ("Esemény elérési útja:" + event.path); // a fájl elérési útja ));

A változási eseményen kívül számos egyéb eseményt is meghallgathat:

  • vége
    Akkor aktiválódik, amikor a figyelő befejeződik (ami azt jelenti, hogy a feladatok és a visszahívások többé nem lesznek meghívva, amikor a fájlok megváltoznak).
  • hiba
    Hiba esetén tüzel.
  • kész
    Akkor indul el, ha a rendszer megtalálta a fájlokat, és készen áll a követésre.
  • nem egyezik
    Akkor aktiválódik, ha egyetlen fájl sem felel meg a kérésnek.

A figyelő objektum tartalmaz néhány metódust is, amelyek nevezhetők:

  • figyelő.vége ()
    Leállítja a figyelőt (ez megakadályozza a feladatok vagy visszahívások többé).
  • watcher.files ()
    A figyelő által megtekintett fájlok listáját adja vissza.
  • watcher.add (glob)
    Fájlokat ad a figyelőhöz, amelyek megfelelnek a megadott glob-mintának (második argumentumként elfogad egy opcionális visszahívási függvényt is).
  • watcher.remove (fájlútvonal)
    Eltávolít egy adott fájlt a figyelőből.

Üdv mindenkinek. Ha bármilyen módon szereti a JS-t, valószínűleg hallott már olyan alkalmazásról, mint a gulp. Vagy talán még használták is. Saját tapasztalatból azt mondhatom, hogy nehéz lehet "beírni", hogyan kell vele dolgozni, bár a megértés kulcsa a felszínen rejlik. Ezért közzéteszem ezt az anyagot, remélve, hogy hasznos lesz.

Ezen anyag alapján videót is forgattak, így lehet választani, milyen formában fogyasztani.


Ha összehasonlítja a gulp-et más népszerű építési rendszerekkel, az olyan, mintha egy kész „vásárolj és repülj” drónt és egy készletet hasonlítana össze. önszerelés drón. Igen, csak másnap fogsz felszállni, de a kezed nagyobb rugalmassággal és kontrollal rendelkezik, különösen, ha nem szabványos feladatod van.

Valójában a belépési küszöb átlépése után a nyelés nem tűnik olyan bonyolultnak, sőt bizonyos pillanatokban egyértelmű és logikus is. De megfelelő felkészülés nélkül nehéz lehet ezt az állapotot elérni. Merüljünk el benne, és nézzük meg, milyen elvekre épül a gulp.

Menjünk messziről. A nodejs ökoszisztémában létezik egy olyan dolog, mint a folyamok vagy patak. A fordítás bonyolultsága miatt a szálakat többszálú program szálainak is nevezik. Esetünkben a stream egy adatfolyamot reprezentáló objektum, és egy teljesen más fogalom.

Tehát ezek a folyamok kínálnak felhasználóbarát felület adatokkal aszinkron módon dolgozni. A teljes olvasási/írási folyamatot a csomópont motorja kezeli, és csak akkor kapunk visszahívásokat, ha új adat jelenik meg, ha hiba történik, amikor a stream véget ér stb. Így az I/O hatékonyság minimális költséggel érhető el a programozó számára.

Const fs = megköveteli ("fs"); const input = fs.createReadStream ("saját fájl"); input.on ("data", (csonk) => (console.log (csonk);)); input.on ("end", () => (console.log ("fájl beolvasva");));
A nodejs-ben lévő adatfolyamok szinte mindenek lehetnek, a fájloktól és karakterláncoktól a socketekig. Például a jól ismert Express keretrendszerben HTTP kérésés a válasz nem más, mint a patakok. Az adatfolyamok lehetnek csak olvashatók, csak írhatók vagy mindkettő.

A patakoknak van egy hasznos funkció: összeadhatók egy csőnek nevezett láncban. Így több folyamot kombinálhatunk egymással, és egy egészként kezelhetjük. Az egyik adatfolyam kimenete a következő bemenetére megy, és így tovább a végéig. Amint azt a cső szó fordításából sejtheti, nagyon úgy néz ki, mint egy csővezeték.

Ez lehetővé teszi, hogy itt és most meghatározza a szükséges adatfolyamot (ismét a fordítás összetettségét. Itt és most értjük a folyamot), anélkül, hogy megvárná az adatok elérhetővé válását.

Például így tudjuk meghatározni, hogy ennek eredményeként mit akarunk adni, és maga a motor már azon van, hogy „hogyan” adjunk.

Const fs = megköveteli ("fs"); const express = megköveteli ("expressz"); var app = express (); app.get ("/", függvény (req, res) (fs.createReadStream ("myfile") .pipe (res);)); app.listen (3000);
Vegye figyelembe, hogy a kéréskezelő a fájl megnyitása előtt befejeződik – a csomópont motorja veszi át a többit.

A Gulp hasonló megközelítésre épül. Ez az előnye, de egyben a hátránya is. A hátrányt legalábbis az ebből adódó zűrzavar nevezhetjük, mivel a gulp más, hasonló, de nem kompatibilis folyamokat használ. A Gulp szorosan együttműködik fájlrendszer, ezért olyan folyamokat használ, amelyek nem annyira egy adatfolyamot, mint inkább különálló adatfolyamot képviselnek virtuális fájlok, mindegyiknek megvan a maga tartalma.

Ha hallottál már a bakelitről, a gulp ezt a stream-megvalósítást használja. Ha egy szokványos feladatot veszünk egy galp-nak, és megnézzük, mi van benne, akkor azt fogjuk látni, hogy az adatesemény minden egyes hívásához érkezik hozzánk egy fájlobjektum, amely tartalmazza az összes szükséges információt: a fájl nevét, a fájl elérési útját, munkakönyvtárat és természetesen annak tartalmát.

Const zabálás = megköveteli ("gulp"); gulp.task ("alapértelmezett", függvény () (gulp.src ("./*. js") .on ("data", függvény (fájl) (console.log ("adat visszahívás"); console.log ( file.inspect ()); / * A kimenet: * adatvisszahívás * > * adat visszahívás * > * /)) .pipe (gulp.dest ("dist /")); ));
A tartalom két formátumban jeleníthető meg: egy már beolvasott puffer, vagy egy natív csomópont folyam formájában. A Galp cső minden szakasza bemenetként veszi ezeket a fájlokat, végrehajt egy bizonyos átalakítást, és átviszi a következő lánc kimenetére. Az utolsó lánc általában csak lemezre menti őket.

Pipe (gulp.dest ("dist /"));
Ha tudatában vagyunk annak, hogy a nyelésben lévő folyamok különbözőek, az megvilágosodáshoz és megértéshez vezet, mivel ez magyarázza a legtöbb probléma és hiba.

Fontolgat igazi példa... A browserify segítségével szeretné összeragasztani a JS fájlokat. Megkeresed a gulp-browserify beépülő modult. De lát egy utóiratot, amely szerint a bővítmény elavult, pl. Elavult.

Jó modorú programozóként elutasítja ezt a lehetőséget, és olyan megoldást keres, amely nem elavult. Keresse meg a hivatalos recepteket a gulp-ból, és látni fogja, hogy a browserify közvetlenül a gulp-val működik. Nos, milyen közvetlenül, azon a rétegen keresztül, amely a natív Nod-folyamot csak vinilfolyammá fordítja, amit a gulp megért. Enélkül semmi sem működne, mivel ezek különböző szálak.

Ha saját transzformációt szeretne írni, használhatja ezt a sablont.
Amint látható, itt minden egyszerű: minden fájlhoz meghívódik a kezelőnk, amely módosításokat hajt végre. Bármit megtehetünk: megváltoztathatjuk a fájl tartalmát, átnevezhetjük a fájlt, törölhetjük a fájlt, vagy hozzáadhatunk még néhány új fájlt a folyamhoz.

Emlékszünk rá, hogy a bakelit adatfolyamban lévő fájl tartalma pufferként vagy adatfolyamként ábrázolható. Nem szükséges azonban mindkettőt támogatni. A csomagot mindig használhatja

Üdv mindenkinek! Ebben a cikkben létrehozzuk projektünket, inicializáljuk a jegyzékfájlt és telepítjük Korty helyileg.

Először is meg kell mondani, hogy a mappa elérési útjának (beleértve a számítógép felhasználónevét is) bekapcsolva kell lennie angol nyelv különben hibákat kaphat a használat során Korty... Létrehoztam egy mappát Projektek, amelyben minden projektemet elkészítem. Például elnevezem a projektünket első Projekt.

Tehát az utolsó cikkben, amit telepítettünk Korty globálisan, most helyileg kell telepítenünk. Először is elvégezzük az inicializálást. Írja be a következő parancsot a terminálba:

Cd elérési útja a_projekthez (cd "felhasználó / projektek / első projekt")
npm init

Ennek a parancsnak köszönhetően létrehozunk egy alapvető manifest fájlt a projektünkhöz. Ott elvileg minden világos, ezért nem magyarázom. Ha nem szeretne ezekkel a beállításokkal bajlódni, csak nyomja meg folyamatosan belép mivel szükségünk lesz erre a fájlra egy másikhoz, kezdeti beállítások nem olyan fontosak.

Ha mindent helyesen csinált, akkor a fájlnak meg kell jelennie a projekt mappájában package.json... Ha megnyitja, látni fogja, hogy az inicializálás során megadott (vagy nem megadott) összes információ ott van tárolva. Ezenkívül a fájl információkat tárol a használt csomagokról, és pontosan erre van szükségünk. Ha folyamatosan használja például a könyvtárat JQuery, akkor ebbe a fájlba írhatod, és a rendszer automatikusan letölti, amikor új projektet indítasz.

Most telepítsük Korty helyben a mi mappánkba.

Npm i gulp --save-dev

Zászló --save-dev szükséges a csomaghoz Korty verziója pedig automatikusan beírásra került a fájlba package.json... Ha a csomag sikeres telepítése után megnyitja ezt a fájlt, a következőket fogja látni ott:

"devDependencies":(
"gulp": "^ 3.9.1"
}

Szerintem egyértelmű, hogy ide van írva a csomag neve és verziója. A felfelé mutató nyíl jelzi, hogy ez a csomag frissíthető. Van egy mappánk is node_modules hol van most tárolva Kortyés annak minden függősége. Ide kerülnek az új modulok telepítésére.

Szóval mára ennyi. mérlegeltük hogyan kell helyileg telepíteni a gulp-ot a projekt mappájába, és miért van szüksége manifestre package.json.

A front-end fejlesztési folyamat felgyorsítása érdekében egyes feladatokat a Gulp builder segítségével automatizálunk.
Ehhez szükségünk van egy NPM csomagkezelőre. Az NPM telepítéséhez azonban először telepítenie kell a Node.js-t.

1. lépés: Node telepítése
Keresse fel a hivatalos webhelyet https://nodejs.org, és töltse le az ajánlott verziót.

Futtassa a telepítőt rendszergazdai jogokkal.
A telepítés után 2 ikon jelenik meg: Node.js és a Node.js coomand prompt. Nem lesznek hasznosak számunkra, mivel nem használjuk a Node.js-t, és vannak kényelmesebb lehetőségek a konzol elindítására:
1. Használja a Command Console TotalCommander alkalmazást (Parancsok - Nyissa meg a Command Console-t).
2. Tartsa lenyomva a Shift billentyűt, és kattintson a jobb gombbal a megnyitáshoz helyi menü... Megjelenik benne a "Parancsablak megnyitása" elem.
Jobb, ha elindítja a parancssort, miközben a szükséges projekt könyvtárában a konzol azonnal megjeleníti a kívánt könyvtár elérési útját, így nincs szükség az elérési út manuális megadására.

A csomópont és npm verziók ellenőrzéséhez írja be a parancssorba
node -v, és nyomja meg az Enter billentyűt
majd npm -v

Az NPM-verziók általában gyakrabban frissülnek, mint a csomóponti verziók, hogy megkapják a legújabb verziót:
npm telepítés [e-mail védett]-g

Npm parancsokra van szükségünk :
npm lista- az összes listája telepített csomagok
npm -g ls --mélység = 0- a globálisan telepített csomagok listája
npm elavult ellenőrizze, hogy a csomagok elavultak-e
npm frissítés gulp- a bővítmények verzióinak frissítése
npm init- csomag.json létrehozása
npm telepítési csomag_neve- telepítse a csomagot (a csomag_neve a szükséges csomag neve)
npm install csomag_neve --save-dev- telepítse a csomagot, és írjon róla a package.json fájlban a devDependencies részben
npm eltávolítás csomag név- csomag eltávolítás
npm telepítés- Telepítse a package.json fájlban felsorolt ​​összes csomagot
A gyártás megkezdése előtt npm zsugorfólia- javítsd ki a csomagok verzióit, most az npm install pontosan azokat telepíti, és biztos lehetsz benne, hogy minden úgy fog működni, ahogy kell

Rövidítések
-v: --verzió
-g: --globális
-S: --mentés
-D: --save-dev
-y: --igen
-n: --igen hamis

2. lépés: A gulp beszerelése
Először is a gulp-ot globálisan kell telepíteni.

Elindítjuk a parancskonzolt.
Néha egyes erőforrásokon például dollárjel van a parancs előtt
$ npm install --global gulp-cli

Ne másolja a dollárjelet, csak magát a parancsot illessze be
npm install --global gulp-cli

Nyom: a másolt szöveg beillesztéséhez parancs sor, nyissa meg a parancssort, nyomja meg az ALT + SZÓKÖZ -> Alapértelmezett értékeket, jelölje be a Kijelölés egérrel jelölőnégyzetet. Most kijelölheti a szöveget az egérrel, másolhatja, a com-ban. kattintson a jobb gombbal a sorra - a szöveg automatikusan beillesztésre kerül.

3. lépés: Munka a nyeléssel egy adott projektben

3.1 Először is hozzunk létre egy függőségi csomagot, a package.json fájlt
A package.json fájl tartalmazza a terminálba beírandó információkat, valamint a projektben használt összes csomag listáját.

Ha egy csomagot a --save-dev kapcsolóval telepít, a csomag automatikusan hozzáadódik a package.json fájlhoz. Annak érdekében, hogy ne telepítsünk minden csomagot manuálisan minden új projektben, a kész package.json fájlt használjuk a szükséges modulokkal és függőségekkel, így a projektünk gyökerébe helyezzük.

A package.json az npm init paranccsal jön létre, amely néhány kérdést nyomtat a konzolnak a fájl létrehozásához.
A név záradékban alapértelmezés szerint a projektkönyvtár neve jelenik meg.

Nyom:
Ezt a fájlt gyorsabban és egyszerűbben hozhatja létre a --yes opció használatával (automatikus igen minden kérdésre):
npm init -- igen

Jó tudni:
Beállíthatja az alapértelmezett értékeket, amelyeket a rendszer minden alkalommal használ, amikor az npm init programot futtatja, így időt takaríthat meg. A telepítés után a rendszer .npmrc fájlokba menti őket.
Például:
npm konfigurációs beállított init.author.name "Valentina Vladova"
npm config set init.author.email " [e-mail védett]"
npm config set init.author.url "http://simpalmarket.com/"
npm set init-license MIT
npm beállítása init-verzió 0.0.0
Ezután futtassa az npm init programot, az összes megadott érték be lesz húzva a megfelelő változókba.

Amikor az npm init a git-tárról kérdez, írja be röviden: user / repo – az npm elég okos ahhoz, hogy kibővítse a sort a https://github.com/user/repo címen. Az npm a megfelelő formátumban generálja a tárolót, a hibákat és a kezdőlap mezőket is.

Tehát menjen a projekt gyökérmappájába, hívja meg a parancskonzolt, és írja be
npm init -- igen

Az ehhez hasonló Json-fájl megjelenik a projekt gyökerében

3.2 Telepítse a gulp-ot helyileg
A konzol projekt mappájába írja be:
npm install --save-dev gulp

vagy rövidítve
npm i gulp --save-dev

A lista tartalmazza a Figyelmeztetést – hagyja figyelmen kívül.

A verzió ellenőrzéséhez használja a parancsot
nyelés -- változat

A node_modules mappa megjelent a projekt gyökérkönyvtárában. Minden modul és függőség, amelyet a projektbe telepítünk, automatikusan betöltődik. Sok függőségi mappa lehet, még akkor is, ha nincs olyan sok csomag telepítve. Ez annak köszönhető, hogy a fő csomagok mellett olyan programok is telepítve vannak, amelyek a fő csomag megfelelő működéséhez szükségesek. Semmit nem kell tisztítania és törölnie a node_modules mappából.

Json fájl hozzáad egy bejegyzést
"devDependencies":(
"gulp": "^ 3.9.1"
}

Mostantól különféle bővítményeket telepíthet a nyeléshez.
http://gulpjs.com/plugins/
A keresőmezőbe írja be az Önt érdeklő bővítmény nevét.

A bővítmények egyenként is telepíthetők, például:
npm install --save-dev gulp-plumber
és szóközzel elválasztott lista, például:
npm telepítés gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
A beépülő modulok telepítése és a beépülő modulok telepítése a legjobb, ha külön parancsokat használ.

Npm init

Szükséged lesz:

  • Adja meg a projekt nevét
  • Projekt verzió
  • A projekt leírása
  • Belépési pont
  • A csapat
  • Git adattár
  • Kulcsszavak
  • A szerző neve
  • Engedély

Npm i –g nyelés

  • A feladat neve

Nyelésteszt

A feladat működik.

Gulp szolgálni

Npm i gulp-sass --save-dev

  1. Sass fordítása css-be
  2. Előtagok hozzáadása
  3. Fájl mentése src / css fájlba

Feladat létrehozása nyelésből

Következtetés.

https://gulpjs.com/plugins/

Nyissa meg a terminált, és lépjen a projektet tartalmazó mappába. Az első dolog, amit tennünk kell, az npm inicializálása, ehhez futtassuk a parancsot:

Npm init

Szükséged lesz:

  • Adja meg a projekt nevét
  • Projekt verzió
  • A projekt leírása
  • Belépési pont
  • A csapat
  • Git adattár
  • Kulcsszavak
  • A szerző neve
  • Engedély

Alapértelmezés szerint mindent meg lehet hagyni (ha nem akarja feltölteni a projektet ide általános hozzáférés)

Ezután megerősítjük a megadott információkat.

Bírság. Az NPM inicializálása megtörtént. A packages.json fájl most a gyökérben jelenik meg – a csomagkezelő konfigurációs fájljában.

Most telepíthetjük a gulpet. Először globálisan kell telepítenie, majd a projekthez. Globális telepítéshez futtassa a következő parancsot:

Npm i –g nyelés

Most telepítsük a gulp-ot a projekthez:

Npm install --save-dev gulp

Minden nyelés a projekthez telepítve van.

Ellenőrizzük. Hozzunk létre egy gulpfile.js fájlt, és hozzunk létre benne egy tesztfeladatot, amely a „Dolgozom” szöveget írja ki a konzolra.

Var gulp = megköveteli ("gulp"); gulp.task ("teszt", függvény () (console.log ("Dolgozom");));

Először is belefoglaljuk a gulp-ot, másodszor pedig meghívjuk a gulp feladatfüggvényét, amely két paramétert vesz igénybe:

Most futtassa a következő parancsot a konzolon

Nyelésteszt

A feladat működik.

Most telepítsük és engedélyezzük az elrendezést segítő csomagokat.

Browsersync, egy olyan csomag, amely lehetővé teszi az oldal automatikus frissítését fájlok változása esetén

A konzolba való telepítéshez futtassa a következő parancsot:

Npm i browser-sync --save-dev

Most hozzunk létre egy feladatot, amely futtatja a böngésző szinkronizálását és nyomon követi a fájlváltozásokat.

Gulp.task ("serve", ["sass"], function () (browserSync.init ((szerver: "src /")); gulp.watch ("src / css / *. Css") on ("change" ", browserSync.reload); gulp.watch (" src / *. html "). on (" change ", browserSync.reload);));

A feladatot kiszolgálásnak hívják. A böngészőszinkronizálás pedig automatikusan frissíti a böngészőoldalt, ha a css kiterjesztésű (az src / css mappában található) és a html kiterjesztésű (az src mappában található) fájlok megváltoztak.

A feladat futtatásához futtassa a parancsot

Gulp szolgálni

Az elrendezéshez sass-t használok. Tehát a gulp-sass csomagot használom a sass-ról css-re való fordításhoz.

A gulp-sass telepítése és konfigurálása

A gulp-sass konzolra történő telepítéséhez futtassa a következő parancsot:

Npm i gulp-sass --save-dev

Most hozzunk létre egy sass feladatot, amely a sass-t css-re fordítja. És változtassuk meg a kiszolgálási feladatot úgy, hogy a böngésző-szinkronizálásunk ne nyomon kövesse css fájl sass.

Var gulp = megköveteli ("gulp"); var browserSync = követelmény ("browser-sync"). Create (); var sass = követelmény ("gulp-sass"); gulp.task ("serve", ["sass"], függvény () (browserSync.init ((szerver: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("módosítás", browserSync.reload);)); gulp.task ("sass", függvény () (vissza gulp.src ("src / sass / *. sass") .pipe (sass (). on ("hiba", sass.logError)) .pipe (gulp. dest ("src / css")) .pipe (browserSync.stream ());));

Most, amikor futtatja a kiszolgálási feladatot, a sas feladat futni fog.

A gulp-autoprefixer telepítése és konfigurálása

A gulp-autoprefixer telepítéséhez futtassa a következő parancsot:

Npm i gulp-autoprefixer --save-dev

És adj hozzá egy előtagot a sas feladathoz.

Var gulp = megköveteli ("gulp"); var browserSync = követelmény ("browser-sync"). Create (); var sass = követelmény ("gulp-sass"); var autoprefixer = követelmény ("gulp-autoprefixer"); gulp.task ("serve", ["sass"], függvény () (browserSync.init ((szerver: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("módosítás", browserSync.reload);)); gulp.task ("sass", függvény () (vissza gulp.src ("src / sass / *. sass") .pipe (sass (). on ("hiba", sass.logError)) .pipe (autoprefixer ( (böngészők: ["legutóbbi 2 verzió"], kaszkád: false))) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ());));

Most, amikor egy sass feladatot futtat, a c a következőkkel rendelkezik:

  1. Sass fordítása css-be
  2. Előtagok hozzáadása
  3. Fájl mentése src / css fájlba

A következő csomag az összes css fájlt egyesíti egybe.

A contactCss telepítése és konfigurálása

A contactCss telepítéséhez használja a következő parancsot:

Npm i gulp-concat-css --save-dev

És add hozzá ennek a csomagnak a végrehajtását a sass feladathoz. (Az összes css fájlt a style.css fájlban egyesítjük)

Var gulp = megköveteli ("gulp"); var browserSync = követelmény ("browser-sync"). Create (); var sass = követelmény ("gulp-sass"); var autoprefixer = követelmény ("gulp-autoprefixer"); var concatCss = követelmény ("gulp-concat-css"); gulp.task ("serve", ["sass"], függvény () (browserSync.init ((szerver: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("módosítás", browserSync.reload);)); gulp.task ("sass", függvény () (vissza gulp.src ("src / sass / *. sass") .pipe (sass (). on ("hiba", sass.logError)) .pipe (autoprefixer ( (böngészők: ["legutóbbi 2 verzió"], kaszkád: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream () )))

Bírság. Most adjunk hozzá egy csomagot, amely átnevezi a fájlokat. (Szükségünk lesz rá, amikor kicsinyítjük a css és js fájlokat)

A gulp-rename telepítése és konfigurálása

A gulp-rename telepítéséhez futtassa a következő parancsot:

Npm i gulp-rename --save-dev

Egyelőre semmilyen feladathoz nem adjuk hozzá ezt a csomagot.

A CSS-fájlok minimalizálásához szükséges csomag telepítése és konfigurálása - clean-css

A clean-css telepítéséhez futtassa a következő parancsot:

Npm i gulp-clean-css --save-dev

Most hozzunk létre egy mincss feladatot, amely hozzáadja a ".min" utótagot a fájlnévhez, kicsinyíti a css fájlt, és menti az app / css mappába.

Var gulp = megköveteli ("gulp"); var browserSync = követelmény ("browser-sync"). Create (); var sass = követelmény ("gulp-sass"); var autoprefixer = követelmény ("gulp-autoprefixer"); var concatCss = követelmény ("gulp-concat-css"); var cleanCSS = követelmény ("gulp-clean-css"); var rename = követelmény ("gulp-rename"); gulp.task ("serve", ["sass"], függvény () (browserSync.init ((szerver: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("módosítás", browserSync.reload);)); gulp.task ("sass", függvény () (vissza gulp.src ("src / sass / *. sass") .pipe (sass (). on ("hiba", sass.logError)) .pipe (autoprefixer ( (böngészők: ["legutóbbi 2 verzió"], kaszkád: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ))) gulp.task ("mincss", függvény () (vissza gulp.src ("src / css / *. css") .pipe (átnevezés ((utótag: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));))

Remek, telepítsük a gulp csomagot, amely kicsinyíti a js fájlokat.

A gulp csomag telepítése és konfigurálása a js-fájlok minimalizálásához —gulp-uglify

A gulp-uglify telepítéséhez futtassa a következő parancsot:

Npm i gulp-uglify --save-dev

Most hozzunk létre egy feladatot, amely hozzáadja a ".min" utótagot a fájlhoz, kicsinyíti a js fájlt, és menti az app / js mappába.

Var gulp = megköveteli ("gulp"); var browserSync = követelmény ("browser-sync"). Create (); var sass = követelmény ("gulp-sass"); var autoprefixer = követelmény ("gulp-autoprefixer"); var concatCss = követelmény ("gulp-concat-css"); var cleanCSS = követelmény ("gulp-clean-css"); var rename = követelmény ("gulp-rename"); var uglify = megkövetel ("gulp-uglify"); gulp.task ("serve", ["sass"], függvény () (browserSync.init ((szerver: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("módosítás", browserSync.reload);)); gulp.task ("sass", függvény () (vissza gulp.src ("src / sass / *. sass") .pipe (sass (). on ("hiba", sass.logError)) .pipe (autoprefixer ( (böngészők: ["legutóbbi 2 verzió"], kaszkád: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ))) gulp.task ("mincss", függvény () (vissza gulp.src ("src / css / *. css") .pipe (átnevezés ((utótag: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));)) gulp.task ("minjs", függvény () (vissza gulp.src ("src / js / *. js") .pipe (átnevezés ((utótag : ".min"))) .pipe (uglify ()) .pipe (gulp.dest ("app / js"));))

Alapfeladatokat készítettünk. De az utolsó kettőt meg kell tenni a projekt gyártásba helyezésekor. És ezeket együtt kell előadni. Hozzon létre egy feladatot, amely végrehajtja a mincss feladatot, majd a minjs-t

Feladat létrehozása nyelésből

Hozzon létre egy min feladatot, amely mincss és minjs feladatokat fog futtatni

Var gulp = megköveteli ("gulp"); var browserSync = követelmény ("browser-sync"). Create (); var sass = követelmény ("gulp-sass"); var autoprefixer = követelmény ("gulp-autoprefixer"); var concatCss = követelmény ("gulp-concat-css"); var cleanCSS = követelmény ("gulp-clean-css"); var rename = követelmény ("gulp-rename"); var uglify = megkövetel ("gulp-uglify"); gulp.task ("serve", ["sass"], függvény () (browserSync.init ((szerver: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("módosítás", browserSync.reload);)); gulp.task ("sass", függvény () (vissza gulp.src ("src / sass / *. sass") .pipe (sass (). on ("hiba", sass.logError)) .pipe (autoprefixer ( (böngészők: ["legutóbbi 2 verzió"], kaszkád: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ))) gulp.task ("mincss", függvény () (vissza gulp.src ("src / css / *. css") .pipe (átnevezés ((utótag: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));)) gulp.task ("minjs", függvény () (vissza gulp.src ("src / js / *. js") .pipe (átnevezés ((utótag : ".min"))) .pipe (uglify ()) .pipe (gulp.dest ("app / js"));)) gulp.task ("min", ["mincss", "minjs"]) ;

Minden. Állítsuk be az alapértelmezett feladatot is.

Az alapértelmezett nyelési feladat beállítása

gulp.task ("alapértelmezett", ["kiszolgáló"]);

Következtetés.

Megvizsgáltuk, hogy mire való a gulp, hogyan kell felszerelni. megállapították további csomagok amelyek az elrendezéshez és a feladatok beállításához szükségesek.

A szükséges csomagokat megtalálhatja a https://gulpjs.com/plugins/ oldalon, és telepítheti őket. Ezután hozzon létre feladatokat a fejlesztési folyamat optimalizálásához.

HASONLÓ CIKKEK