Tömörítse a képeket, a JS- és CSS-fájlokat a weboldalak betöltésének optimalizálásához és még sok máshoz. A folyamat egyszerűsítése érdekében javasoljuk, hogy használja a Gulp 4 projekt összeállítást, amelyet Andrej Gorokhov folyamatosan fejleszt. Az alábbiakban letöltési linkeket talál, de most nézzük át a főbb pontokat: a leírást és a telepítést.

Gulp Project Builder

A Gulp egy projektépítő, egy eszköz a fent leírt feladatok automatizálására. Segít a munka felgyorsításában és a projekt megfelelő előkészítésében a kiadásra.

Letöltheti az összeállítást a Github tárolóból vagy a Git parancssorból. A jövőben személyre szabhatja az igényeinek megfelelően.

Sajátosságok

• osztályok elnevezése a BEM szerint
• BEM szerkezetet használnak
• SCSS előfeldolgozót használnak
• a Babel transzpilert használja a modern JavaScript (ES6) támogatására a böngészőkben
• A Webpack-et JavaScript modulok készítésére használják
• A Bootstrap alapú CSS intelligens grid a gyors adaptív elrendezéshez használatos
• szigorú kódútmutatót használnak

Telepítés

• telepítse a NodeJS-t (ha szükséges) és a Yarn-t
• töltse le a buildet a Git segítségével: git klón https://github.com/andreyalexeich/gulp-scss-starter.git
• gulp telepítése globálisan: yarn global add gulp-cli
• lépjen a letöltött mappába az összeállítással: cd gulp-scss-starter
• töltse le a szükséges függőségeket: fonal
• kezdéshez írja be a következő parancsot: yarn run dev (fejlesztési mód)
• a projekt felépítéséhez írja be a yarn run build (építési mód) parancsot

Ha mindent helyesen csinált, a böngészőnek meg kell nyílnia a helyi szerverrel. Az építési mód magában foglalja a projekt optimalizálását: a képek tömörítését, a CSS- és JS-fájlok minimalizálását a szerverre való feltöltéshez.

Ha problémái vannak a telepítéssel, nézze meg ezt a videót:

Fájlszerkezet

gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── blokkok │ ├── betűtípusok │ ├── js │ ├─│ ── stílusok │ ├── nézetek │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├─rc├tt .eslin . ├─ ─ .stylelintrc ├── .stylelintignore └── .gitignore

• Mappa gyökér:
  • .babelrc.js – A Babel beállításai
  • .bemrc.js – BEM beállítások
  • .eslintrc.json – ESLint beállításai
  • .gitignore – tiltja, hogy a Git nyomon kövesse a fájlokat
  • .stylelintrc - Stylelint beállítások
  • .stylelintignore – tiltja, hogy a Stylelint nyomon kövesse a fájlokat
  • gulpfile.babel.js – Gulp beállítások
  • webpack.config.js – Webpack beállításai
  • package.json – a függőségek listája
• src mappa – a fejlesztés során használt:
  • BEM blokkok: src/blocks
  • betűtípusok: src/fonts
  • képek: src/img
  • JS fájlok: src/js
  • oldalak: src/views/pages
  • SCSS fájlok: src/styles
  • HTML fájlok: src/views
  • Apache webszerver konfigurációs fájl gzip beállításokkal (veszteségmentes tömörítés): src/.htaccess
• A dist mappa az a mappa, ahonnan a helyi fejlesztési kiszolgáló elindul (a yarn run dev futtatásakor)
• Folder gulp-tasks - mappa Gulp feladatokkal

Csapatok

• yarn run lint:style - ellenőrizze az SCSS fájlokat. A VSCode-hoz telepítenie kell a bővítményt. A WebStorm vagy a PHPStorm esetében engedélyeznie kell a Stylelint funkciót a Languages ​​& Frameworks - Style Sheets - Stylelint menüpontban (a hibák automatikusan kijavításra kerülnek a fájl mentésekor)
• yarn run lint:style --fix – javítsa ki az SCSS-fájlok hibáit
• yarn run dev - indítsa el a szervert projektfejlesztéshez
• yarn run build – építsen fel egy projektet optimalizálással a szerver elindítása nélkül
• yarn run build nézetek – Mopsz fájlok fordítása
• yarn run build stílusok – SCSS-fájlok fordítása
• yarn run build scripts - build JS fájlokat
• yarn run build images - build images
• yarn run build webp - konvertálja a képeket .webp formátumba
• yarn run build sprites - build sprites
• yarn run font fonts - build fonts
• yarn run build favicons - build favicons
• yarn run build gzip - build Apache konfiguráció

Komponens alapú megközelítés a weboldalfejlesztéshez

• Minden BEM blokknak saját mappája van az src/blocks/modules mappában
• egy BEM blokk mappája egy HTML fájlt, egy SCSS fájlt és egy JS fájlt tartalmaz (ha a blokk scriptet használ)
  • A blokk HTML-fájlja importálva van az src/views/index.html fájlba (vagy a szükséges oldalfájlba, ahonnan a blokk meghívásra kerül)
  • A blokk SCSS fájl importálásra kerül az src/blocks/modules/_modules.scss fájlba
  • A blokk JS fájl importálása az src/js/import/modules.js fájlba

Példa egy mappaszerkezetre BEM blokkal:

Blokkok ├── modulok │ ├──header │ │ ├── header.html │ │ ├── header.js │ │ ├──sss fejléc.

Annak érdekében, hogy ne hozza létre manuálisan a megfelelő mappát és fájlokat, csak írja be a bem create my-block parancsot a konzolba egy BEM blokkmappa létrehozásához, ahol a saját blokk a BEM blokk neve.

Projekt oldalak

• A projekt oldalai az src/views/pages mappában találhatók
  • kezdőlap: src/views/index.html

Betűtípusok

• A betűtípusok az src/fonts mappában találhatók
  • használjon .woff és .woff2 formátumot
  • A betűtípusokat az src/styles/base/_fonts.scss fájl tartalmazza
  • A szolgáltatás segítségével helyi betűtípusokat konvertálhat

Képek

• a képek az src/img mappában vannak
  • A favicon létrehozásához használt képnek az src/img/favicon mappában kell lennie, és legalább 1024 képpont x 1024 képpont méretűnek kell lennie.
  • a képeket a rendszer automatikusan .webp formátumba konvertálja. Részletes használati információk.

Harmadik fél könyvtárai

• minden harmadik féltől származó könyvtár a node_modules mappába van telepítve
  • letöltésükhöz használja a yarn add package_name parancsot
  • könyvtár JS fájlok csatlakoztatásához importálja azokat a BEM blokk JS fájljának legelejére (vagyis a szkript által használt BEM blokkba), például:

  Importálás $ innen "jquery";

  • könyvtárstílusfájlok csatlakoztatásához importálja azokat az src/styles/vendor/_libs.scss fájlba
  • A JS-fájlok és a könyvtárak stílusfájljai önállóan nem módosíthatók

⚠️ Ha a projektje több könyvtárat használ, amelyeket több oldalon kell szerepeltetni, a hibák elkerülése érdekében:

• hozzon létre egy oldalak mappát az src/js/import útvonalon
• az oldalak mappában hozzon létre egy js fájlt az oldalhoz, például pageA.js , és importáljon oda egy olyan könyvtárat, amelyet csak ezen az oldalon fog használni.
  • végezze el ugyanezt a lépést további oldalakhoz
• a webpack.config.js fájlban adjon hozzá oldal js fájlokat a belépési ponthoz, például:

Belépés: (fő: "./src/js/index.js",A oldal: " ./src/js/import/pages/pageA.js", B oldal: " ./src/js/import/pages/pageB.js" }

• csatlakoztassa a lefordított js fájlokat a szükséges oldalakon

CSS smart-grid

A gyűjtő tartalmazza Dmitry Lavrik smart-grid CSS-rácsát. Lehetővé teszi, hogy megszabaduljon a felesleges osztályoktól a jelölésben az SCSS-ben található mixinek használatával, és felgyorsítja az adaptív elrendezést. A konfiguráció már be van állítva a Bootstrap rács szerint. Használati példa:

Elemek ( @include row-flex (); @include md (justify-content, center); .item ( @include col (); @include size (3); @include size-md (5); @include size- xs (10 ); ) )

Azokban az időkben, amikor a webhelyek kicsik voltak, nem volt szükség külön frontend összeállításra. A CSS és a JS mennyisége és összetettsége azonban nőtt, és az a nézet, amelyben kényelmes volt fejleszteni, nagyon különbözött attól a nézettől, amelyben az eredményt a felhasználónak kell bemutatni. Olyan feladatok jelentek meg, mint a fájlok összefűzése (ragasztása), a kód minimalizálása, sőt az előfordítás is. Ennek eredménye a speciális frontend összeszerelő rendszerek lettek, amelyekről beszélni fogunk.

Természetesen, amint észrevehetővé vált az összeszerelés igénye, a backend által használt eszközök azonnal elkezdtek kúszni a frontendre. Legfőbb problémájuk, és amiatt, hogy jelenleg egyre kevésbé használják a front-endre, az, hogy egyáltalán nem igazodnak annak sajátosságaihoz, hiszen a projekt felépítése, a felhasznált technológiák és a fejlesztési ciklus nagymértékben függ attól, a projekt feladatai, és jelentősen eltérhetnek. Az Ant például bőbeszédű szintaxissal rendelkezik, és nem különösebben képes megtenni a frontendhez szükséges dolgokat: nagyon kevés a beépített feladat, és rosszul bővíthető. Ha a GNU make-ről beszélünk, akkor sokkal univerzálisabb, mivel shell parancsokkal működik. A hátrányok közé tartozik a speciális szintaxis, amely további tanulmányozást igényel, a shell jól ismeretének szükségessége, és a Makefiles azon tendenciája, hogy gyorsan bonyolultabbá váljanak az összeállítási követelmények növekedésével.

Nézzünk meg egy közepes méretű, szabványos felépítésű weboldalt, és próbáljuk meg felsorolni az összeszerelés főbb szakaszait, amelyeken keresztül megy. Az egyszerűség kedvéért tegyük fel, hogy nem vesződünk azzal, hogy a különböző oldalakhoz különböző JS-fájlokat hozzunk létre, ugyanakkor több kis fájlt szeretnénk a fejlesztőkörnyezetben tartani valamilyen modularitás támogatása érdekében. Általában valahogy így néz ki:

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

A build rendszer általában a következőket teszi:

• összefűzi az összes JS fájlt egybe (a megfelelő sorrendben, nem akarjuk a szkriptjeinket a jQuery előtt betölteni);
• ellenőrzi a JS kód érvényességét (például a JSHint segítségével);
• minimalizálja a kódot, szükség esetén obfuszkálja (vagyis érthetetlenné teszi);
• összefűzi a CSS fájlokat (itt is fontos a sorrend, mivel a tulajdonságok gyakran felülírásra kerülnek);
• minimalizálja a CSS-t;
• külön könyvtárba helyezi a fájlokat, ahonnan beilleszti őket a HTML-be.

