Mostanában Korty. Nagy népszerűségű, és világos, miért. Gyorsabb, szebb és könnyebb, mint Röfög.. Gyakran kellett dolgoznom vele, de mindig készítettem a megoldásokat, és nem értettem 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 a kis problémát. 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.
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 szövegszerkesztőben. 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;
- Korty-Sass 2.1.1 verzióját felett - bővítmény, hogy a CSS SASS (SCSS).
Kiváló! Ezt követően telepítenie kell mindent. Ez a parancssorból történik. Míg a projektmappában végre kell hajtania a parancsot:
NPM telepítés
Az összes szükséges információt a csomag.jsonból fogják venni.
Miután ez a mágia megjelenik service mappa Node_modules.
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 a HTML-kódot, valaki kevésbé szükséges.
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.
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égre kell hajtani a szerszám kiderült, hogy nagyon egyszerű: a család JetBrains termékek (Idea, Webstorm, ReSharper), amit már a sok éve kitűnő plugin munka Culp / Grunt és NPM / NODEJS.
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 PROJECT, Töltse le a projektet távoli kiszolgálóra és TP-re)
- 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. Ugyanebben konfigurációs fájl, így a parancs, hogy számít a fájlokat a DEV / * SCSS könyvtárba, és elküldi őket, hogy SASS.
A patakok küldnek a V.Pipe eredményét. Módszer. PIPE gyűjthetsz, az eredményt a puffer alkatrészeket, és ha tele van, azonnal tájékoztatást küldenek a patak olvasásra nélkül befejező fogadó 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
Tekintsünk több alternatív megoldást a node.js platformon. A projekt összeszereléséhez cserélhetők a Gulp és a Grunt.
Ez a rendszer, mint a Gulp, versenyzői feladat, korai mántus, de a fejlesztők eredetileg úgy döntöttek, hogy az asszisztens, hogy építsenek minden előnyt és hátrányt. 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):
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 "
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álódnak 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.
A Webpack egy rugalmas moduláris szerelési rendszer. Szokatlan szintaxissal rendelkezik, de önmagában bármilyen modulszintaxisot fogad el.
Megértése, hogy van, hogy a versenyt olyan óriások, mint korty, az alkotók úgy döntöttek, hogy megkönnyítsék az életünket a fejlesztés nagy projektek. É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.
Kompatibilitás 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 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, akkor mindig külön fájlt hívhat meg:
("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 Unixban grep fájl tartalmat készíthet, és új fájlra küldheti:
Grep 'nevem' bigfile.txt\u003e linesthathavemyname.txt
Az átirányítás (\u003e) elküldi a kívánt karakterláncokat a célfájlba. 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 kérdés helyett Task Ranners NPM scriptek jól megvilágított az angol nyelvű cikket, miért hagytam Nyelő Grunt az NPM Scripts.
Eredmény
A piacon van egy nagy verseny eszközök rutin feladatok automatizálása (például Culp és Grunt), valamint az eszközök automatizálására A projekt szerelvény (WebPack, brokkoli, Medusa, Browserify, stb.)
Ha megnézed a feladat Ranners, akkor a Gulp a Grunt-hoz képest egyszerűbb, megértett és termel: nyeri a megtakarítások miatt a 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 döntések tökéletesen integrálódnak a Jetbrains termékcsaládjához, de a Waveaccess-ben a LEACHECKESS PREFPLE lehetőségekben részesültünk mind a footgames, mind 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.
Ebben a cikkben részletesen elemezzük a projekt projektjének összeszerelésének folyamatát, amely a napi munkámon keresztül érkezett, és nagyon könnyebb a rutinhoz.
A cikk nem azt állítja, hogy az utolsó esetben az igazság, mivel ma számos különböző összeszerelő és megközelítés létezik a Közgyűléshez, és mindenki úgy dönt, hogy megkóstolja. Csak megosztom a gondolataimat ezen a témában, és megmutatom a munkafolyamatomat.
A Gulp-gyűjtőt fogjuk használni. Ennek megfelelően a JS csomópontot a rendszerbe kell telepíteni. A csomópontok telepítése egy adott platformra, mert nem fogjuk figyelembe venni, mert Néhány perc múlva googles.
És először válaszol a kérdésre - miért?
A többé-kevésbé bontási alternatíva van, ahol grunt és brunch van.
Amikor most kezdtem eljutni a gyűjtőkhöz - már a piacon már megszakadtak és Gulp volt. Az első korábban megjelent, és ez nagyobb közösséggel és számos bővítményrel rendelkezik. NPM szerint:
Grunt - 11171 csomag
Gulp - 4371 Csomag
De Grunt úgy tűnt nekem, hogy a csikó verbális. És miután elolvasta néhány cikket, míg - én inkább Culp az egyszerűség és a láthatóságot.
A Brunch viszonylag fiatal projekt, e pluszok és mínuszok minden előnyével. Érdeklődtem, de még nem használtam meg.
Folytassuk meg:
Hozzon létre egy mappát a projektünkhöz, például a "HABR" -hez. Nyissa meg a konzolban, és hajtsa végre a parancsot
Npm init
Egyszerűen nyomja meg az ENTER gombot az összes telepítő kérdéshez, mert Most nem alapvetően.
Ennek eredményeként a projekt mappában a fájlcsomagot generáljuk .Json, megközelítőleg egy ilyen tartalom.
("Név": "Habr", "Version": "1.0.0", "Leírás": "", "Index.js", "Scripts": ("Teszt": "Echo" hiba: Nincs teszt: "&& kijárat 1"), "Szerző": "", "Licenc": "ISC")
Néhány módosítása az igényeink szerint:
("Név": "Habr", "Version": "1.0.0", "Leírás": "", "Szerző": "", "Licenc": "ISC", "Devdependenciák": ("Gulp": "^ 3.8.1")))
a Devdependenciák blokkjában jeleztük, hogy szükségünk van a Gulpra és azonnal, minden bővítményünk előírjuk.
Plugins:
A stílusokkal ugyanúgy csinálom, mint a JS-vel, de csak a Rigger helyett "A - A beépített SCSS importálást használom.
Main.scss így fog kinézni:
/ * * Harmadik fél * / @Import "CSS: ../../ Bower_Components / Normalize.css / Normalize.css"; / * * Egyedi * / @Import "részleges / alkalmazás";
Ily módon kiderül, hogy könnyű ellenőrizni a stílusok sorrendjét.
Ellenőrizze a feladatunkat, fut
Gulp Stílus: Építsen
Képeket gyűjtünk
A képeken szereplő feladat így fog kinézni:
Gulp.Task ( "Image: Építőanyag" funkció () (Gulp.Src (Path.src.img) // Válassza képeinket. CSŐ (IMAGEMIN ((// Ének őket Progresszív: Igaz, Svgoplugins: [(RemoveViewBox: False )], használat :, Interlaced: True))) .pipe (gulp.dest (path.build.img)) //, és dobja a Build .pipe (Connect.Reload ());));
Az alapértelmezett Imagemin beállításokat az átlapolt kivételével használom. Tudjon meg többet a plugin API-ról, amelyet olvashat.
Most, ha valami képet adunk az SRC / IMG-ben, és elindítjuk a parancsot
Gulp Image: Build
Így látni fogjuk az optimalizált képünket. Továbbá, a Gulp szívesen írja a konzolba, hogy mennyi helyet mentett a webhelyünk felhasználói számára :)
Betűkészletek
A betűtípus, én általában nem kell elvégezni minden manipuláció, de bármit is simogatni a paradigma „dolgozunk SRC /, és gyűjtsük össze a Build /” - Egyszerűen másolja a fájlokat a SRC / betűtípusok és betétet Build / betűtípusok. Itt feladat
Gulp.Task ( "Betűtípusok: Beépített" funkció () (Gulp.Src (Path.Src.fonts) .pipe (gulp.dest (path.build.fonts))));
Most definiáljuk a Taq-t a "build" névvel, amely mindent elindít, amit itt elszámoltunk
Gulp.task ("build", ["html: build", "JS: build", "Stílus: Build", "Fonts: Build", "Kép: build"]);
Fájlváltozások
Annak érdekében, hogy ne mássz minden alkalommal a konzol, kérdezzük Nyelő minden alkalommal, amikor változtatni néhány fájlt futtatni a kívánt feladatot. Ehhez írjon ilyen feladatot:
Gulp.task (Watch ", Funkció () (Watch (funkció (esemény, cb) (Gulp.Start (" html: build ");)); Nézd (, funkció (esemény, cb) (Gulp.start ( : Build ");)); nézni (, funkció (esemény, cb) (Gulp.start (" JS: build ");)); Nézd (, funkció (esemény, cb) (Gulp.start (" Kép: Build ");); Nézni (, funkció (esemény, cb) (Gulp.Start (" Betűtípusok: Build ");)));));
Megértjük, hogy nem lehetnek problémák. Egyszerűen átmegyünk az útvonalváltozóban meghatározott útvonalainkon, és a fájl megváltoztatásakor hívott funkcióban - kérjük, indítsa el a szükséges feladatot.
Próbálkozzon a konzolon
Gulp Watch.
És módosítsa a különböző fájlokat.
Nos, ne hűvös?)
Web szerver.
A Miracle Lovereload-ot élvezzük - helyi webszervert kell létrehoznunk. Ehhez írja be a következő feladatot:
Gulp.task ( "szerver", function () (Connect.Server ((Host: Server.host, Port: Server.port, Livereload: True))));
Még semmi sem kommentálható. Egyszerűen elindítjuk a kiszolgálót a kiszolgáló objektumában megadott gazdagépen és porton.
Tisztítás
Ha hozzáad egy képet, akkor futtassa a képet: Felépíteni a feladatot, majd távolítsa el a képet - az építési mappában marad. Tehát kényelmes lenne - rendszeresen tisztítani. Hozzon létre ezt az egyszerű feladatot
Gulp.task ("tiszta", funkció (cb) (rimraf (path.clean, cb);));
Most a parancs elindításakor
Gulp tiszta.
csak törölte az építési mappát.
És végül, a kis kegyelem
Ez a feladat nem hordozza a kritikus funkcionalitást, de nagyon tetszik :)
Gulp.task ("OpenBrowser", funkció () (OPN ("http: http: //" + server.host + ":" + server.port + "/ build");));
Amikor szükségünk van, elindítjuk, elindítjuk - és a böngészőnk automatikusan megnyitja a lapot a projektünkkel.
Menő :)
Végső megállapodás
Az utolsó dolog - meghatározzuk az alapértelmezett feladatot, amely elindítja az egész összeszerelést.
Gulp.task ("alapértelmezett", ["build", "Webserver", "Watch", "OpenBrowser"]);
Végül, a gulpfile.js valami ilyesmit fog kinézni.
Most végre a konzolban
És voila :) A projekt munkadarabja készen áll és vár rád.
Pár szavak következtetésre
Ez a cikk úgy, hogy egy módja annak, hogy frissíteni kell a memóriában a finomság építmények frontend projektek, valamint hogy megkönnyítse a átadását ez a tapasztalat, hogy az új fejlesztők. Nem kell használni ezt a kiviteli alakot a projektjein. Van yeoman.io, ahol a generátorok szinte minden igényt kielégítenek.
Ezt a kollektort 2-re írtam.
- Szeretem a RIGGER-et használni az én hTML kód
- Majdnem minden olyan építéssel, hogy találkoztam - ideiglenes mappát használunk (általában.tmp /), hogy rögzítsem a Közgyűlés köztes eredményeit. Nem szeretem ezt a megközelítést, és meg akartam megszabadulni az ideiglenes mappáktól.
- És ezt akartam velem a dobozból :)
A kollektor munkaterülete letölthető a githubomon.
Remélem, hogy a cikk hasznosnak bizonyult az Ön számára :)
P.S. Minden hiba, hiányosság és shoals - kérjük, írjon személyes
Gentleman front-end fejlesztője
Nem titok, hogy a modern front-end fejlesztőnek karjában kell lennie az egyik projektszerelési eszköz, mint például Korty. vagy Röfög.. Mindaddig, amíg meg nem vették a monopóliumot ebben a kérdésben, de a Grunt-tól elválasztott fejlesztői csoport úgy döntött, hogy saját könnyű és gyors feladatkezelő Gulpot hoz létre.
Ebben a cikkben elkészítjük a kezdő csomagot a jövőbeni projektekben.
Mit használunk a technológiát
- Szoftver platform: Csomópont.js.
- CSS pre-processzor: Stylus.
- Feladatkezelő: Korty.
Miért az első menedzser feladatkezelő
Egészen a közelmúltig azon tűnődtem, hogy miért kell időt töltenie a feladatkezelő konfigurációjának konfigurálására, ha olyan jól kezelem az elrendezés elrendezését, amíg elkezdtem a CSS előtti processzorokat használni.
CSS Pre-feldolgozók - nagyon kényelmes és felgyorsítja az írás stílus, de a fordítás a kódot írt egy pre-processzor a rendszeres CSS, nem egészen triviális feladat, hogy oldják meg egy gombot. Itt vagyunk a mentés és a feladatkezelő jön. A kódkonverzió nem jelentkezik, hogy a gomb megnyomásával mindent online történik, anélkül, hogy részvétele lenne (természetesen, ha mindent helyesen konfigurál.).
Természetesen a feladatkezelő feladata messze túlmutat az átalakítási kód konverzióhoz kapcsolódó folyamatokon tiszta CSS-be. A projekt gyűjtő is részt vesz a minisztérium, az összefűzés, ellenőrzi a kód hibákat, összeszerelésére a kép sprite, optimalizálja a képeket a weben, stb Csak sok logikai elválasztott fájlt hoz létre a projektben, amelyet ezután kényelmesen gyűjtenek egy olyan könyvtárban, amelyet már feldolgozott és készen áll a böngészőben való munkára. De ez egy kicsit később, és most kezdjük a készítményt.
Telepítési csomópont.js.js.
Ha tudja, hogyan telepítheti a csomópontokat a rendszerhez, és használja, biztonságosan megy a következő fejléchez.
Szeretném azonnal figyelmeztetni arra, hogy a leírt valamennyi intézkedés releváns Mac OS X.de általában mások számára alkalmazható Unix Rendszerek. Fejlesztés a feladatkezelő és a parancssoron keresztül ablakok Némileg nehezebb és itt nem lesz leírva. Ha azonban még mindig használja az ablakokat, és nem áll készen arra, hogy megtagadja, akkor egy virtuális gép használata telepíthető Ubuntu.Ezt a lehetőséget használom az otthoni rendszeremen, ami általában elég kényelmes.
Tehát az első dolog, amit meg kell tölteni és telepíteni a node.js csomagot a rendszer a munka egy csomópont a konzolon keresztül. Menjen a Hivatalos Site Node.js-hez, és töltse le a rendszer friss stabil verzióját. A telepítés után a csomópont-parancsnak elérhetőnek kell lennie a parancssorban. Annak ellenőrzésére, hogy a csomópont működése, írja be a parancsot a parancssorba
válaszul a telepített csomópont verziója létrejön. Ha minden rendben van, folytassa.
A projektkönyvtárak szerkezete
Projektjeinkben a szerkezet egységes változatát fogjuk használni:
Fejlődik - Gyökérfejlesztési katalógus └─start. - Projektkatalógus ├─build - Bild gyűjtött feladatkezelő ├─Resource. - a fejlesztési forrásfájl (.DSD stb.) ├─SRC. - Fejlesztési katalógus │├─. - Stílusfejlesztési katalógus ││├─. - Minden statikus kép ││├─sprites. - A Sprite-ben gyűjtött kép ││├─Apartial - egyéni fájlok stílusok │││├─xins.styl - Egyéni mixins │││└─styles.styl. - Egyéni stílusok ││├─Avó - mások külső fájlok stílusok ││└─styles.styl. - fő stílusfájl │├─fonts. - Fonts katalógusa │├─img - katalógus dinamikus képek │├─js. - JavaScript fejlesztési katalógus ││ ├ _ *. JS - A JS oldalfájlok ││├─_main.js. - fő egyéni js ││└─ain.js. - fő JS fájl │├─.hsacess. - Config a kiszolgálóhoz │├─ * .html. - Oldalmegjelölési fájlok │├─Pages.html. - Fájl az összes oldal sablonhoz │├─index.html - Index fájlmegjelölés fájl │└─include - A plug-in jelölő fájlok katalógusa │ └─ * .html - Plug-in jelölő fájlok (header.html stb.) ├─Package.json - NPM Batch Manager Config ├─Gulpfile.js. - CONFIG GULP. ├─stylus.template.mustache. - Maszk az olvasásra ├─Todo. - TODO lap └─.gitignore. - Config a git számára
Telepítés
A CD parancs segítségével a CD parancs segítségével menjen a fejlesztés gyökérkönyvtárába, hozzon létre egy katalógust az MKDIR indítási projektünkről, és lépjen tovább rá.
Megállapítjuk a projekt szerkezetét a konzolon keresztül:
mKDIR Építőanyag Erőforrás SRC SRC / CSS SRC / CSS / Képek SRC / CSS / SRC / CSS / részleges SRC / CSS / VENDOR SRC / JS SRC / template SRC / template / include SRC / IMG SRC / fonts
Hozza létre a kezdeti fájlokat a projektszerkezetben:
Érintse meg a gulpfile.js stylus.template.mustache .gitignore src / .htaccess src / todo src / css / styles.styl src / css / részleges / styles.Stil SRC / CSS / részleges / mixins.Stil src / js / main.js Src / js / _main.js src / sablon / oldalak.html src / sablon / index.html src / sablon / includ / header.html src / sablon / footer.html
Csomag létrehozása.json
az összes felbukkanó kérdés az ENTER-en keresztül érhető el, a csomópont beállítja az alapértelmezett értékeket, vagy kitölti a javasolt mezőket.
.gitignore.
Beszélve egy Gita, amely katalógusok figyelmen kívül hagyják és nem töltik ki a tárolót:
/ Node_modules / / build / / forrás /
A Node_modules könyvtár később jelenik meg a plug-inek telepítése után, és tartalmazza az összes projekt csomópont-bővítményét.
src / .htaccess.
További GZIP tömörítés és gyorsítótár telepítése a kiszolgálóhoz:
AddoutOutputFilterbyType deflate szöveg / html szöveg / sima szöveg / XML szöveg / CSS szöveg / JavaScript alkalmazás
sRC / CSS / styles.styl
Csatlakoztassa a felhasználói stílusfájlokat a fő stílusfájlhoz:
@Import "részleges / stílusok"
Felhívjuk figyelmét, hogy connecting.styl fájlok kiterjesztése nincs megadva szerint a szemantika a Stylus előfeldolgozón kódot. A stílusok csatlakoztatása egy másik kiterjesztésben, például.Css, az utóbbi feltüntetése szükséges.
CSINÁLNI.
Ez az oldal egy TODO fejlesztési lapot tartalmaz. Bővebben többet tudsz dolgozni ezzel a fájlt a felmerülő feliratú plugin oldalra a nagyszerű szöveghez.
Ez a beállítás befejeződött.
A bővítmények telepítése az NPM Batch Manageren keresztül
A NODE.JS alapértelmezés szerint tartalmaz egy NPM Batch Manager-et, amelynek tárolása sok bővítményt gyűjtöttünk össze, amellyel együtt kell dolgoznunk.
A GULP bővítmény beállítása
Először a Gulp globálisan kell telepítenie (-G kulcs) a rendszerünkön
nPM Telepítse a Gulp -g-t
Csináld egyszerretovább globális telepítés nem szükséges.
Most telepítenie kell a Gulp helyben a projektkatalógusban
nPM Telepítés Gulp --Save-Dev
A kulcs --Save-Dev azt sugallja, hogy a plugin (név a tárolóban és annak verziójában) hozzáadódik a csomag.json config, és emlékezzen rá erre a projektre. Mivel nem tárolunk egy nehézsúlyú mappát Node_modules pluginokkal, a telepített bővítmények konfigurációs információ mentéséhez csak egy NPM I parancsot adhat meg, hogy telepítse az összes szükséges bővítményt a projektben.
Minden csapat esetében rövidítések vannak, így a fenti parancs rövidebb formában írhatunk
A jövőben a csapatok rövidített formátumát is használjuk.
Stylus plugin a Gulp számára
Projektjeinkben a Stylus Pre-processzort használjuk, amely jól működik és összeállunk a csomóponton.
Telepítés:
npm i gulp-stylus -d
CSS feldolgozó bővítmények
Avtoprefikser - Automatikusan helyettesíti az előtagokat ----- Moz-Webkit - a kívánt tulajdonságokban:
npm i gulp-autoprefixer -d
CSS minifikáció - A plugin minifikálja a kimeneti CSS-fájlt, amely megszünteti a felesleges résekből és lapokból:
nPM I Gulp-Minify-CSS -D
Képfeldolgozó pluginok
Képek szövetsége a Sprite-ben - Nem kell többé költeni az értékes időt, hogy ötvözze az összes képet a Sprite-ben, majd kiszámítsa a koordinátáikat, mindez automatikusan ezt a plugint az Ön számára teszi ki:
npm i gulp.spritsmith -d -d
Add hozzá a korábban létrehozott stylus.template.Mustache maszk a pozíciók kiszámításához Sprite:
((#Items)) $ ((NAME)) \u003d ((px.x)) ((px.y)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.offset_y)) ((px.width)) ( px.height)) ((px.total_width)) ((px.total_height)) "((escaped_image)))"; (/ Tételek))
Adjon speciális mixineket a mixins.styl:
Spritewidth ($ sprite) szélesség $ spriteheight ($ Sprite) Magasság $ SpriteSition ($ Sprite) Háttér-pozíció $ Sprite $ Spriteimage ($ Sprite) háttérkép URL ($ Sprite) Sprite ($ Sprite), ha! Match ("Hover" , Választó ()) &&! Match ("Aktív", választó ()) spreeimage ($ sprite) spreeimage ($ sprite) spritewidth ($ sprite) spriteheight ($ Sprite)
Csatlakoztassa a mixineket és egy generált fájlt a koordinátákkal a fő SRC / CSS / Styes.styl stílusfájlhoz:
@Import "részleges / sprite" @import "részleges / mixins"
Ne feledje, hogy a spritesnek csatlakoznia kell a felhasználói stílusokhoz @Import "részleges / stílusok"
Image Optimization for Web - A bővítmény automatikusan kikapcsolja az összes felesleges információkat a képeket és soim őket az optimális méretet, amely lehetővé teszi bizonyos esetekben, hogy csökkenjen a képek akár 90%:
npm i gulp-imagemin -d
JavaScript feldolgozó bővítmények
JS minifikáció. - A plugin minifikálja a JS kódot, csökkentve a letöltési idejét:
npm i gulp-uglifery -d
JS Tracking - A plugin ellenőrzi a JS-kódot, hogy azonosítsa az összes következetlenséget, és hozza őket a konzolba:
npm i jsint gulp-jsint -d
HTML feldolgozó bővítmények
Csatlakoztatott fájlok - A plugin lehetővé teszi, hogy a helyszín statikus részeit, például fejlécet, láblécet, félretett stb. Már nem elég, a fejléc kis változásai esetén változtatni tucatnyi, vagy akár több száz HTML oldalát a sablon:
npm i gulp-rigger -d
A plugin szintén kompatibilis a JS-vel.
Csatlakoztassa a felhasználót a JS-hez a fő JS SRC / JS / Main.js szoftverépítéshez:
// \u003d _main.js.
Csatlakozás az index.html fájlok header.html és footer.html
// \u003d tartalmazza a / header.html // \u003d beleértve / footer.html
Más bővítmények
Livereload. - A plugin kiküszöböli, hogy indítsa újra az oldalt a böngésző minden alkalommal, hogy a változások, most automatikusan történik a mentés közben megváltozott fájlt:
npm i gulp-connect -d
Védje a gulpot az indulásból - Néha ez megtörténik, hogy a Gulp a megfigyelési módból a kritikus hibák (főként a JS) miatt repülhet. Ez a plugin, ha lehetséges, megpróbálja elhagyni a Gulp folyamatait működőképes:
npm i gulp-vízvezeték--d
Fájlok átnevezése - A leggyakoribb munka a fájlnevekkel. A beépülő modul lehetővé teszi, hogy teljesen nevezni a fájlokat, változtassa meg a kiterjesztést, add előtagok és postfix, például, hogy a stílus a style.styl a style.min.css:
npm i gulp-name -d
Cleener - Néha szükség van a Build Directory katalógusának befejezésére, van egy plugin a mentésre:
Sourcemap - Annak érdekében, miután a minification, a fájlok maradt olvasható a böngészőn keresztül hibakeresés, meg kell adni a sourcemap minifier fájlokat:
npm i gulp-sourcemaps -d
Extended Watch funkciók. - A plugin teszi Watch okos, most ez nem írja felül az összes fájlt a build, ha megváltoztatja az egész fájlt, az adott módosított fájl felülírja, ami időt és erőforrást takarít:
npm i gulp-watch -d
Ellenőrizze a csomagot.json
Végül telepített bővítmények, Ellenőrizze a csomagot.json. A következő típusúnak kell lennie:
("Név": "Start", "Verzió": "1.0.0", "Leírás": "Start csomag a front-end fejlesztéséhez", "Szerző": "Ivan Ivanov", "Licenc": "MIT", "Függőség": (), "Devdependenciák": ("Gulp": "Legújabb", "Gulp-AutoPrefixer": "Legújabb", "Gulp-Connect": "Legújabb", "Gulp-ImageMin": "Legújabb", "Jshint": "Legújabb", "Legújabb", "Gulp-Jshint": "Legújabb", "Gulp-Minify-CSS": "Legújabb", "Gulp-vízvezeték-szerelő": "Legújabb", "Gulp-Rename": "Legújabb", "Gulp-Rigger": "Legújabb", "Gulp-Sourcemaps": "Legújabb", "Gulp-Stylus": "Legújabb", "Gulp-Uglify": "Legújabb", "Gulp-Watch": "Legújabb", "Gulp.sPritsmith": "Legújabb", "Rimraf": "Legújabb"))
A legújabb helyett az Ön esetében a telepített bővítmények specifikus verziói meg fognak írni. Mivel Készítsük el a kiindulási csomagunkat, amelyet számos projektben használunk, javasoljuk a legkésőbb verziók értékeit is, hogy mindig a projektben lévő plug-inek aktuális verzióit hozza létre.
A Project mappában a NODE_Modules könyvtárnak is megjelennie kell abban, hogy az összes csomópont plug-in fájl tárolódjon. Az összes kívánt bővítmény telepítve van, a Gulp Configbe megy.
Gulpfile.js beállítása.
gulpfile.js. - Ez a feladatkezelő fő konfigurációs fájlja, benne van, hogy minden beállítást és parancsot tárolunk.
Minden Gulp munka feladata lesz ( angol egy feladat). A feladat egy különálló független funkció. Minden feladat külön okozható.
Ingyenes módja a modern szabványokkal
Először is, csatlakoztassa a kompatibilitási módot csak a modern szabványok segítségével:
"Használjon szigorú";
További információ erről az irányelvről.
Inicializálja a plugint
A bővítményeket az alábbi konstrukcióval inicializálják:
var initppugin \u003d szükséges ("plugin-név");
A tervezéssel összhangban az összes bővítmény inicializálása:
Var gulp \u003d igényel ("Gulp"), // Főbb dugó Gulp Stylus \u003d szükséges ("Gulp-Stylus"), // PreProcessor Stylus Prefixer \u003d igényel ("Gulp-AutoPrefixer"), // CSSMIN felvétele \u003d szükséges (" Gulp-Minify-CSS "), // minifikáció CSS \u200b\u200bUglify \u003d szükséges (" Gulp-Uglifery "), // minifikáció JS JSHINT \u003d igényel (" Gulp-Jshint "), // követési hibák a JS Rigger \u003d szükséges (" Gulp -Rigger "), // A HTML és a JS ImageMin \u003d beillesztése (" Gulp-ImageMin "), // minimalizálja a képeket Spritesmith \u003d igényel (" Gulp.spritsmith "), // conjoin képeket Rimraf \u003d Sprite ( "Rimraf"), // tisztítás Sourcemaps \u003d igényel ("Gulp-sourcemaps"), // Sourcemaps Rename \u003d szükséges ("Gulp-Rename"), // nevezze át a vízvezeték-szerelő \u003d fájlokat ("Gulp-vízvezeték-szerelő") / biztosíték megállási Galp Watch \u003d megkövetelése ( "Culp-Watch"), // bővítése képességeit Watch Csatlakozás \u003d megkövetelése ( "Culp-Connect"); // Lovereload.
Az utak konstansjai
A kényelem érdekében azonnal meghatározzuk az összes módot és maszkot:
VAR PATH \u003d (BUILD: (// HASZNÁLJA, HOGY KÉSZÜLÉK, HTML: "BUILD /", JS: "BUILD / JS /", CSS: "BUILD / CSS /", IMG: "Build / CSS / Images / ", Betűtípusok:" Build / Fonts / ", Htaccess:" build / ", Contentimg:" Build / img / ", Sprite:" SRC / CSS / Images / ", Spritesss:" SRC / CSS / Részleges / "), SRC: (// Ways hol forrás HTML:" SRC / sablon / * html ", // Syntax src / sablon / sablon / *. HTML azt mondja, hogy a Gulp azt szeretnénk, hogy az összes fájlt kiterjesztéssel. "SRC / JS / [^ _] *. JS", // Stílusokban és szkriptekben csak a JSHINT főfájlokra van szükségünk: "SRC / JS / *. JS", CSS: "SRC / CSS / Styles.styl", Csvendor: "SRC / CSS / Vendor\u003e *", // Ha a könyvtári fájlokat külön tárolja, hogy a Rassenger IMG: "SRC / CSS / Images / ** / ***", // Syntax img / ** / 2 *. Az összes kiterjesztésű fájlokat a mappából és a betűtípusok beágyazott katalógusából: "SRC / Betűtípusok / szerelt", ContentimG: "SRC / img / ** / 2 *", Sprite: "SRC / CSS / Sprite / *. PNG ", Htaccess:" src / .htaccess "), Nézd meg: (// rámutatunk, hogy megváltoztatjuk a ka KIH fájlokat szeretnénk nézni HTML: "SRC / sablon / ** / *. HTML", JS: "SRC / JS / ** / *. JS", CSS: "SRC / CSS / ** / 2 **" , IMG: "SRC / CSS / Images / ** / 7/27, Contentimg:" SRC / img / ** / *, Betűtípusok: "SRC / FONTS / ** / 2 *", Htaccess: "SRC / .HTACKN ", Sprite:" SRC / CSS / Sprits / *. PNG "), Tiszta:" ./build ", // könyvtár, amely tisztítható kimeneti:" ./build "// Forrás gyökérkönyvtár a miniszter futtatásához);
Kérjük, vegye figyelembe, hogy használhatjuk a névmaszkokat:
- * .js. - a JS kiterjesztéssel rendelkező összes fájl
- [^ _] *. JS - a JS kiterjesztéssel ellátott összes fájl, kivéve az alsó aláhúzástól kezdődőket
- *.* - az aktuális hangszóróban bármely kiterjesztésű fájl
- / ** / * .html. - az összes kiterjesztésű fájl az aktuális könyvtárban és az összes kiegészítő könyvtárban
Feladat (feladatok)
Most, hogy minden konstans ki van írva, elkezdheti írni taskov. Minden feladatnak a következő tervezése van:
Gulp.task ("TASKNAME", funkció () () (// néhány funkció));
Mini-szerver és Lovereload
Először is konfiguráljuk a helyi kiszolgáló és a Lovereload működését:
// Helyi szerver A Gulp.task ("Connect", Function () () (Connect.Server ((// Colev A root kiszolgáló konfigurálása: // A port gyökérkönyvtára: 9999 kiszolgáló, // milyen port használ a Livereload: True // inicializálja a munka litereload));));
Valószínűleg gyakran több projektben kell dolgoznia. A szerver lehetővé teszi, hogy egyszerre futtatni több szerver, elég különböző projektek regisztrálja port.
Bild HTML.
// A HTML Gulp.Task ("HTML: build", funkció () () () () ()) (Gulp.SRC (path.src.html) // a kívánt útvonalon lévő fájlok kiválasztása. Cső (Rigger ()) // Riggeren keresztül cseng . Cső (gulp.dest) // Távolítsa el őket a Build .pipe mappába (Connect.Reload ()) //, és indítsa újra a szerverünk frissítéseit);Építsen JS-t.
// Ellenőrizze a JS-t a hibákon, és tegye őket a Gulp.task konzolba ("JSHINT: BUILD", FUNCTION () (RETURN GULP.SRC (path.src.jsint) // Válassza ki a kívánt útvonalon lévő fájlokat. Cső (JSHINT ( ) // Run Via Jshint .pipe (JSHINT.REPORTER ("JSHINT-Stílusos")); // stílusos hibák kimenete a konzolban)); // Bilding YavaScript Gulp.Task ("JS: BUILD", funkció () () (gulp.src (path.src.js) // megtalálja a főfájlunkat.pipe (RIGNER ()) // Rigger-en keresztül .pipe .init ()) // inicializálja a sourcemap .pipe (Ugliferify ()) // a Js .pipe (sourcemaps.write ()) // a kártyák kezelésére. Cső (átnevezése (utótag: ".min")))) / add UNXIX.MIN a kimeneti file.pipe (Gulp.dest (path.build.js)) // kirakodása készenléti fájl Build .pipe (Connect.Reload ()) // és indítsa újra a kiszolgálót));Építsen spritet
Minden kép kombinálására a Sprite-hez az SRC / CSS / Sprite könyvtárhoz való felvételhez és a Gulp által végzett futtatás után egyetlen spritter kép. A Sprite-ben nem szabad hozzáadni logókat és táblákat tiszta méretek nélkül.
// Bilda Sprites Gulp.Task ("Sprites: Build", funkció () () () () (VAR Spricedata \u003d Gulp.SRC (patr.src.sprits) // Válassza ki, hogy hová válassza a képeket a Sprite-ban (Spriteesmith ((imgname: " Sprite.png ", // A permetezés képe CSSName:" Sprite.styl ", // Stílusnév, ahol képpozíciókat tárolnak ImgPath-ban:" Képek / sprite.png ", // way kerekek Sprite CSSFORMAT:" Stylus "// formátum, amelyben a CSstemplate pozícióját feldolgozzam:" stylus.template.mustache ", // fájl maszk cssvarmap: funkció (sprite.name \u003d" s- "+ sprite.name // Az egyes sprite nevének neve fájlnév és design "s-" a név elején))))))); sprittata.img.pipe (gulp.dest (path.build.sprits)); // Path, ahol mentjük a képet. css.pipe (gulp.dest (path .build.spritesss)); // az út, ahol megmentünk stílusokat));
A sprite kimenetéhez elegendő a keverék használata. Például a lorem.png fájl esetében a sprite minta így fog kinézni:
Lorem Sprite ($ s-lorem)
Most a Class.lorem objektum a kép méretét és a képet háttérként fogja elvégezni.
Bild statikus képek
A statikus képek az elrendezési sablonban használt képek.
// buildim statikus képek Gulp.task ("Kép: build", funkció () () (gulp.src (path.src.img) // Válassza ki a képeinket. Cső (Imagemin ((// Sing Ths Progressive: True, // Compression.jpg svgoplopugins: [(Removeviewbox: FALSE)], // svg Interlaced: TRUE, //SVG.GIF OptimizationLevel: 3 // tömörítési arány 0-ról 7-re))) .pipe (gulp.dest (út. img))) // Unload in Build .pipe (Connect.Reload ()) // újraindítás a szerver);
Bild dinamikus képek
A dinamikus képek tartalmú képek, amelyek megváltoznak a webhelyen, és a sablon szinten csak a demonstrációhoz kapcsolódnak. Például lehet olyan képek, amelyek hírek stb.
// buildim dinamikus képek Gulp.task ("ImageSzép: build", funkció () () (gulp.src (path.src.conentimg) .pipe (Imagemin ((// Sing Ths progressive: true, //page.jpg svgoplugins: [(Removeviewbox: FALSE)], // svg Interlaced: true, //spotion.gif optimalizevel: 3 // tömörítési arány 0-ról 7-re))) .pipe (gulp.conentimg)). Unload in Build .pipe (Connect.Reload ()) // újraindítás a szerver));
Bildim CSS.
// Custom CSS Gulp.Task ("Cssown: build", funkció () () (gulp.src (path.src.css) // Válassza ki a fő stílusfájlt. Cső (sourcemaps.init ()) // inicializálja a Soucemapot. A cső (stylus ((tömörítés: true, "a CSS": true)) ": TRUE))) // Compile Stylus .pipe (előtagoló (böngésző: [" utolsó 3 verzió ","\u003e 1% "," IE 8 "," IE 7 (]))) / Adjunk hozzá az utótagokat. ;Különálló feladat külső stílusokhoz:
// épület Vendon CSS Gulp.Task ("Cskvendor: build", funkció () () (gulp.src (path.src.cssvendor) // A szállító .pipe mappát (sourcemaps.init ()) // inicializáljuk a Soucemapot. cső (cssmin ()) // surrem.pipe (sourcemaps.write.write ()) // propyash sourcemap .pipe (gulp.dest (path.build.css)) // kirakodott a build.pipe-ben (Connect.Reload ())) // újraindítsa a kiszolgálót)));
Adjon hozzá feladatokat a Bild General CSS-hez:
// Bildim CSS egész Gulp.task ("CSS: build", ["Cssown: build", // "cssvendor: build"]);
Ha a külső stílusokat külön-külön kezelni szeretné, és az egyes fájlokkal ki kell töltenie őket, akkor a "Cssvendor: Build" vonalat meg kell adnia.
Betűtípusok építése
// Bildim Gulp.task betűtípusok ("Betűtípusok: Build", funkció () () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)) // kirakodása));Build.haccess.
// bildim htaccess gulp.task ("Htaccess: build", funkció () () (gulp.src (path.src.htaccess) .pipe (gulp.sbest (path.build.htaccess)) // kirakodása));Közös építkezés
Annak érdekében, hogy minden részt külön-külön megvásárolhassuk, a propyat feladat az általános építéshez:
// bildim minden gulp.task ("build", ["html: build", "JSHINT: BUILD", "JS: BUILD", "SPRES: BUILD", "CSS: Build", "Fonts: build", htaccess: Építőanyag, "kép: Építőanyag", "ImagesContent: Építőanyag"]);
Tisztítás Bilda
Néha meg kell tisztítani a kiépítési könyvtárat. Itt a következő feladat jön a mentéshez:
// Tisztítsa meg a Bild mappát Gulp.task ("Clean", funkció (cb) (rimraf (path.clean, cb););
Vigyázz vagy nyomon követi a változásokat valós időben
Az egyik legfontosabb és hasznos funkciók A Gulp az a Watch funkció, amely lehetővé teszi, hogy a valós időben nyomon követhesse az összes módosítást az előállított fájlokkal, és attól függően, hogy konkrét lépéseket hajtson végre:
// Watch Gulp.Task ("Watch", funkció () () (// bildim html a változó óra (, funkció (esemény, cb) esetén (Gulp.start ("html: build");)); // buildim Sprites Változó óra (, funkció (esemény, CB) (Gulp.Start ("Sprites: Build");)); // buildim kontextusos mintavétel a változó óra (, funkció (esemény, cb) esetén (Gulp. Start ("ImageScontent: build");))))); // Bildim CSS változó óra (, funkció (esemény, cb) (Gulp.start ("CSS: build");))); // Ellenőrizze a JS-t Changing Watch (, ["JSHINT"]); // Bildim JS a változó óra (, funkció (esemény, cb) (Gulp.start ("JS: build");)); // bildim statikus képek Változó óra (funkció ("Kép: Build");))); // bildim betűtípusok Ha megváltoztatja az órát (, funkció (esemény, cb) (Gulp.start ("Betűtípusok: Build");)); / Bildim HTCCESS váltás esetén Watch (, FUNCTION (esemény, CB) (Gulp.start ( "htaccess: Építőanyag");))));
Alapértelmezett műveletek
Alapértelmezett műveletek - mely feladatok elvégzik a feladatkezelőt, amikor beírják a Gulp parancsot a konzolban:
// Alapértelmezett műveletek Gulp.task ("Alapértelmezett", ["build", "Watch", "Connect"]);
A mi esetünkben a védelemben a projektünkbe kerülünk, bekapcsoljuk az órát, és elindítjuk a kiszolgálót.
Parancssor parancsok
A parancssor összes galpa parancsa két részből áll. Ez közvetlenül a Gulp parancs és az asztal neve. Itt található a konfigurációra vonatkozó parancsok listája:
- gulp - a főparancs, elindítja a feladat alapértelmezett
- gulp Build - Bildim All
- gulp Watch - Start Watch
- gULP Tiszta - Az építési katalógus tisztítása
- gulp Connect - Start szerver
- gulp HTML: BUILD - HTML BILD
- gulp JSHINT: BUILD - Ellenőrizze a JS hibákat
- gulp Js: Build - build js
- gulp Sprites: Build - Build Sprite
- gulp Image: Build - Bild statikus képek
- gulp Imagecontent: Build - Bild Dynamic Képek
- gULP CSSOWN: BUILD - CSS egyéni bild
- gulp Cskendor: Build - Bild Külső CSS
- gULP CSS: Build - Common CSS Bild
- gulp Fonts: Build - Bild betűtípusok
- gulp Htaccess: Build - Build.hacess
Ebben a szakaszban a Gulpfile.js befejeződött.
Másolja a kiindulási csomagot a projektben
Kezdje el, menjen át a konzolon a mappában, ahol fejlesztünk, mint például a CD fejlesztése / példája, és mindent másol a kiindulási csomagkönyvtárból a CP -a / Develop / Start / Start /. ~ / Fejlesztés / példa /
Ez a másolási módszer a legkényelmesebb, mert Pontosan másolatot fog másolni, beleértve a rejtett fájlokat .gitignore stb.
Következtetés
Használ ez az útmutató Elkészítettünk egy kiindulási csomagot, hogy a Gulp-t használja az elsődleges fejlesztés érdekében.
Ez a csomag a Githubon is elérhető
Utóirat
Ez a cikk nem végleges, és a változásoktól és fejlesztések függvényében frissül.