Ezt az egyszerű sémát gyakran további követelmények bonyolítják: teszteket futtatnak, CSS előfeldolgozó kódot fordítanak le, képeket optimalizálnak, sablonokat fordítanak.

Mindezek a feladatok, sőt még több is megoldható a modern összeszerelő eszközökkel. Megvizsgáljuk a Node.js platformon működő legnépszerűbb megoldásokat. Közös előnyük a világos nyelvezet, amelyet minden front-end fejlesztő ismer (vagy azt hiszi, hogy ismeri), a kezdeti fókusz a front-end problémák megoldására, valamint az érthető Node.js környezet, amelyben esetleg már fejleszti az alkalmazást.

Röfög

A Grunt a legrégebbi, legfontosabb és legnépszerűbb építőeszköz. Az általunk áttekintett felépítési rendszerek szinte mindegyike ilyen vagy olyan módon hasonlítja magát a Grunthoz, és néhány gyorsabb vagy egyszerűbb alternatívaként jött létre. Ennek ellenére van néhány jelentős hátránya.

Először is, amint sok front-end fejlesztő rámutat, a Grunt bőbeszédű. Egy egyszerű felépítésű rendszer felállításához körülbelül száz soros konfigurációra lesz szükség. Ez azonban önmagában nem akkora hátrány: a konfig elég könnyen olvasható, és a Grunt népszerűsége miatt általában nem nehéz egy tipikus feladathoz kész konfigot találni.

Másodszor, a Grunt univerzális termékként fejlesztették ki, vagyis annak alapján szinte minden, a projekt összeállításával kapcsolatos problémát megoldhat. Menő, de sokoldalúságért ára van. Mind az előbb említett bőbeszédűség, mind a gyorsaság. A többi Node.js build rendszerhez képest a Grunt észrevehetően lassabb, és ami a legbosszantóbb, a projekt növekedésével lelassul. Anélkül, hogy belemennénk a Grunt architektúrájának részleteibe, ennek az az oka, hogy valahányszor például egy JS-fájlt kell készítenie, újraépíti az összes JS-fájlt. Megpróbálhatja felgyorsítani a felépítési folyamatot, ha manuálisan adja meg a szükséges kapcsolatokat a fájlok között, de egy összetett fájlfüggőség-fával rendelkező projekteknél ez túlságosan bonyolult lehet.

Mindezek ellenére a Grunt hatalmas ökoszisztémával rendelkezik: több száz plugin, több ezer projekt, több milliárd fejlesztő, ez minden. Vagyis nem csak a Grunt univerzális, de valószínűleg már meg is van írva egy plugin a feladatodhoz.

Összefoglalva, a Grunt remek választás kis- és közepes méretű projektekhez, különösen akkor, ha korábban még nem állított be összeállítási rendszert. Hatalmas közösség, csomó plugin, áttekinthető dokumentáció, sőt orosz nyelvű cikkek és jelentések azoknak a szerencsétleneknek, akik nem tudnak nélküle élni. És természetesen, ha a jövőben valamilyen oknál fogva a Grunt már nem felel meg Önnek, mindig válthat egy másik rendszerre, amely mentes a hiányosságaitól.

Korty

A Gulp jelenleg egy aktívan fejlődő összeállítási rendszer. Architektúrája a Node.js-ben található szálak használatán alapul, így nincs szükség ideiglenes fájlok és mappák lemezre írására. A Gulp fő előnye a konfiguráció gyorsasága és rövidsége. Sőt, ha az első vitathatatlan, akkor a Grunthoz képest a rövidség egyszerűen az eltérő szerkezet miatt érhető el. Ha a Grunt konfigurációban külön-külön kezeli a bővítményeket, mindegyiket beállítva, akkor a Gulp konfigurációban le kell írnia azt a folyamatot, amelyen minden fájlnak (vagy fájlkészletnek) keresztül kell mennie ahhoz, hogy összegyűjtse őket. Íme egy valós példa a SASS összeállítására:

Gulp.task("stílusok", function() ( return gulp.src("styles/*.scss") .pipe(sass(( stílus: "expanded" ))) .pipe(rename((utótag: ".min "))) .pipe(minifycss()) .pipe(gulp.dest("build/styles/css")); ));

Az első sorban egy Gulp-feladatot regisztrálunk stílusok néven. Ezután sorban leírjuk, hogy a styles/*.scss maszknak megfelelő fájlokkal mit kell tenni: fordítsd le a SASS-t, add hozzá a .min-t a fájlnévhez, kicsinyítsd, tedd a végső könyvtárba. Ha valami mást kell csinálnunk ezzel a fájllal, akkor egyszerűen hozzáadjuk a megfelelő parancsot, például.pipe (a fájl elejére írjunk egy megjegyzést ASCII egyszarvúval) (remélem végre mindennap készítenek egy plugint ehhez feladat). Jobban szeretem a konfiguráció írásának ezt a megközelítését: jobban leírja, hogy valójában mi történik a fájlokkal.

Természetesen a Gulp még mindig alulmúlja a Grunt a beépülő modulok számát tekintve, de sok feladathoz vannak bővítmények. Valószínűleg elég lesz neked a meglévő plugin, és ha valami nagyon hiányzik, mindig írhatsz sajátot (csak vicceltem). Egyébként van egy gulp-grunt csomag, amivel Grunt feladatokat is futtathatsz Gulpból, ha nagyon kell.

Ha szereted ezt az építési megközelítést, akkor fontos a gyorsaság, és nem kell olyan konkrét feladatokat végrehajtanod, amelyekhez csak a Grunt rendelkezik beépülő modullal, akkor a Gulp remek választás lehet. Jelenleg Gulp továbbra is Grunt legkomolyabb versenytársa.

Brokkoli

A vizsgált összeszerelő szerszámok közül a legfiatalabb jelenleg még fejlesztési szakaszban van. A Broccolli fejlesztői nem titkolják, hogy a Gulp ihlette őket, de tévesnek tartják az alapjául szolgáló koncepciók egy részét. Például úgy döntöttek, hogy gyorsítótárba helyezik az összes közbenső összeállítási eredményt (amelyet az egyes beépülő modulok valósítanak meg), hogy felgyorsítsák a folyamatot, ahelyett, hogy csak a szükséges fájlokat részlegesen újraépítenék. Az sem tetszett nekik, hogy a Gulp úgy működik a legjobban, ha egy fájlt egyetlen véglegessé, azaz egy az egyhez alakítanak át. A több az egyhez műveletek javítása érdekében a Gulp jelenleg egy összetett virtuális fájlrendszer-tervezést fejleszt, amelyet Broccolli a Gulp eredeti koncepcióinak szükségtelen bonyodalmának és gyengeségének tart. A Broccolli eleinte fákkal működik fájlok helyett, és csak a fákat más fákká alakítja át (még az ugyanabból a csúcsból származó degenerált fákra is).

Az összeállítási probléma nagyon ésszerű elméleti megközelítése nem oldja meg a Broccoli kiterjesztések számának problémáját. Sajnos körülbelül kéttucatnyian vannak, és csak a legalapvetőbb feladatokat látják el. Ha valami újat szeretne kipróbálni, nézze meg a Broccollit, elég gyors, aktívan fejlesztik, de valószínűleg még túl nyers ahhoz, hogy komoly projektekben használhassa.

Villásreggeli

A Brunch ugyanazzal a feladattal jött létre - minden fronton legyőzni Grunt, de teljesen más szemszögből közelítette meg. A Brunch fejlesztői úgy döntöttek, hogy alaposan átlátják a témakört, vagyis egy kevésbé univerzális eszközt készítenek, amely kifejezetten a front-end feladatokhoz lesz szabva, például minden beállítás nélkül, hogy megértsék, a *.js egy fájl szkriptekkel a *.coffee a CoffeeScript, és így tovább. A Brunch elég gyors, sokkal gyorsabb, mint a Grunt, de valamivel lassabb, mint a Gulp. A Brunch kétségtelen előnyei közé tartozik az igazán kompakt konfiguráció is, amely többszörösen kisebb, mint a Grunt és a Gulp. Itt van például egy egyszerű Brunch konfiguráció:

Exports.config = fájlok: javascripts: joinTo: "javascripts/app.js": /^app/ "javascripts/vendor.js": /^(bower_components|vendor)/ stylesheets: joinTo: "stylesheets/app.css" sorrend :after: ["vendor/styles/helpers.css"] templates: joinTo: "javascripts/app.js"

Kérjük, vegye figyelembe, hogy a konfiguráció CoffeeScript-ben (mint ebben az esetben) és normál JS-ben is írható. Létrehozunk egy normál modult, amely JSON-t ad vissza összeállítási beállításokkal.

Ügyeljen a csatlakozási és megrendelési kulcsokra. Ez az a tartományi tudás, amelyet említettem – a konfiguráció szintjén a Brunch tudja, hogy nagy valószínűséggel össze akar majd egyesíteni fájlokat, néhányat előbb, mint másokat. Ez az, ami lehetővé teszi, hogy a Grunt konfiguráció 400 sorát lecserélje 20–30 soros Brunch-re.

Ráadásul a Brunch ökoszisztémája sokkal kisebb, mint Grunté, sőt Gulpéé. Körülbelül 50 plugin van (pl. Gulphoz képest 450+), a fejlesztés nem túl gyors, általában itt minden elég szomorú.

Összefoglalva: ha nagyon szereted a rövid konfigokat, fontos a gyorsaság, de nincs szükséged különösebb műveletekre az építési szakaszban, akkor nézd meg a Brunch-et. Persze zavaró a kevés plugin, de hátha változni fog a helyzet.

ENB

És végül a legédesebb rész. Szeretnék mesélni a Yandexnél Marat Dulin által kifejlesztett összeszerelő rendszerről, amely az ENB nevet viseli. Jelenleg ezt használjuk projektünkben. Megközelítése alapvetően eltér az összes leírt rendszertől: eredetileg a BEM módszertanos projektekkel való munkára jött létre, bár, mint a szerző megjegyzi, platformja mentes a BEM ideológiájától, és minden megfelelő szerkezetű projekthez használható. .

Röviden, ez a lényeg. Az ENB-ben a cél fogalmával operálunk, vagyis a végső fájllal, amelyet össze kell gyűjteni, vagy egy csomóponttal (általában mappa, egy oldal), amelyhez egy bizonyos fájlkészletet össze kell gyűjteni. A célfájl felépítéséhez számos technológiát használunk (nagyjából Grunt kifejezéssel bővítményeket, bár a technológiák kisebbek és speciálisabbak). Az ENB mindenekelőtt meghatározza azokat a kezdeti fájlkészleteket, amelyekre szükség van a célok összeállításához (több alapvető technológia ezt teszi, alapértelmezés szerint a BEM módszertannal dolgozik, vagyis olyan *.bemdecl fájlt keres, amely tartalmazza egy adott csomópont különböző blokkon), teljesen kibontja a függőségi fát (amikor a blokk, amelytől az oldal függ, maga egy másiktól függ, mindkettő a megfelelő sorrendben kapcsolódik), majd megkeresi az egyes regisztrált technológiákhoz szükséges fájlokat. Ezután az ENB követi a konfigurációban leírt fájlátalakítási sorrendet (itt láthatunk némi analógiát a Gulp-pal). Az építési rendszerek standard megközelítésétől való néhány eltérés ellenére, miután megértette az alapvető fogalmakat, az ENB-vel való további munka meglehetősen egyszerű.

Az ENB fő előnyei: az összeszerelés gyorsasága, a rugalmas gyorsítótárazási rendszernek és a különböző technológiák közötti közbenső adatok cseréjének köszönhetően, független folyamatok párhuzamosítása, valamint a legnehezebb technológiák külön részfolyamatokra való szétválasztása. Rendkívül könnyű új technológiákat írni az ENB-hez, ha valamilyen módon elégedetlenek vagyunk a szabványosak viselkedésével.

A hátrányok közé tartozik az a tény, hogy az ENB konfigurációja meglehetősen bőbeszédű, mivel a felépítés minden szakasza vezérelhető. Ráadásul az ENB még mindig a BEM módszertanra íródott, és egy teljesen más szerkezetű projekthez csatolni felesleges mozdulatokat igényel. Az ENB-hez nem sok technológia íródott (kb. 60), de a BEM projektek legtöbb feladatával durván megbirkózik.

Összegezve: az ENB a legjobb választás a BEM módszertanon alapuló projektekhez, amit személy szerint a közepes és nagy telephelyekre tartok a legalkalmasabbnak, hiszen a kód blokkokba rendezése sziklákba és sípolókba. Nagyon gyors, több tucat oldalt és több száz fájlt gyűjt össze másodpercek alatt, könnyen beállítható és kellemes a használata. Ha a projektje nagy, összezavarodik a kódban, és egyszerre több ezer sornyi fájlt szerkeszt, azt tanácsolom, hogy tanulmányozza részletesebben a BEM-et, hogy megszervezhesse a front-end projektek szerkezetét. És ha szereti a BEM-et, akkor az ENB-t is szeretni fogja, mint a BEM-projektek építésének legnatívabb eszközét.

Ebben a cikkben egy Gulp-környezet példáját tekintjük meg, amely egy webes projekt kényelmes front-end fejlesztésére használható. Ez a példa alapértelmezés szerint a Bootstrap 4 keretrendszeren alapuló webhelyek és webalkalmazások létrehozására van beállítva.

A cikkben tárgyalt projekt a Githubon található: https://github.com/itchief/gulp-project-bootstrap-4

Videó ehhez a cikkhez:

Útmutató a Gulp környezet telepítéséhez

Környezet létrehozásához telepíteni kell a következő programokat:

• "Node.js" (erről az oldalról letöltheti a "Node.js" telepítőt operációs rendszeréhez; a projekthez legalább 10-es programverzió szükséges);
• "Gulp" (a Gulp-ot a következő parancs futtatásával telepítheti a konzolon: npm install -g gulp-cli).

A következő lépés az npm csomagok és függőségeik telepítése. Ehhez a konzolon (a projekt gyökérkönyvtárában kell lennie) futtassa a parancsot:

Npm telepítés

Ez a parancs telepíti az összes olyan csomagot, amely mind a környezethez, mind a frontendhez szükséges. Az npm ezeket a műveleteket a "package.json" fájlban leírt utasítások szerint hajtja végre.

Ha a projekt első verzióját (1.0.0) használja, amely a Bower csomagkezelőt használja, egy másik parancsot kell futtatnia:

Bower telepítés

Ez a program telepíti a „bower.json” fájlban megadott frontend csomagokat.

Hogyan kell használni a Gulp környezetet?

Nyisson meg egy parancssort (az elérési útnak a projekt gyökérmappájára kell mutatnia), és írja be a gulp parancsot (normál mód):

A parancs beírása után elindul az alapértelmezett feladat, azaz. "alapértelmezett". Ez a feladat egy sor további feladatot fog futtatni: "építés", "webszerver" és "figyelés".

A "build" feladat elkészíti a projektet éles használatra (azaz futni fogja a "clean:build", "html:build", "css:build", "js:build", "fonts:build" és "image:build" " "). Ezek a feladatok az eredményül kapott projektfájlokat az "eszközök/építés" mappába helyezik.

A "webszerver" feladat célja egy helyi webszerver elindítása az oldalak "élő újratöltésével" a böngészőben. Nagyon egyszerűvé teszi a projekt megtekintését és tesztelését.

A „watch” feladat az „assets/src” mappában található forrásfájlok változásainak figyelésére szolgál, és ha ez előfordul, különféle feladatokat hajt végre. Más szóval, lehetővé teszi a szükséges feladatok automatikus futtatását, és az így létrejövő fájlok (az "eszközök/build" mappa tartalma) naprakészen tartását.

Ezenkívül a projekt egyik vagy másik részének szelektív (független) összeszerelését is elvégezheti.

Ha például csak a webhely CSS-részét szeretné elkészíteni, csak írja be a parancsot:

Gulp css:build

További feladatok listája:

Gulp clean:build // az "assets/build" könyvtár tisztítása gulp html:build // HTML fájlok létrehozása gulp js:build // JS fájlok felépítése gulp fonts:build // betűtípusok létrehozása gulp image:build // képösszeállításhoz

A Gulp környezet leírása

Ebben a részben a következőket fogjuk nézni:

• a Gulp környezet alapvető eszközei és fájlszerkezete;
• hogyan lehet Bootstrap forrásokat csatlakoztatni a projekthez és konfigurálni azokat;
• hogyan lehet önállóan (a semmiből) inicializálni egy Gulp-projektet és telepíteni a függőségeket (a kész csomag.json használata nélkül)
• a Bower inicializálása és a front-end csomagok nulláról történő telepítése (a kész "bower.json" használata nélkül)*;
• a Gulp projektépítő fájl tartalma (gulpfile.js)

* A Bower csomagkezelőt a 2.0.0 verzió óta nem használták a projektben.

Eszközök listája

A front-end projekt (site) fejlesztésére szánt környezet az alábbi eszközökre épül:

• Node.js (a környezet, amelyben a környezet végrehajtásra kerül);
• npm (a csomagkezelő a Node.js-hez tartozik; a Gulp, a bővítmények és a front-end csomagok letöltésére szolgál);
• jQuery, Popover, Bootstrap (csomagok, amelyek a webhely css és js részeinek felépítésére szolgálnak);
• Gulp és beépülő moduljai (a projekt felépítéséhez és egyéb webes feladatok végrehajtásához fogják használni).

A projekt első verzióiban a Bower csomagkezelőt is használták. jQuery, Popover és Bootstrap könyvtárak betöltésére használták. A 2.0.0-tól kezdődő projektverziókban ezek a könyvtárak az npm használatával töltődnek be.

Egy Gulp projekt fájlszerkezete

Egy projekt fájlszerkezete többféleképpen szervezhető. Ez függhet mind az adott fejlesztő preferenciáitól, mind attól a projekttől, amelyre létrehozzák.

Ebben a cikkben a következő szerkezetet fogjuk követni:

A projekt gyökerében található az "assets" mappa és a "gulpfile.js", "package.json" fájlok. A „gulpfile.js” fájl a Gulp projektkészítő feladatait fogja tartalmazni.

A projekt első verziója „.bowerrc” és „bower.json” fájlokat is használt. A "bower.json" fájl a Bower manager konfigurációs fájlja, amely alapján meghatározásra kerültek a betöltéshez szükséges frontend csomagok. Ebben a projektben a Bootstrap, a jQuery és a Popper betöltésére használták.

Az "assets" mappa két mappát tartalmaz: "src" (forrásfájlokhoz) és "build" (kész fájlok esetén; a Gulp builder ebbe a mappába helyezi őket). Az "src" mappa a "fonts" (a betűtípusokhoz), az "img" (a forrásképekhez), a "js" (a js-fájlokhoz), a "style" (stílusokhoz) és a "template" (HTML-töredékekhez) könyvtárakat tartalmazza. és az "index.html" fájlt.

A projekt első verziójában az "src" mappa még tartalmazta a "bower_components" könyvtárat. A Bower használatával betöltött komponensekhez készült. A jelenlegi verzióban nincs ilyen.

A "js" könyvtár két fájlt tartalmaz: "main.js" és "my.js". A „my.js” fájl a szkriptek írására szolgál, a „main.js” pedig azon fájlok listájának meghatározására szolgál, amelyek tartalmát bele kell foglalni a végső js-fájlba. A végső fájl a kimeneti fájl (a "build" könyvtárban).

A "style" könyvtár a stílusok számára van fenntartva. Ez a könyvtár három fájlt tartalmaz: "main.scss" (azoknak a fájloknak a listáját tartalmazza, amelyek tartalmát bele kell foglalni a végső stílusfájlba), "my.scss" (saját stílusok írásához) és "variables.scss" ( SCSS változókat tartalmaz, amelyekkel megváltoztatjuk a Bootstrap 4 stílusát, és felhasználjuk saját változóink létrehozására is).

Az "index.html" fájl a létrehozott projekt főoldala. Az "index.html" mellett más html oldalakat is elhelyezhet ebbe a könyvtárba.

A "sablon" könyvtár célja a HTML oldalak töredékeinek elhelyezése. Például ebben a könyvtárban létrehozhatja a "fej.html" és a "lábláb.html" fájlokat, és importálhatja azok tartalmát (a //=_fájl_útvonala szintaxissal) egyszerre több oldalra. Ez megkönnyíti a html oldalak létrehozását és szerkesztését, mert... az oldalak egyes részei már külön fájlokban lesznek.

Bootstrap 4 források csatlakoztatása a projekthez és beállítása

A Bootstrap 4 keretrendszer projekthez való csatlakoztatásának különböző módjai vannak, valamint a vele való munkavégzés lehetőségei is.

A legrugalmasabb lehetőség a forráskódok használata. Ebben az esetben nem csak Nagyon egyszerű megváltoztatni az alapértelmezett Bootstrap stílusokat, hanem csatlakozzon a projekthez csak azokat az osztályokat és összetevőket, amelyeket használni fognak benne.

A Bootstrap 4 CSS stílusok forráskódjai SCSS nyelven íródnakés nagyszámú kis fájlon keresztül jelennek meg.

Az SCSS-fájlok listája (a "node_modules/bootstrap/scss/" könyvtárban található): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", " reboot. scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions. scss" , "dropdown.scss" stb.

Minden ilyen fájl egy adott szolgáltatási feladatot hajt végre, vagy felelős a keretrendszer vagy összetevő egy adott funkciójának stílusáért. Az SCSS-fájloknak rövid és egyértelmű neveik vannak. Csak ezeket használva egészen pontosan megértheti mindegyik célját.

A Bootstrap 4 alapértelmezett stílusainak testreszabása vagy módosítása megtörténik az SCSS változó értékeinek felülbírálásával. A kényelem érdekében az összes SCSS-változót egy helyen gyűjtjük össze (a "variables.scss" fájlban). Értékeiket azonban célszerű újradefiniálni, természetesen nem ebben a fájlban, hanem a sajátjában (például „változók.scss” néven, de az „assets/style/variables.scss” helyen található).

Például a téma színeinek megváltoztatása sikerÉs veszély, a $green és a $red változók értékének megváltoztatásával történik:

// A Bootstrap 4 változói alapértelmezett értékeinek felülbírálása $red: #cc2eaa; $zöld: #2ecc71;

jegyzet hogy miután a Bootstrap 4 változóit bemásoltad a CSS-fájlodba ("assets/style/variables.scss"), el kell távolítani belőlük a!default címkét.

A!default címke célja, hogy az SCSS változót az alapértelmezett értékre állítsa. Ha az SCSS változónak már van értéke, akkor az új érték, ha a!default kulccsal adjuk meg, nem kerül beállításra.

Az "assets/style/main.scss" SCSS-fájl segítségével határozza meg, hogy mely Bootstrap 4-forrású SCSS-fájlok szerepeljenek a CSS-be történő fordításban, és melyeket nem. Más szóval, ennek a fájlnak a tartalma határozza meg azt a stíluskészletet, amely a fordítás után a weboldalhoz kapcsolódik.

Ezenkívül az „assets/style/variables.scss” (a Bootstrap-változók felülbírálásához) és az „assets/style/my.scss” (saját stílusok létrehozásához) fájlok is ehhez a fájlhoz kapcsolódnak.

A "main.scss" fájl tartalma (példa):

// A Bootstrap 4 változói alapértelmezett értékeinek felülbírálása és saját @import "változók" meghatározása; // A szükséges SCSS-források csatlakoztatása Bootstrap 4 @import "../../../node_modules/bootstrap/scss/_functions"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_grid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_transitions"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_popover"; @import "../../../node_modules/bootstrap/scss/_carousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/_utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // Csatlakoztassa SCSS fájljait @import "my";

Ezenkívül a Bootstrap 4 egyes összetevőinek működéséhez JavaScript-kód is szükséges.

A Bootstrap 4 js fájlok listája (a "node_modules/bootstrap/js/dist/" könyvtárban található): "util.js", "alert.js", "button.js", "carousel.js", "collapse. js ", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" és "toast.js".

A „main.js” használatával határozza meg, hogy mely Bootstrap 4 framework js-fájlokat kell tartalmaznia a végső projekt js-fájljában, és melyeket nem.

A szükséges fájlok importálása a kapott build/main.js fájlba a következő konstrukció segítségével történik:

//=_fájl_útvonala

A Gulp plugin "gulp-rigger" hajtja végre ezt a műveletet. Az alábbiakban leírjuk, hogyan kell telepíteni és csatlakoztatni.

Ebbe a fájlba importálhat jQuery, Popper (szükséges a Dropdown, Tooltip és Popover komponensek működéséhez), és ha szükséges, saját js fájlokat is.

A "main.js" fájl tartalma (példa):

// JQuery importálása //= ../../../node_modules/jquery/dist/jquery.js // Popper importálása //= ../../../node_modules/popper.js/dist/umd /popper.js // Importálja a szükséges Bootstrap 4 js fájlokat //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/ bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/ dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown. js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../. ./../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // Egyéb js-fájlok importálása //= my . js

Hogyan lehet inicializálni egy Gulp projektet és telepíteni a függőségeket a semmiből?

A projektfejlesztés általában egy „package.json” (manifest) fájl létrehozásával kezdődik.

A "package.json" fájl általános információkat tartalmaz a projektről (név, verzió, leírás, szerző stb.), valamint információkat a csomagokról, amelyektől ez a projekt függ.

A jegyzék létrehozásához mennie kell a projekt gyökérmappájába, és be kell írnia a parancsot:

Npm init

A parancs beírása után a következő kérdésekre kell válaszolnia:

• projekt neve (név) – „bootstrap-4”;
• verziószám – „2.0.0”;
• leírás – "Projekt indítása Bootstrap 4 használatával";
• szerző (szerző) – „oldal”;
• git adattár - "";
• belépési pont, tesztparancs, licenc, kulcsszavak – alapértelmezett értékek.

Arra a kérdésre, hogy „Jó ez?” válaszoljon „igen”-re, vagy nyomja meg az Enter billentyűt.

Ennek eredményeként a "package.json" fájl megjelenik a projekt gyökérmappájában.

Most telepítsük a projektben használt csomagokat a következő paranccsal:

Npm install package_name --save-dev // a csomag telepítése, a róla szóló információk automatikusan a "package.json" fájl "devDependencies" részébe íródnak npm install package_name --save-prod // a csomag telepítése, információval about it , automatikusan a "package.json" fájl "dependencies" szakaszába íródik

A "--save-dev" vagy a "--save-prod" kulcs határozza meg, hogy a "package.json" fájl melyik szakaszába kerüljön a rá vonatkozó információ.

A projektben használt csomagok listája:

Npm install gulp --save-dev // gulp telepítése npm install browser-sync --save-dev // böngésző-sync telepítése npm telepítés gulp-autoprefixer --save-dev // gulp-autoprefixer telepítése npm telepítés gulp-cache - -save-dev // telepítés gulp-cache npm install gulp-clean-css --save-dev // gulp-clean-css telepítése npm telepítés gulp-rimraf --save-dev // telepítés gulp-clean-css npm install gulp-imagemin --save-dev // telepítés gulp-imagemin npm install gulp-plumber --save-dev // gulp-plumber telepítése npm telepítés gulp-rigger --save-dev // gulp-rigger telepítése npm telepítés gulp- sass --save-dev // telepítés gulp-sass npm telepítés gulp-sourcemaps --save-dev // gulp-sourcemaps telepítése npm telepítés gulp-uglify --save-dev // telepítés gulp-uglify npm install imagemin-jpeg- recompress --save-dev // install imagemin-jpeg-recompress npm install imagemin-pngquant --save-dev // install imagemin-pngquant npm install gulp-rename --save-dev // install imagemin-pngquant npm install jquery - -save-prod npm install popper.js --save-prod npm install bootstrap --save-prod

Az összes függőség telepítése után a package.json fájl tartalma a következő lesz:

( "név": "bootstrap-4", "verzió": "2.0..com/itchief/gulp-project-bootstrap-4.git" ), "dependencies": ( "jquery": "^3.4.1" , "popper.js": "^1.14.7", "bootstrap": "^4.3.1" ), "devDependencies": ( "browser-sync": "^2.26.7", "gulp": "^ 4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf" ": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-plumber": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp -sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0 ", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" ) )

Hogyan inicializálható a Bower és telepíthető a frontend csomagok a semmiből?

Határozzuk meg azt a mappát, ahova a Bower letölti a csomagokat. Ehhez hozzon létre egy .bowerrc fájlt, és írja be a következőket:

("könyvtár": "assets/src/bower_components/" )

Mentsük el a .bowerrc fájlt. Most minden komponens betöltődik a bower_components könyvtárba, amely az eszközök/src/ helyen található.

Inicializáljuk a Bowert (hozzunk létre egy bower.json jegyzékfájlt). A bower.json fájl a következő paranccsal hozható létre (a projekt gyökérmappájában):

Bower init Bower inicializálása

Ezek után a következő kérdésekre kell válaszolnia:

• projekt neve (név) – bootstrap-4;
• leírás (leírás) – Projekt indítása a Bootstrap 4-en - weboldal;
• szerző (szerző) – honlap;
• az aktuálisan telepített összetevők beállítása függőségekként – Y (Igen);
• szeretné-e ezt a csomagot privátként megjelölni, ami megakadályozza, hogy véletlenül megjelenjen a rendszerleíró adatbázisban – Y (Igen);
• Egyéb kérdésekre alapértelmezés szerint a program által kínált válaszokat hagyjuk meg;

E lépések eredményeként egy bower.json fájl jön létre.

Töltsük be projektünkbe a Bootstrap 4-et és a tőle függő csomagokat (Popper és jQuery) a Bower segítségével.

Ehhez írja be a következő parancsot a konzolon:

Bower telepítés bootstrap#v4.0.0-beta --save

A -save kapcsoló szükséges ahhoz, hogy információkat írjon a csomagról a bower.json fájl függőségek szakaszába.

Ennek eredményeként a bower.json a következő tartalommal fog rendelkezni:

( "name": "bootstrap-4", "description": "Projekt indítása a Bootstrap 4-en - site", "authors": [ "site" ], "licenc": "ISC", "keywords": , "homepage" ": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "dependencies": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )

Ha nem szeretné inicializálni a Bowert (bower.json) a bower init paranccsal, és manuálisan telepíteni a csomagokat, egyszerűen létrehozhat egy bower.json fájlt (például egy fájlkezelővel), és beillesztheti a fenti szöveges tartalmat. . A függőségek projektbe való telepítéséhez írja be a következő parancsot:

Bower telepítés

A Gulp projektépítő fájl leírása (gulpfile.js)

Minden korábban végrehajtott tevékenység előkészítő jellegű volt. A létrehozott környezet által végrehajtott összes funkciót a „gulpfile.js” fájl határozza meg.

A „gulpfile.js” fájl a feladatok listája.

A fájl által végrehajtott fő feladatok:

• több stílusfájl összegyűjtése egybe, a kapott SCSS fordítása CSS-be, autoprefixek hozzáadása, CSS kicsinyítése és forrástérkép létrehozása;
• az összes szükséges js-fájl importálása egybe, a fájl minimalizálása és a forrásleképezés létrehozása;
• html fájl gyűjtése, betűtípusok átvitele, képek feldolgozása (tömörítése) és oldalak automatikus frissítése a Browser Sync segítségével.

Ezen túlmenően, hogy elkerüljük ezeket a feladatokat a forrásfájlok manuális módosításakor, létrehozunk egy másik „figyelési” feladatot. Figyelni fogja a fájlváltozásokat, és automatikusan futtat bizonyos feladatokat.

A „gulpfile.js” fájl kódja (Gulp 4 használatával):

"szigorúan használd"; /* elérési útvonalak a forrásfájlokhoz (src), a kész fájlokhoz (build), valamint azokhoz, amelyek változásait figyelni kell (figyelni) */ var path = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/", src: ( html: "assets /src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", betűtípusok: "assets/src/fonts/**/*.*", nézd: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/* * /*.*" ), tiszta: "./assets/build/*" ); /* szerverbeállítások */ var config = ( szerver: ( baseDir: "./assets/build" ), notify: false ); /* connect gulp and plugins */ var gulp = request("gulp"), // connect Gulp webserver = request("browser-sync"), // szerver az oldalak működéséhez és automatikus frissítéséhez plumber = request("gulp-plumber" "), // modul a hibák nyomon követéséhez rigger = request("gulp-rigger"), // modul egyik fájl tartalmának másikba importálásához sourcemaps = request("gulp-sourcemaps"), // modul egy térkép létrehozásához sass forrásfájlok = request("gulp-sass"), // modul a SASS (SCSS) CSS-be fordításához autoprefixer = request("gulp-autoprefixer"), // modul az automatikus előtagok automatikus beállításához cleanCSS = request("gulp- clean-css" ), // bővítmény a CSS kicsinyítéséhez uglify = request("gulp-uglify"), // modul a JavaScript gyorsítótár minimalizálásához = request("gulp-cache"), // modul a gyorsítótárazáshoz imagemin = request(" gulp-imagemin" ), // plugin PNG, JPEG, GIF és SVG képek tömörítéséhez jpegrecompress = request("imagemin-jpeg-recompress"), // plugin jpeg tömörítéshez pngquant = request("imagemin-pngquant"), / / tömörítési bővítmény png rimraf = request("gulp-rimraf"), // fájlok és könyvtárak törlésére szolgáló bővítmény rename = request("gulp-rename"); /* feladatok */ // a szerver indítása gulp.task("webszerver", függvény () ( webszerver(config; )); // html összegyűjtése gulp.task("html:build", function ()) ( return gulp.src(path.src.html) // az összes html fájl kiválasztása a megadott útvonalon.pipe(plumber()) // követési hibák . pipe(rigger()) // a attachments.pipe(gulp.dest(path.build.html)) importálása // kész fájlok feltöltése.pipe(webserver.reload(( stream: true ))); // a szerver újraindítása )) ; // stílusok gyűjtése gulp.task("css:build", function () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // for error tracking.pipe( sourcemaps.init()) // forrástérkép inicializálása .pipe(sass()) // scss -> css .pipe(autoprefixer()) // előtagok hozzáadása.pipe(gulp.dest(path.build.css)) .pipe (rename(( utótag: ".min" ))) .pipe(cleanCSS()) // a CSS kicsinyítése .pipe(sourcemaps.write(). /")) // forrástérkép írása .pipe(gulp.dest(path.build.css)) // feltöltés a buildbe .pipe(webserver.reload(( stream: true ))); // a szerver újraindítása )); / / js összegyűjtése gulp.task("js:build", function () ( return gulp.src(path.src.js) // kapja meg a main.js fájlt .pipe(plumber()) // a hibakövetéshez. pipe( rigger()) // importálja az összes megadott fájlt a main.js fájlba .pipe(gulp.dest(path.build.js)) .pipe(rename(( utótag: ".min" ))) .pipe(sourcemaps. init( )) //forrástérkép inicializálása .pipe(uglify()) //js kicsinyítése .pipe(sourcemaps.write("./")) //forrástérkép írása .pipe(gulp.dest(path.build.js)) // tedd be a kész file.pipe(webserver.reload(( stream: true ))); // indítsd újra a szervert )); // betűtípusok átvitele gulp.task("fonts:build", function () ( return gulp. src(path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // képek feldolgozása gulp.task("image:build", function () ( return gulp.src(útvonal .src.img ) // elérési út a kép forrásaival.pipe(cache(imagemin([ // képtömörítés imagemin.gifsicle(( váltott soros: true )), jpegrecompress(( progresszív: igaz, max: 90, min: 80 )) , pngquant() , imagemin.svgo(( bővítmények: [( RemoveViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // kész fájlok feltöltése )); // a build könyvtár törlése gulp.task("clean:build", function () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // a gyorsítótár törlése gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", " image:build"))); // feladatok futtatása, amikor a fájlok megváltoznak gulp.task("watch", function () ( gulp.watch(path.watch.html, gulp.series("html:build")); gulp.watch(path.watch.css , gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series(" image:build")); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); )); // alapértelmezett feladat gulp.task("default", gulp.series("build", gulp.parallel("webszerver","watch")));

A „gulpfile.js” fájl kódja megjegyzéseket tartalmaz. Segítségükkel elmagyarázzák, hogy ez vagy az utasításrészlet mit hajt végre.

A Gulpban feladat létrehozása nagyon egyszerű:

// gulp feladat létrehozása (nametask a feladat neve) gulp.task("nametask", function() ( // műveletek, amelyeket a feladatnak végre kell hajtania... ));

A kortyolt feladatok nagyon egyszerűen épülnek fel. A legtöbb esetben cselekvési keretük a következőképpen ábrázolható:

• adatok beszerzése a forrásfájlokból;
• feldolgozza a forrásadatokat gulp beépülő modulok segítségével;
• mentse az eredményt (fájlokat) a "build" könyvtárba.

Ha Gulp 3-at használ, akkor a „gulpfile.js” fájl tartalmának a következőnek kell lennie:

"szigorúan használd"; /* a gulp-autoprefixer paraméterei */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >=" 9", "Android >= 4.4", "Opera >= 30" ]; /* elérési útvonalak a forrásfájlokhoz (src), a kész fájlokhoz (build), valamint azokhoz, amelyek változásait figyelni kell (figyelni) */ var path = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/", src: ( html: "assets /src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", betűtípusok: "assets/src/fonts/**/*.*", nézd: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/* * /*.*" ), tiszta: "./assets/build/*" ); /* szerverbeállítások */ var config = ( szerver: ( baseDir: "./assets/build" ), notify: false ); /* connect gulp and plugins */ var gulp = request("gulp"), // connect Gulp webserver = request("browser-sync"), // szerver az oldalak működéséhez és automatikus frissítéséhez plumber = request("gulp-plumber" "), // modul a hibák nyomon követéséhez rigger = request("gulp-rigger"), // modul egyik fájl tartalmának másikba importálásához sourcemaps = request("gulp-sourcemaps"), // modul egy térkép létrehozásához sass forrásfájlok = request("gulp-sass"), // modul a SASS (SCSS) CSS-be fordításához autoprefixer = request("gulp-autoprefixer"), // modul az automatikus előtagok automatikus beállításához cleanCSS = request("gulp- clean-css" ), // bővítmény a CSS kicsinyítéséhez uglify = request("gulp-uglify"), // modul a JavaScript gyorsítótár minimalizálásához = request("gulp-cache"), // modul a gyorsítótárazáshoz imagemin = request(" gulp-imagemin" ), // plugin PNG, JPEG, GIF és SVG képek tömörítéséhez jpegrecompress = request("imagemin-jpeg-recompress"), // plugin jpeg tömörítéshez pngquant = request("imagemin-pngquant"), / / tömörítési bővítmény png rimraf = request("gulp-rimraf"), // fájlok és könyvtárak törlésére szolgáló bővítmény rename = request("gulp-rename"); /* feladatok */ // a szerver indítása gulp.task("webszerver", függvény () ( webszerver(config; )); // html összegyűjtése gulp.task("html:build", function ()) ( return gulp.src(path.src.html) // az összes html fájl kiválasztása a megadott útvonalon.pipe(plumber()) // követési hibák . pipe(rigger()) // a attachments.pipe(gulp.dest(path.build.html)) importálása // kész fájlok feltöltése.pipe(webserver.reload(( stream: true ))); // a szerver újraindítása )) ; // stílusok gyűjtése gulp.task("css:build", function () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // for error tracking.pipe( sourcemaps.init()) // forrástérkép inicializálása .pipe(sass()) // scss -> css .pipe(autoprefixer(( // előtagok hozzáadása böngészők: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(rename(( utótag: ".min" ))) .pipe(cleanCSS()) // a CSS kicsinyítése .pipe(sourcemaps.write(). /")) // forrástérkép írása .pipe(gulp.dest(path.build.css)) // feltöltés a buildbe .pipe(webserver.reload(( stream: true ))); // a szerver újraindítása )); / / js összegyűjtése gulp.task("js:build", function () ( return gulp.src(path.src.js) // kapja meg a main.js fájlt .pipe(plumber()) // a hibakövetéshez. pipe( rigger()) // importálja az összes megadott fájlt a main.js fájlba .pipe(gulp.dest(path.build.js)) .pipe(rename(( utótag: ".min" ))) .pipe(sourcemaps. init( )) //forrástérkép inicializálása .pipe(uglify()) //js kicsinyítése .pipe(sourcemaps.write("./")) //forrástérkép írása .pipe(gulp.dest(path.build.js)) // tedd be a kész file.pipe(webserver.reload(( stream: true ))); // indítsd újra a szervert )); // betűtípusok átvitele gulp.task("fonts:build", function () ( return gulp. src(path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // képek feldolgozása gulp.task("image:build", function () ( return gulp.src(útvonal .src.img ) // elérési út a kép forrásaival.pipe(cache(imagemin([ // képtömörítés imagemin.gifsicle(( váltott soros: true )), jpegrecompress(( progresszív: igaz, max: 90, min: 80 )) , pngquant() , imagemin.svgo(( bővítmények: [( RemoveViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // kész fájlok feltöltése )); // a build könyvtár törlése gulp.task("clean:build", function () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // a gyorsítótár törlése gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // feladatok futtatása, amikor a fájlok megváltoznak gulp.task("watch", function () ( gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, [" css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(path .watch.fonts, ["fonts:build"]); )); // alapértelmezett feladat gulp.task("default", [ "build", "webserver", "watch" ]);

Többet szeretne szerezni a Google Page Speed ​​segítségével? Nem tudja, mi az a „front-end szerelvény”? Akkor érdekes lesz eljönni ide.

Mi az a Node.JS?

A Node.JS-t általában „Northern JavaScript”-nek hívják. Ez a platform lehetővé teszi programok írását JavaScript szintaxis használatával.

Vannak megvalósítások Windows, Mac OS és Linux számára.

Csomagkezelő tartalmazza NPM, amellyel csomagokat telepíthet.

Mi az a Gulp?

A Gulp egy Node.JS-ben írt csomag, amely segít a webmestereknek projektek felépítésében az elrendezési szakaszban.

A Gulp telepítéséhez a parancssort kell használnia.

Npm install gulp

A cikk végén található egy fájl, amely segít összeállítani egy szabványos projektet.

Ebben a példában a következőket fogjuk tenni a Gulp használatával:

• Automatikusan optimalizálja a képeket az internethez;
• Az előfeldolgozóktól (SASS, SCSS) gyűjtünk egy minifikált stílusfájlt;
• Összegyűjtünk egy kisméretű fájlt szkriptekkel.

Hogyan építsünk front-endet a Gulp segítségével?

Hogy megértsük, hogyan működik minden, nézzük meg lépésről lépésre.

A szerkezet a képernyőképen látható.

• Az eszközök mappa a képek, stílusok és szkriptek forrásaira szolgál;
• Nyilvános mappa - a projekt felépítésének eredménye benne lesz;
• gulpfile.js - a gyűjtő logikáját leíró fájl;
• A package.json egy fájl, amely információkat tartalmaz a Gulp megfelelő működéséhez használt programokról és beépülő modulokról.

package.json

Fájl tartalma:

( "név": "gulp_project", "verzió": "1.0.0", "leírás": "Példa", "fő": "gulpfile.js", "scripts": ( "teszt": "visszhang\" Hiba: nincs megadva teszt\" && kilépés 1"), "szerző": "Dmitriy Ilichev", "licenc": "ISC", "devDependencies": ( "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" ) )

Ebből a fájlból a következő egyértelmű:

• Projekt neve gulp_project, verzió és leírás;
• A fő fájl a gulpfile.js;
• A projekt szerzője, a licenc - mindez nem olyan fontos, és ezek a mezők egyszerűen üresek lehetnek;
• Érdekes pont a devDependencies. Leírja a függőségeket.

A fájl normál szövegszerkesztőben szerkeszthető. Új projekthez is létrehozható az npm int paranccsal.

Ennek alapján a Node.JS megérti, hogy a működéshez szükségünk lesz:

• Gulp 3.9.0 és újabb verzió összeszereléshez;
• Gulp-csso 1.0.0 és újabb verzió - plugin stílusok kicsinyítéséhez (css);
• A Gulp-concat 2.6.0 és újabb verziója több fájl egyesítésére szolgáló beépülő modul;
• Gulp-uglify 1.2.0 és újabb verzió - plugin a javascript kicsinyítéséhez;
• Gulp-imagemin 2.3.0 és újabb verzió - képoptimalizáló bővítmény;
• A Gulp-sass 2.1.1-es és újabb verziói egy beépülő modul a css lekéréséhez a sass-ból (scss).

Nagy! Ezt követően telepítenie kell mindezt. Ez a parancssorból történik. A projekt mappájában futtassa a következő parancsot:

Npm telepítés

Minden szükséges információ a package.json fájlból származik.

Ennyi varázslat után megjelenik a node_modules szolgáltatásmappa.

gulpfile.js

Fájl tartalma:

/* * * Változók meghatározása * */ var gulp = request("gulp"), // Valójában Gulp JS uglify = request("gulp-uglify"), // JS kicsinyítés concat = request("gulp-concat"), // Fájlok ragasztása imagemin = request("gulp-imagemin"), // Képek kicsinyítése csso = request("gulp-csso"), // CSS kicsinyítése sass = request("gulp-sass"); // SASS (SCSS) konvertálása CSS-be /* * * Feladatok (feladatok) létrehozása * */ // "sass" feladat. A "gulp sass" paranccsal elindítva gulp.task("sass", függvény () ( gulp.src("./assets/styles/style.scss") // feldolgozandó fájl.pipe(sass().on ("hiba", sass.logError)) // konvertálja a sass-t css-be .pipe(csso()) // az előző lépésben kapott css minimalizálása.pipe(gulp.dest("./public/css/")) // Az eredményt a megadott címre írjuk)); // "js" feladat. Futtatás a "gulp js" paranccsal gulp.task("js", function() ( gulp.src([ "./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/ bootstrap. min.js", "./assets/javascripts/script.js" ]) // feldolgozott fájlok.pipe(concat("min.js")) // az összes JS összevonása .pipe(uglify()) // az eredményül kapott "footcloth" kicsinyítése.pipe(gulp.dest(./public/js/")) // az eredményt a megadott címre írd )); // Feladat "képek". Futtatás a "gulp images" paranccsal gulp.task("images", function() ( gulp.src(.assets/images/**/*") // a mappában és annak almappáiban lévő fájlok felvétele.pipe( imagemin() ) // képek optimalizálása a webhez.pipe(gulp.dest(./public/images/")) // az eredmény írása a megadott címre )); // Feladat "figyelni". A "gulp watch" paranccsal elindítva // Figyeli a fájlváltozásokat és automatikusan elindítja az egyéb feladatokat gulp.task("watch", function () ( // A "styles" mappában és almappákban lévő *.scss fájlok módosításakor indítsa el a sass gulp task. watch("./assets/styles/**/*.scss", ["sass"]); // A *.js fájlok módosításakor a "javascripts" mappában és az almappákban futtassa a js task gulp parancsot .watch("./assets/ javascripts/**/*.js", ["js"]); // Az "images" mappában és az almappákban lévő fájlok módosításakor futtassa a gulp.watch() képfeladatot. /assets/images/**/*", ["képek"]); ));

A fő trükk a feladatban van néz. Miután egyszer elindította, könnyen dolgozhat a forrásokkal, és a projekt automatikusan összeáll minden alkalommal, amikor elmenti a szerkesztett fájlokat.

Ennek eredményeként kapunk egy sablont, amely készen áll az interneten való közzétételre.

A feladatok külön-külön is futtathatók. Ennek eredményeként a cikk végén található archívumban a következőket találja:

! jegyzet A helyzet az, hogy az archívum kicsomagolása után először le kell futtatnia az npm install parancsot. Ez a mappa meglehetősen sok fájlt tartalmaz, és ezek minden alkalommal történő másolása/beillesztése időpocsékolás.

Őrizetben

Rengeteg más hasznos bővítmény található. Például a kiváló Jade sablonmotor, ami nagyban felgyorsítja a html kód írását, lehet, hogy valakinek KEVESEBB kell, stb.

A bemutatott példa csak egy platform és egy sablon, amelyből gyorsan és speciális ismeretek nélkül elkezdheti használni ezeket a csodálatos funkciókat.

Gentleman's kit front-end fejlesztőknek

Nem titok, hogy egy modern front-end fejlesztőnek a tarsolyában kell lennie valamelyik projekt-összeszerelő eszköznek, mint pl. Korty vagy Röfög. Egy ideig a Grunt monopólium volt ebben a kérdésben, de a Grunttól elszakadt fejlesztők egy csoportja úgy döntött, hogy létrehozza saját könnyű és gyors feladatkezelőjét, a Gulp-ot.

Ebben a cikkben egy kezdő csomagot készítünk a semmiből a jövőbeli projektekben való használatra.

Milyen technológiákat használunk?

• Szoftver platform: Node.js
• CSS előfeldolgozó: Stylus
• Feladatkezelő: Korty

Miért van szüksége egy frontendernek feladatkezelőre?

Egészen a közelmúltig magam is azon töprengtem, hogy miért kell időt szánnom a feladatkezelő konfigurációjának beállítására, ha már jó munkát végeztem az elrendezési elrendezésekkel, egészen addig, amíg el nem kezdtem a CSS-előprocesszorokat használni.

A CSS előprocesszorok valóban kényelmesek és felgyorsítják a stílusok írását, de az előprocesszorra írt kód normál CSS-be fordítása nem teljesen triviális, egy gombbal megoldható feladat. Itt jön a segítségünkre a feladatkezelő. A kódkonverzió nem csak egy gombnyomással megy végbe, minden online történik az Ön részvétele nélkül (persze, ha mindent jól konfigurál).

Természetesen a feladatkezelő feladatai messze túlmutatnak a processzor előtti kód tiszta CSS-vé konvertálásával kapcsolatos folyamatokon. A projektkészítő foglalkozik kicsinyítéssel, összefűzéssel, hibakód-ellenőrzéssel, képek sprite-okba állításával, képek webre optimalizálásával stb. Egyszerűen létrehozhat sok logikailag elválasztott fájlt a projektben, amelyeket azután kényelmesen összegyűjtenek egy könyvtárba, már feldolgozva és használatra készen a böngészőben. De erről kicsit később, de most kezdjük a felkészüléssel.

A Node.js telepítése

Ha tudja, hogyan kell a node.js fájlt telepíteni a rendszerére, és használja is, nyugodtan továbbléphet a következő címre.

Azonnal szeretném figyelmeztetni, hogy az összes leírt művelet releváns a számára Mac OS X, de általában alkalmazható másokra Unix rendszerek Fejlesztés feladatkezelőn és parancssoron keresztül ablakok valamivel nehezebb, és nem lesz itt leírva. Ha azonban továbbra is Windowst használ, és nem áll készen arra, hogy lemondjon róla, akkor javasolhatom a telepített virtuális gép használatát. Ubuntu, ezt a lehetőséget az otthoni rendszeremen használom, ami általában meglehetősen kényelmes.

Tehát először is le kell töltenünk és telepítenünk kell a node.js csomagot a rendszerünkre, hogy a konzolon keresztül működhessünk a csomóponttal. Látogasson el a hivatalos node.js webhelyre, és töltse le a legújabb stabil verziót a rendszeréhez. A telepítés után a node parancsnak elérhetőnek kell lennie a parancssorban. A csomópont futásának ellenőrzéséhez írja be a parancsot a parancssorba

a válasznak a telepített node.js verzióját kell mutatnia. Ha minden rendben megy tovább.

Projekt könyvtár szerkezete

Projektjeinkben a struktúra egységes változatát fogjuk használni:

Fejleszteni - fejlesztési gyökérkönyvtár└─kezdeni - projektkönyvtár├─építeni - a feladatkezelő által összeállított build├─forrás - a fejlesztéshez szükséges összes forrásfájl (.psd stb.)├─src - fejlesztési könyvtár│├─css - stílusfejlesztési könyvtár││├─képek - minden statikus kép││├─sprites - sprite-ba gyűjtött kép││├─részleges - egyedi stílusú fájlok│││├─mixins.styl - egyedi mixinek│││└─styles.styl - egyedi stílusok││├─szállító - egyéb külső stílusfájlok││└─styles.styl - fő stílusfájl│├─betűtípusok - font könyvtár│├─kép - dinamikus képek katalógusa│├─js - JavaScript fejlesztési könyvtár││├─_*.js - oldalsó js fájlok││├─_main.js - alapvető egyéni js││└─main.js - fő js fájl│├─.htaccess - konfiguráció a szerverhez│├─*.html - oldalelrendezés fájlok│├─pages.html - egy fájl a sablon összes oldalára mutató hivatkozásokkal│├─index.html - oldalelrendezési indexfájl│└─tartalmazza - a mellékelt jelölőfájlok könyvtára│ └─*.html - tartalmazza a jelölőfájlokat (header.html stb.)├─package.json - npm csomagkezelő konfig├─gulpfile.js - Gulp konfig├─stylus.template.bajusz - maszk sprite olvasásához├─TEENDŐ - todo lap└─.gitignore - Git konfigurációja

Telepítés

A konzolban a cd paranccsal lépjen a gyökérfejlesztési könyvtárba, hozzon létre egy könyvtárat az mkdir start projektünkhöz, és lépjen oda.

Telepítsük a projekt struktúráját a konzolon keresztül:

mkdir build erőforrás src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts

Hozzuk létre a kezdeti fájlokat a projekt szerkezetében:

érintse meg a gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js elemet src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Hozzuk létre a package.json fájlt

Minden felugró kérdésre rákattinthat az Enter billentyűvel, a node alapértékre állítja azokat, vagy kitöltheti a javasolt mezőket.

.gitignore

Megmondjuk a Gitnek, hogy mely könyvtárakat hagyja figyelmen kívül, és ne töltse fel a tárolóba:

/node_modules/ /build/ /erőforrás/

A node_modules könyvtár később jelenik meg a bővítmények telepítése után, és tartalmazza a projekt összes csomópont-bővítményét.

src/.htaccess

További gzip tömörítést és gyorsítótárazást telepítünk a szerverhez:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Kiszolgálja a gzip tömörített CSS fájlokat, ha léteznek # és a kliens elfogadja a gzip-et. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Tömörített gzip szolgáltatás JS fájlok, ha léteznek # és a kliens elfogadja a gzip-et. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Megfelelő tartalom kiszolgálása típusokat, és megakadályozza a mod_deflate dupla gzip-et. RewriteRule "\.css\.gz$" "-" RewriteRule "\.js\.gz$" "-" # Megfelelő kódolási típust szolgáltasson. Fejléc hozzáfűzése Tartalomkódolás gzip # Kényszeríti a proxykat a gzip és # nem gzip css/js fájlok gyorsítótárazására. A fejléc hozzáfűzése Vary Accept-Encoding ExpiresActive on ExpiresByType alkalmazás/javascript "hozzáférés plusz 1 hónap" ExpiresByType image/jpg "hozzáférés plusz 1 hónap" ExpiresByType image/jpeg "hozzáférés plusz 1 hónap" ExpiresByType image/gif "access plus 1 months" Expires/ plus1hónap hónap" ExpiresByType text/css "hozzáférés plusz 1 hónap"

src/css/styles.styl

Vegyen fel egyéni stílusfájlokat a fő stílusfájlba:

@import "részleges/stílusok"

Kérjük, vegye figyelembe, hogy a connection.styl fájlok esetében a kiterjesztés nincs megadva, a Stylus előfeldolgozó kód szemantikája szerint. Ha stílusokat szeretne belefoglalni egy másik kiterjesztésbe, például a .css-be, az utóbbi szükséges.

CSINÁLNI

Ez az oldal egy fejlesztési teendőt tartalmaz. A fájllal való munkavégzésről a Sublime Text PlainTasks beépülő modul oldalán olvashat bővebben.

Ezzel befejeződik a szerkezet telepítése.

Beépülő modulok telepítése az npm csomagkezelő segítségével

A Node.js alapértelmezés szerint tartalmazza az npm csomagkezelőt, amelynek lerakatai számos bővítményt tartalmaznak, amelyekkel dolgozni fogunk.

A Gulp plugin telepítése

Először telepítenünk kell a Gulp-ot globálisan (a -g kapcsolóval) a rendszerünkre

npm install gulp -g

Ezt csak egyszer kell megtennie, további globális telepítés nem szükséges.

Most telepítenie kell a Gulp-ot helyileg a projektkönyvtárába

npm install gulp --save-dev

A --save-dev kapcsoló azt jelenti, hogy a beépülő modulra vonatkozó információk (név a lerakatban és verziója) hozzáadódnak a package.json konfigurációhoz, és megjegyzik azt a projektben. Mivel a Gitben nem tárolunk nehéz mappákat node_modules beépülő modulokkal, a telepített bővítményekről a konfigurációban mentett információk lehetővé teszik, hogy egyetlen npm i paranccsal telepítse az összes szükséges beépülő modult a projektben.

Minden parancshoz vannak rövidítések, így a fenti parancsot rövidebb formátumban is megírhatjuk

A jövőben a rövidített parancsformátumot is használjuk.

Stylus plugin a Gulphoz

Projektjeinkben a Stylus előprocesszort használjuk, ami remekül működik és a csomóponton fordít.

Telepítés:

npm i gulp-stylus -D

CSS feldolgozó bővítmények

Autoprefixer- automatikusan beszúrja az -ms- -o- -moz- -webkit- előtagokat a kívánt tulajdonságok közé:

npm i gulp-autoprefixer -D

CSS kicsinyítés- a beépülő modul kicsinyíti a kimeneti CSS-fájlt, kiküszöbölve a felesleges szóközöket és tabulátorokat:

npm i gulp-minify-css -D

Képfeldolgozó bővítmények

Képek egyesítése sprite-okká- Többé nem kell órákat töltenie azzal, hogy az összes képet sprite-ekké kombinálja, majd kiszámolja azok koordinátáit, ez a bővítmény mindezt automatikusan elvégzi Ön helyett:

npm i gulp.spritesmith -D

Adjunk hozzá egy maszkot a sprite pozíciók kiszámításához a korábban létrehozott stylus.template.mustache fájlhoz:

((#elemek)) $((név)) = ((px.x)) ((px.y)) ((px.eltolás_x)) ((px.eltolás_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "((((megszökött_kép)))"; ((/elemek))

Adjunk hozzá speciális mixineket a mixins.styl-hez:

SpriteWidth($sprite) szélesség $sprite spriteHeight($sprite) magasság $sprite spritePosition($sprite) background-position $sprite $sprite spriteImage($sprite) background-image url($sprite) sprite($sprite) if !match( "hover", selector()) && !match("active", selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Csatlakoztassuk a mixineket és a generált koordinátákkal ellátott fájlt az src/css/styles.styl fő stílusfájlhoz:

@import "partial/sprite" @import "partial/mixins"

Kérjük, vegye figyelembe, hogy a sprite fájlokat a felhasználói stílusok @import "partial/styles" előtt kell tartalmaznia.

Képek optimalizálása az internethez- a beépülő modul automatikusan kivág minden felesleges információt a képekből, és az optimális méretre tömöríti őket, ami bizonyos esetekben lehetővé teszi a képek hangerejének akár 90%-os csökkentését:

npm i gulp-imagemin -D

JavaScript feldolgozó bővítmények

JS kicsinyítés- a bővítmény a lehető legkisebbre csökkenti a JS-kódot, csökkentve a betöltési idejét:

npm i gulp-uglify -D

JS hibakövetés- a beépülő modul alaposan ellenőrzi a JS-kódot, hogy azonosítsa az összes következetlenséget, és megjelenítse azokat a konzolon:

npm i jshint gulp-jshint -D

HTML feldolgozó bővítmények

Tartalmazott fájlok- a beépülő modul lehetővé teszi, hogy a webhely statikus részeit, például fejlécet, láblécet, félretételt, külön fájlokban tárolja, és összekapcsolja egy másik fájl bármely részében. Kisebb fejléc-módosítások esetén már nincs szükség a sablon több tucat, de akár több száz html oldalának megváltoztatására:

npm i gulp-rigger -D

A bővítmény a JS-vel is kompatibilis.

Csatlakoztassuk az egyéni JS-t az src/js/main.js fő JS-fájlhoz a következő felépítéssel:

//= _main.js

Tegyük bele a header.html és footer.html fájlokat az index.html-be

//= include/header.html//= include/footer.html

Egyéb bővítmények

LiveReload- a beépülő modul kiküszöböli az oldal minden alkalommal történő újratöltését a böngészőben a változások megtekintéséhez, most ez automatikusan megtörténik a módosított fájl mentésekor:

npm i gulp-connect -D

A Gulp összeomlásának megakadályozása- néha előfordul, hogy a Gulp lefagyhat az óra módból, ha kritikus hibák lépnek fel (főleg JS miatt). Ez a beépülő modul megpróbálja futni a Gulp folyamatokat, amikor csak lehetséges:

npm i gulp-vízvezeték-szerelő -D

Fájlok átnevezése- a leggyakoribb munka a fájlnevekkel. A beépülő modul lehetővé teszi a fájlok teljes átnevezését, a kiterjesztés módosítását, elő- és utótagok hozzáadását, például a style.styl-hoz hasonló fájlokat style.min.css-re konvertálhat:

npm i gulp-rename -D

Tisztító- Néha teljesen ki kell törölni a build könyvtárat, itt egy plugin jön a segítségünkre:

Forrástérkép- Annak érdekében, hogy a fájlok a kicsinyítés után is olvashatóak maradjanak a böngésző hibakeresése során, hozzá kell adnia egy forrástérképet a kicsinyített fájlokhoz:

npm i gulp-sourcemaps -D

Fejlett órafunkciók- a beépülő modul okossá teszi a Watch-ot, most már nem írja felül az összes fájlt a buildben, ha csak egy fájlt módosítunk, hanem az adott módosított fájlt felülírja, ami időt és erőforrásokat takarít meg:

npm i nyelgőóra -D

Nézzük a package.json fájlt

Az összes beépülő modul telepítése után nézzük meg a package.json fájlt. Valahogy így kell kinéznie:

( "név": "start", "verzió": "1.0.0", "leírás": "Kezdőcsomag a front-end fejlesztéshez", "szerző": "Ivan Ivanov", "licenc": "MIT", "dependencies": (), "devDependencies": ( "gulp": "legújabb", "gulp-autoprefixer": "legújabb", "gulp-connect": "legújabb", "gulp-imagemin": "legújabb", "jshint": "legújabb", "jshint-stylish": "legújabb", "gulp-jshint": "legújabb", "gulp-minify-css": "legújabb", "gulp-plumber": "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.spritesmith": "legújabb", "rimraf": "legújabb") )

A legújabb helyett az Ön esetében a telepített bővítmények konkrét verziói kerülnek megadásra. Mert Készítjük induló csomagunkat, amelyet sok projektben használni fogunk, emellett javasolt a verzióértékeket a legújabbra cserélni, hogy mindig a legfrissebb plugin-verziókat telepítsük a projektbe.

A node_modules könyvtárnak is meg kell jelennie a projekt mappájában, amely az összes csomópont-bővítmény fájlt tárolja. Az összes szükséges bővítmény telepítve van, folytathatja a Gulp konfigurációs beállításait.

A gulpfile.js beállítása

gulpfile.js- ez a feladatkezelőnk fő konfigurációs fájlja, itt tároljuk az összes beállítást és parancsot.

Minden Gulp-munka a feladathoz vezet ( angol feladat). A feladat egy különálló független függvény névvel. Minden feladat külön-külön is meghívható.

Kompatibilitási mód a modern szabványokkal

Először is, a fájl elején engedélyezzük a kompatibilitási módot csak a modern szabványoknak megfelelően:

"szigorúan használd";

Erről az irányelvről többet megtudhat.

A bővítmény inicializálása

A beépülő modulok inicializálása a következő konstrukcióval történik:

var initPlugin = request("bővítménynév");

Ennek a kialakításnak megfelelően inicializáljuk az összes bővítményünket:

Var gulp = request("gulp"), //main gulp plugin stylus = request("gulp-stylus"), //előfeldolgozó stylus prefixer = request("gulp-autoprefixer"), //autoprefixek elrendezése cssmin = request( " gulp-minify-css"), //css minifikáció uglify = request("gulp-uglify"), //js minifikáció jshint = request("gulp-jshint"), //js hibakövetés rigger = request("gulp" -rigger"), //munka a következővel: tartalmazza a html-ben és js-ben imagemin = request("gulp-imagemin"), //képek minimalizálása spritesmith = request("gulp.spritesmith"), //képek egyesítése sprite-okba rimraf = request( "rimraf"), //cleaning sourcemaps = request("gulp-sourcemaps"), //sourcemaps rename = request("gulp-rename"), //fájlok átnevezése plumber = request("gulp-plumber"), // fuse to stop gulp watch = request("gulp-watch"), //bővíthető képességek watch connect = request("gulp-connect"); //livereload

Útkonstansok

A kényelem kedvéért azonnal határozzuk meg az összes útvonalat és maszkot:

Var path = ( build: ( //Itt jelezzük, hogy a fájlok összeállítás után hova kerüljenek html: "build/", js: "build/js/", css: "build/css/", img: "build/ css/ images/", betűtípusok: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css/partial /" ), src: ( //A források elérési útjai html: "src/template/*.html", //Az src/template/*.html szintaxis azt mondja a gulp-nak, hogy az összes fájlt el akarjuk vinni a kiterjesztése .html js: "src/ js/[^_]*.js",//A stílusokban és szkriptekben csak a fő fájlokra van szükségünk jshint: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //Ha a könyvtár fájljait külön szeretnénk tárolni, akkor törölje a megjegyzéseket az img sorból: "src/css/images/**/*.*", //Syntax img/**/*.* azt jelenti - az összes fájl kiterjesztése a mappából és az alkönyvtárakból fontok: "src/fonts/**/*.*", contentImg: "src/img/**/ *.*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), watch: ( //Itt jelezzük, hogy mely fájlok változásait szeretnénk figyelni html: "src/ template/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/* */*.*", contentImg: "src/ img/**/*.*", betűtípusok: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src /css/sprites/*.png" ), clean : "./build", //takarítható könyvtárak outputDir: "./build" //kezdeti gyökérkönyvtár a miniszerver indításához );

Felhívjuk figyelmét, hogy használhatunk névmaszkokat:

• *.js- minden js kiterjesztésű fájl
• [^_]*.js- minden js kiterjesztésű fájl, kivéve azokat, amelyek aláhúzással kezdődnek
• *.* - bármilyen kiterjesztésű fájl az aktuális könyvtárban
• /**/*.html- minden .html kiterjesztésű fájl az aktuális könyvtárban és az összes gyermekkönyvtárban

Feladat

Most, hogy az összes konstans meg van írva, elkezdheti a feladatok írását. Minden feladat a következő szerkezettel rendelkezik:

Gulp.task("feladatnév", function())( //egyes függvények ));

Mini-szerver és LiveReload

Először is konfiguráljuk a helyi szervert és a LiveReload-ot:

// Helyi kiszolgáló a fejlesztéshez gulp.task("connect", function())( connect.server(( //szerver beállításainak beállítása root: , //gyökérkönyvtár a szerver port futtatásához: 9999, //melyik portot mi használja a livereload: true //inicializálja a LiveReload munkáját )); ));

Valószínűleg gyakran több projekten kell dolgoznia egyszerre. A szerver lehetővé teszi több szerver egyidejű futtatását, csak regisztrálnia kell a saját portját a különböző projektekhez.

HTML készítés

// feladat a html felépítéséhez gulp.task("html:build", function () ( gulp.src(path.src.html)) // Válassza ki a fájlokat a kívánt útvonal mentén.pipe(rigger()) // Futtassa végig rigger . pipe(gulp.dest(path.build.html)) //töltsd fel őket a build mappába .pipe(connect.reload()) //És indítsd újra a szerverünket a frissítésekért ));

Build JS

// ellenőrizze a js-ben a hibákat, és adja ki azokat a konzolba gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //válasszon fájlokat a kívánt útvonalon.pipe(jshint( )) //futtassa a jshint-en keresztül: .pipe(jshint.reporter("jshint-stylish")); //stílushiba kimenete a konzolra )); // JavaScript épület gulp.task("js:build", function () ( gulp.src(path.src.js) // Fő fájlunk keresése.pipe(rigger()) // Futtassa a rigger .pipe( sourcemaps .init()) //Sourcemap inicializálása .pipe(uglify()) //Js tömörítése .pipe(sourcemaps.write()) //Maps.pipe(rename((utótag: ".min"))) / /adja hozzá a.min utótagot a kimeneti fájlhoz.pipe(gulp.dest(path.build.js)) //töltse fel a kész fájlt a .pipe(connect.reload()) összeállításhoz //És indítsa újra a szervert )) ;

Sprite build

Az összes sprite-be egyesítendő kép az src/css/sprites/ könyvtárba kerül, és a Gulpon való futtatás után egyetlen sprite-képpé válnak. Ne helyezzen logókat és háttereket a sprite-be egyértelmű méretek nélkül.

// build sprites gulp.task("sprites:build", function () ( var spriteData = gulp.src(path.src.sprites) // válassza ki, hol kapja meg a képeket sprite.pipe(spritesmith(( imgName) : " sprite.png", //a sprite kép neve cssName: "sprite.styl", //a stílus neve, ahol a képek pozícióit tároljuk a sprite imgPath-ban: "images/sprite.png", / /útvonal, ahol a sprite cssFormat: "stylus", //formátum, amelyben a pozíciókat dolgozzuk fel cssTemplate: "stylus.template.mustache", //maszkfájl cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name //az egyes sprite neve a fájlnévből és az "s-" konstrukcióból áll majd a név elején ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites) ); // elérési út, ahová a képet mentjük spriteData.css.pipe(gulp.dest(útvonal .build.spritesCss)); // elérési út, ahová a stílusokat mentjük ));

Sprite megjelenítéséhez csak egy mixint használjon. Például a lorem.png fájl esetében a sprite kijelölése így fog kinézni:

Lorem sprite ($s-lorem)

Most a .lorem osztályú objektum a kép méreteit és magát a képet veszi háttérként.

Statikus képek létrehozása

A statikus képek az elrendezéssablonban használt képek.

// statikus képek létrehozása gulp.task("image:build", function () ( gulp.src(path.src.img) //Válassza ki az images.pipe(imagemin(( //Progresszív tömörítés: true, // compression.jpg svgoBővítmények: [(removeViewBox: false)], //compression.svg váltottsoros: igaz, //compression.gif optimalizálásLevel: 3 //tömörítési fok 0-tól 7-ig ))) .pipe(gulp.dest(path. build.img)) //feltöltés a buildbe .pipe(connect.reload()) //a szerver újraindítása ));

Készítsen dinamikus képeket

A dinamikus képek olyan tartalomképek, amelyek a webhelyen változnak, és sablonszinten csak bemutatás céljából szerepelnek. Ezek lehetnek például képek a hírekhez stb.

// dinamikus képek létrehozása gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Progresszív tömörítés: true, //compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg váltottsoros: igaz, //compression.gif optimalizálásLevel: 3 //tömörítési fok 0-tól 7-ig ))) .pipe(gulp.dest(path.build.contentImg)) //feltöltés a buildbe .pipe(connect.reload()) //a szerver újraindítása ));

CSS készítés

// egyéni css létrehozása gulp.task("cssOwn:build", function () ( gulp.src(path.src.css) //Válassza ki a fő stílusfájlunkat.pipe(sourcemaps.init()) //initialize soucemap . pipe(stylus(( tömörítés: igaz, "include css": true ))) //Stylus fordítása .pipe(prefixer(( böngésző: ["utolsó 3 verzió", "> 1%", "ie 8", "ie 7"] ))) //Szállítói előtagok hozzáadása.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //forrástérkép írása .pipe(rename((utótag: ".min"))) / /adja hozzá a.min utótagot a kimeneti fájl nevéhez.pipe(gulp.dest(path.build.css)) //upload to build .pipe(connect.reload()) //indítsa újra a szervert ));

Külön feladat a külső stílusokhoz:

// építési szállító css gulp.task("cssVendor:build", function () ( gulp.src(path.src.cssVendor) // Vegye ki a szállítói mappát: .pipe(sourcemaps.init()) //initialize soucemap .pipe ( cssmin()) //Compress.pipe(sourcemaps.write()) //forrástérkép írása .pipe(gulp.dest(path.build.css)) //feltöltés a buildbe .pipe(connect.reload()) / / indítsa újra a szervert));

Adjunk hozzá egy feladatot is az általános CSS felépítéséhez:

// a teljes css elkészítése gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

Ha a külső stílusokat az otthoni stílusoktól elkülönítve kell feldolgoznia, és külön fájlként kell feltöltenie, törölnie kell a „cssVendor:build” sort.

Betűtípus felépítése

// betűtípusok építése gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //feltöltés a buildbe ));

Build.htaccess

// build htaccess gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess).pipe(gulp.dest(path.build.htaccess)) //upload to build ));

Általános felépítés

Hogy ne kelljen minden részt külön megépíteni, írjunk egy feladatot az általános buildhez:

// build mindent gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:build", "image:build", "imagescontent:build" ]);

Az építmény takarítása

Néha teljesen ki kell törölnie a build könyvtárat. Itt a következő feladat lesz a segítségünkre:

// a build mappa tisztítása gulp.task("clean", function (cb) ( rimraf(path.clean, cb); ));

Nézze meg vagy kövesse nyomon a változásokat valós időben

A Gulp egyik legfontosabb és leghasznosabb funkciója a figyelő funkció, amely lehetővé teszi az előállított fájlok minden változásának valós időben történő nyomon követését, és ennek függvényében konkrét műveletek végrehajtását:

// watch gulp.task("watch", function())( //HTML létrehozása változás esetén watch(, function(event, cb) ( gulp.start("html:build"); )); // build sprites in case of change watch(, function(event, cb) ( gulp.start("sprites:build"); )); //kontextuális képek készítése change watch(, function(event, cb) ( gulp .start(" imagescontent:build"); )); //css összeállítása változás esetén watch(, function(event, cb) ( gulp.start("css:build"); )); //a js ellenőrzése case of change watch(, ["jshint"]); //js építése változás esetén watch(, function(event, cb) ( gulp.start("js:build"); )); //statikus képek építése in case of change watch(, function (event, cb) ( gulp.start("image:build"); )); //build fonts in case of change watch(, function(event, cb) ( gulp.start( "fonts:build"); )) ; //htaccess építése változás esetén watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));

Alapértelmezett műveletek

Az alapértelmezett műveletek azok a feladatok, amelyeket a feladatkezelő hajt végre, amikor beírja a gulp parancsot a konzolba:

// alapértelmezett műveletek gulp.task("default", ["build", "watch", "connect"]);

Esetünkben szokás szerint elkészítjük a projektünket, engedélyezzük a figyelési módot és elindítjuk a szervert.

Parancssori parancsok

A parancssorhoz tartozó összes gulp parancs két részből áll: magából a gulp parancsból és a feladat nevéből, szóközzel elválasztva. Itt található a konfigurációnkra vonatkozó parancsok listája:

• gulp - fő parancs, elindítja az alapértelmezett feladatot
• zabál épít – épít mindent
• gulp watch - launch watch
• gulp clean – megtisztítja a build könyvtárat
• gulp connect – indítsa el a szervert
• gulp html:build – HTML build
• gulp jshint:build - ellenőrizze a JS-t a hibákért
• gulp js:build – JS build
• gulp sprites:build - sprite build
• gulp image:build – statikus képeket készíthet
• gulp imagecontent:build – dinamikus képek létrehozása
• gulp cssOwn:build – egyéni CSS-felépítés
• gulp cssVendor:build – külső CSS létrehozása
• gulp css:build – általános CSS build
• gulp fonts:build - font build
• gulp htaccess:build - build.htaccess

Ezen a ponton a gulpfile.js konfigurálása befejeződött.

Másolja a kezdőcsomagot a projektbe

Először menjünk végig a konzolon abban a mappában, ahol fejlesztünk, például cd development/example és másoljunk át mindent a starter csomag könyvtárából a cp -a ~/develop/start/ projektünkbe. ~/fejlesztés/példa/

Ez a másolási mód a legkényelmesebb, mert... pontosan másol mindent, beleértve a rejtett fájlokat.gitignore stb.

Következtetés

Ezen útmutató alapján elkészítettünk egy kezdőcsomagot a Gulp használatához Front-end fejlesztési projektjeinkben.

Ez a csomag a GitHubon is elérhető

Utóirat

Ez a cikk nem végleges, és a változásoktól és fejlesztésektől függően frissülni fog.