pozdravujem. Ak sa podieľate na vývoji frontendu, možno ste si všimli, že často musíte vykonávať rovnaké úlohy. Bolo by skvelé toto všetko zautomatizovať a znížiť množstvo rutiny na minimum. Manažéri úloh a zostavovatelia projektov, ako napr Gulp a Grunt.

Gulp je vidličkou projektu Grunt. Od svojho rodiča prevzal osvedčené postupy. Kód inštrukcie je napísaný v JavaScripte. Funguje niekoľkonásobne rýchlejšie ako Grunt.

Gulp je skutočne mocný. Uľahčí a urýchli vývoj frontendu. Uvediem hlavné úlohy, ktoré vám pomôže vyriešiť zostavovateľ projektu.

• Vytvorenie webového servera na ladenie
• Automaticky znova načítať stránky po vykonaní zmien (LiveReload)
• Sledovanie zmien v projektových súboroch
• Použitie HTML, CSS, JS preprocesorov
• Kombinovanie súborov a ich miniifikácia
• Automatické vytváranie predpôn dodávateľov pre prehliadače (Autoprefixer)
• Automatizácia správy súborov a adresárov
• Spúšťanie a ovládanie príkazov externého operačného systému
• Spúšťanie a ovládanie aplikácií
• Optimalizácia obrázkov (kompresia, zmena veľkosti atď.)
• Nahranie projektu na externý server pomocou FTP, SFTP, Git atď.
• Pripojenie a používanie ďalších pluginov (dnes ich je už 3570; riešením môže byť
• nájsť pre takmer všetky každodenné rutinné úlohy a ďalšie)
• Automatizácia manuálnej práce

Inštalácia

Gulp vyžaduje na spustenie Node.js. Môžete si ho stiahnuť na oficiálnej webovej stránke. Odporúčam vám nainštalovať verziu LTS softvérovej platformy. Po nainštalovaní Node.js môžete pristúpiť k inštalácii Gulp. Ak to chcete urobiť, otvorte konzolu operačného systému a spustite nasledujúci príkaz:

Používame parameter -g, ktorý vám umožňuje inštalovať Gulp globálne na operačný systém bez toho, aby ste boli viazaní na konkrétny projekt.

Je dôležité, aby v ceste k inštalačnému adresáru neboli žiadne ruské znaky. To môže spôsobiť, že niektoré zásuvné moduly nebudú správne fungovať.

Dobre, je čas vytvoriť projekt, v ktorom budeme používať Gulp. Prejdite do adresára projektu a spustite príkaz:

Tým sa spustí skript, ktorý vám položí niekoľko otázok o projekte. Výsledkom bude nakonfigurovaný súbor pre npm package.json. Toto je manifest projektu. Obsahuje zoznam balíkov, ktoré sú v projekte použité a ďalšie informácie. V tejto fáze som zadal nasledujúce údaje, prispôsobte ich vášmu projektu.

názov: (bybtc-landing) verzia: (1.0.0) popis: Vstupná stránka pre vstupný bod byBTC: (index.js) testovací príkaz: git repozitár: https://github.com/Neuropassenger/bybtc-landing.git keywords : pristátie

Ak chcete preskočiť otázku, stačí stlačiť Enter. Použije sa predvolená hodnota. Teraz môžeme nainštalovať Gulp pre náš projekt. Spustite príkaz:

npm aj --save-dev hlt

Gulp sa nainštaluje do adresára projektu a parameter –save-dev pridá ho do závislosti package.json. To umožní inému vývojárovi, ktorý otvorí váš projekt, rýchlo ho nasadiť na svojom počítači (pomocou príkazu npm i).

Ak všetko prebehlo dobre, v priečinku projektu by sa mal objaviť adresár node_modules. Obsahuje nainštalovaný balík hlt a všetky závislosti potrebné na jeho fungovanie.

Je čas vytvoriť základnú štruktúru projektu. Držím sa rovnakých názvov adresárov ako mnoho vývojárov. Radím vám, aby ste to urobili tiež, aby iná osoba rýchlo pochopila štruktúru vášho projektu. Nikto vám však nezakazuje používať mená, ktoré chcete.

Vytvorte dva priečinky v koreňovom adresári projektu:

• /src/ – zdrojový kód projektu počas vývoja, tu budete upravovať súbory
• /dist/ – projektové súbory a priečinky po zložení, hotový výrobok

Katalóg /dist/ sa vyplní automaticky pri zostavovaní projektu. Poďme zatiaľ na to /src/. Vo vnútri vytvorte nasledujúce priečinky:

• /css/ – pre kaskádové štýly
• /js/ – pre skripty JavaScript
• /img/ – pre obrázky
• /fonts/ – pre písma
• /sass/ – pre súbory preprocesora SASS (ak používate SASS)
• /libs/ – pre knižnice tretích strán

Ak je všetko pripravené, potom je čas prejsť na vytvorenie súboru gulpfile.js v koreňovom adresári projektu, ktorý vám pomôže nakonfigurovať Gulp. Toto je miesto, kde môžete vytvoriť pokyny pre hlt, ktoré vám pomôžu automatizovať niektoré všedné úlohy.

Pokyny pre hlt

Akákoľvek inštrukcia je vytvorená v gulpfile.js pomocou funkcie gulp.task(). Prvým parametrom je názov inštrukcie. Potom je tu pole názvov inštrukcií, ktoré sa musia vykonať pred spustením definovanej inštrukcie. Posledným parametrom je funkcia, ktorej telo definuje, čo inštrukcia robí.

gulp.task("názov_pokynu", ["vykonaný_predtým_aktuálnym_pokynom", "ďalší_pokyn"], funkcia() ( // Niektoré akcie ));

Ak chcete zavolať inštrukciu, použite nasledujúci príkaz v konzole:

gulp názov_príkazu

Kompilácia SASS do CSS

Začnime kompiláciou SASS do CSS. Nainštalujte balík gulp-sass:

npm i --save-dev gulp-sass

Najprv musíte pripojiť balíčky, ktoré používate gulpfile.js. Poďme na to:

var gulp = vyžadovať("hlt"), sass = vyžadovať("hlt-sass");

Teraz vytvorte príkaz, ktorý skompiluje SASS do CSS:

gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css") );));

V prvom riadku pokynov uvádzame zdrojové súbory na kompiláciu. V konkrétnom príklade budú prevzaté všetky súbory s príponou .sass nachádza vo vnútri priečinka /src/sass/ a jej podpriečinky. Môžete tiež vybrať konkrétne súbory. Tu je vzorový zoznam toho, ako môžete nastaviť cesty k zdrojovým súborom.

• src/sass/main.sass – vyberte súbor main.sass
• src/sass/*.sass – vyberie všetky súbory s príponou sass
• src/sass/**/*.sass – vyberie všetky súbory s príponou sass vo všetkých podpriečinkoch v priečinku sass
• !src/sass/main.sass – výnimka súboru main.sass
• [‘!src/sass/main.sass’, ‘src/sass/second.sass’] – vylúčenie poľa súborov main.sass a second.sass
• src/sass/**/*.+(scss|sass) – vybrať všetky súbory scss a sass vo všetkých podpriečinkoch v sass

Teraz vytvorte v priečinku /src/sass/ súbor hlavný.sass a definujte v ňom niektoré štýly:

farba tela: červená veľkosť písma: 20px

Uložte súbor. Teraz môžeme skontrolovať, ako funguje kompilácia. V konzole spustíme príkaz:

Kontrola katalógu /src/css/. Mal by obsahovať novo skompilovaný súbor CSS. Vidíš? Skvelé! Poďme ďalej.

Automatické obnovenie stránky (LiveReload)

Prejdime k automatizácii aktualizácií stránok pri ich zmene, t.j. poďme to nastaviť LiveReload. Toto je jedna z najpopulárnejších úloh. Budeme potrebovať balík npm Browserssync na automatickú aktualizáciu prehliadača. Poďme si to nainštalovať:

npm i --save-dev browser-sync

Poďme sa spojiť synchronizácia prehliadača balík na začiatku gulpfile.js, ako sme to urobili predtým s balíkmi hlt A hlt-sass:

browserSync = require("browser-sync");

Poďme vytvoriť pokyny na spustenie Browsersync:

gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src" ) )); ));

Všetko, čo sme urobili, bolo zavolať Browsersync, aby sme spustili a špecifikovali adresár projektu so zdrojovými súbormi. Existujú ďalšie nastavenia pre Browserssync. Dozviete sa o nich v dokumentácii.

Pridajme ešte jednu rúra na pokyny sass, ktorý sa použije na aktualizáciu štýlov pri kompilácii CSS súborov. Zadajte parameter stream: pravda. To vám umožní aktualizovať štýly streaming bez úplného opätovného načítania stránky.

Pipe(browserSync.reload(( stream: true; )))

Následne vytvoríme inštrukciu, ktorá bude sledovať zmeny v súboroch a v prípade potreby stránku znovu načíta.

gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); ));

Nechaj ma vysvetliť. Pokyny sa vykonajú pred spustením synchronizácia prehliadača, t.j. Webový server začne ladiť projekt. Potom sa vykoná samotná inštrukcia sledovať. Na sledovanie zmien v súboroch, ktoré používame gulp.watch().

Vo vnútri anonymnej funkcie vykonáme 3 krát hlt.sledovať s dvoma parametrami. Prvým parametrom sú súbory, ktoré je potrebné sledovať, druhým sú akcie, ktoré je potrebné vykonať pri zmene súborov, t.j. Sleduj inštrukcie sass alebo obnovte stránku.

Venujte pozornosť tomu prvému hlt.sledovať. Namiesto browserSync.reload odovzdáme inštrukciu v poli sass, ktorý sa musí spustiť, ak boli súbory zmenené. V ňom, ako si pamätáte, streamujeme a aktualizujeme štýly na stránke.

Minifikácia a zlučovanie súborov

Takmer každý projekt musí využívať knižnice tretích strán. Ich počet môže byť od 5 do nekonečna. V súlade s tým musia byť všetky zahrnuté do hotového výrobku. Bolo by pekné celú túto vec optimalizovať, konkrétne:

• minifikovať (komprimovať) použité knižnice
• znížiť počet požiadaviek na server spojením knižníc do jedného súboru

Pridajme k zdrojovým súborom projektu niekoľko knižníc. Na toto používam Bower, balík pre NPM. Nainštalujte Bower:

Vytvorte konfiguračný súbor .bowerrc v koreňovom adresári projektu pre Bower, kde mu povieme, kam uložiť knižnice:

("adresár": "src/libs/" )

Nainštalujme si napríklad knižnicu jQuery a posúvač úhľadný:

bower i jquery slick-carousel

Teraz môžeme začať spájať a komprimovať knižnice. Na to použijeme balíčky hlt-koncat A gulp-uglifyjs o súboroch JavaScript. Poďme si ich nainštalovať:

npm i --save-dev gulp-concat gulp-uglifyjs

Čo sa týka CSS – balíka hlt-cssnano. Inštalácia:

npm i --save-dev gulp-cssnano

Minifikované súbory majú zvyčajne príponu .min. Balíček nám ho pomôže pridať hlt-premenovať. Inštalácia:

npm i --save-dev gulp-rename

Začnime pripojením nainštalovaných doplnkov k gulpfile.js:

concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), premenovanie = require("gulp-rename");

JavaScript

Vytvorme inštrukciu, ktorá nám umožní komprimovať a zlúčiť súbory JavaScript:

gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); ));

Vo vnútri anonymného funkčného vyhlásenia min-js Najprv zadáme cesty k súborom knižnice JavaScript ako pole. Potom pomocou concat spojíme knižnice do jedného súboru libs.min.js uglifyJs. A nakoniec výsledok uložte do priečinka /src/js/.

Pokyny je možné skontrolovať pomocou príkazu v konzole:

V priečinku /src/js/ súbor sa zobrazí libs.min.js, ktorý kombinuje a komprimuje súbory knižnice JavaScript použité v projekte.

CSS

Vytvorme si ho v katalógu /src/css/ súbor libs.sass. Naimportujeme do nej súbory CSS knižnice. Napríklad pomocou Bower som si stiahol knižnicu Bootstrap:

bower a bootstrap

Otvorme súbor libs.sass a importujte do neho súbor Bootstrap CSS:

@import "src/libs/bootstrap/dist/css/bootstrap"

Všetky súbory knižnice CSS teda zhromaždíme na jednom mieste, konkrétne v súbore libs.sass pomocou importu. Teraz vytvorte inštrukciu na kompresiu:

gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( prípona: ".min" ))) .pipe(gulp.dest("src/css")); ));

Pred kompresiou skompilujeme CSS zo SASS pomocou inštrukcie sass, ktoré sme uviedli v poli za názvom inštrukcie min-css.

V prvom riadku vezmeme konkrétny súbor, libs.css. Ďalej ho komprimujeme pomocou cssNano. Potom pomocou premenovať pridať príponu .min. Výsledok uložíme do priečinka /src/css/.

Kontrola pokynov:

Ak ste urobili všetko správne, potom v priečinku /src/css/ mali by sa objaviť dva súbory. libs.css A libs.min.css. Porovnajte ich veľkosti.

Automatické pridávanie predpôn dodávateľa (Autoprefixer)

Pri používaní nových funkcií CSS musíte nastaviť predpony dodávateľa, aby štýly fungovali správne. Robiť takéto veci ručne je nevďačná úloha. Nechajme teda Gulpa, aby to urobil za nás.

Najprv nainštalujte hlt-autoprefixer:

npm i --save-dev gulp-autoprefixer

Pripojíme nainštalovaný balík k gulpfile.js:

autoprefixer = require("gulp-autoprefixer");

Dobre, teraz môžeme použiť autoprefixer v návode sass. Urobme to po hovore .pipe(sass()), pretože predpony dodávateľa je potrebné umiestniť po konverzii SASS na CSS. Pridajme nový rúra:

Pipe(autoprefixer([ "posledných 10 verzií" ], ( kaskáda: true )))

Prvý parameter autoprefixer odovzdávame pole, v ktorom uvádzame, že chceme povoliť podporu pre 10 najnovších verzií prehliadača. Druhým parametrom sú nastavenia, kde naznačíme, že chceme na výstupe vidieť krásny kód, t.j. povoliť kaskádovanie.

Kontrolujeme pridaním do hlavný.sass nový majetok flex. Spustite pokyny sass:

IN main.css by sa mali objaviť predpony dodávateľa. Je to veľmi jednoduché, všetko funguje automaticky. Úžasný!

Konečná stavba projektu

Posledná vec, ktorej by som sa chcel v tejto príručke pre začiatočníkov Gulpu dotknúť, je konečná zostava projektu. Na to potrebujeme priečinok /dist/, ktorý sme vytvorili na samom začiatku. Pred každou montážou sa musí vyčistiť. Na to použijeme balík NPM del. Poďme si to nainštalovať:

npm i --save-dev del

Spojíme balík del V gulpfile.js:

del = vyžadovať("del");

Vytvorme návod čisté na vyčistenie adresára / dist/ pred montážou:

gulp.task("clean", function() ( return del.sync("dist"); ));

Teraz môžete začať priamo zostavovať projekt. Vytvorme návod stavať:

gulp.task("build", ["čistiť", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));

Pred volaním pokynov stavaťčistíme priečinok /dist/ v prípade, že montáž už bola vykonaná predtým. Potom pomocou pokynov komprimujeme a zlúčime súbory JavaScript a CSS min-js A min-css resp. Zároveň kompilujeme SASS do CSS, pretože pred vykonaním pokynov min-css inštrukcia sa vykoná sass.

Vo vnútri tela inštrukcie skopírujeme pripravené súbory projektu do adresára s hotovým produktom /dist/. Pozrime sa na pokyny:

Všetko funguje skvele! V priečinku /dist/ Teraz je po zložení hotový výrobok, ktorý je možné nahrať na produkčný server.

Záver

Týmto sa končí príručka pre začiatočníkov o montážnych projektoch v Gulpe. Ako vidíte, všetko je celkom jednoduché. Postupom času zverejním niekoľko ďalších príspevkov týkajúcich sa Gulpu a jeho doplnkov, keď im sám dobre rozumiem. Medzitým používajte a automatizujte svoje rutinné úlohy pri vývoji frontendu podľa poskytnutých pokynov. Ak máte nejaké otázky, opýtajte sa ich v komentároch k príspevku.

( "name": "bybtc-landing", "version": "1.0.0", "description": "vstupná stránka pre byBTC", "main": "index.js", "scripts": ( "test" : "echo \"Chyba: nie je zadaný žiadny test\" && exit 1" ), "úložisko": ( "typ": "git", "url": "git+https://github.com/Neuropassenger/bybtc- landing.git" ), "kľúčové slová": [ "pristátie" ], "autor": "Oleg Sokolov", "licencia": "ISC", "chyby": ( "url": "https://github.com" /Neuropassenger/bybtc-landing/issues" ), "domovská stránka": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependencies": ( "browser-sync": "^2.18.13" , "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", " gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" ))

var gulp = require("gulp"), sass = require("gulp-sass"), browserSync = require("browser-sync"), concat = require("gulp-concat"), uglifyJs = require("gulp- uglifyjs"), cssNano = vyžadovať("gulp-cssnano"), premenovať = vyžadovať("premenovať hlt"), autoprefixer = vyžadovať("gulp-autoprefixer"), del = vyžadovať("del"); gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(autoprefixer([ "posledných 10 verzií" ], ( cascade: true ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.reload(( stream: true ))); )); gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( prípona: ".min" ))) .pipe(gulp.dest("src/css")); )); gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); )); gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src" ) )); )); gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); )); gulp.task("clean", function() ( return del.sync("dist"); )); gulp.task("build", ["čistiť", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));

V tomto článku sa pozrieme na príklad prostredia Gulp, ktoré možno použiť na pohodlný front-end vývoj webového projektu. Tento príklad je predvolene nakonfigurovaný na vytváranie lokalít a webových aplikácií založených na frameworku Bootstrap 4.

Projekt diskutovaný v tomto článku sa nachádza na Github na: https://github.com/itchief/gulp-project-bootstrap-4

Video k tomuto článku:

Pokyny na inštaláciu prostredia Gulp

Ak chcete vytvoriť prostredie, musíte mať nainštalované nasledujúce programy:

• "Node.js" (z tejto stránky si môžete stiahnuť inštalačný program "Node.js" pre váš operačný systém; projekt vyžaduje verziu programu aspoň 10);
• "Gulp" (Gulp môžete nainštalovať spustením nasledujúceho príkazu v konzole: npm install -g gulp-cli).

Ďalším krokom je inštalácia balíkov npm a ich závislostí. Ak to chcete urobiť, v konzole (musí byť v koreňovom adresári projektu) musíte spustiť príkaz:

Inštalácia Npm

Tento príkaz nainštaluje všetky balíky, ktoré sú potrebné pre samotné prostredie aj pre frontend. npm vykonáva tieto akcie podľa pokynov napísaných v súbore "package.json".

Pri použití prvej verzie projektu (1.0.0), ktorá používa správcu balíkov Bower, musíte spustiť ďalší príkaz:

Inštalácia altánku

Tento program nainštaluje frontendové balíky špecifikované v súbore "bower.json".

Ako používať prostredie Gulp?

Otvorte príkazový riadok (cesta by mala smerovať do koreňového priečinka projektu) a zadajte gulp (normálny režim):

Po zadaní tohto príkazu sa spustí predvolená úloha, t.j. „predvolené“. Táto úloha následne spustí sériu ďalších úloh: „vytvoriť“, „webový server“ a „sledovať“.

Úloha „build“ vytvorí projekt pre produkciu (t. j. spustí „clean:build“, „html:build“, „css:build“, „js:build“, „fonts:build“ a „image:build ""). Tieto úlohy umiestnia výsledné projektové súbory do priečinka „assets/build“.

Úloha „webserver“ je navrhnutá tak, aby spúšťala lokálny webový server s „reloadom“ stránok v prehliadači. Veľmi uľahčuje prezeranie projektu a jeho testovanie.

Úloha „sledovať“ sa používa na sledovanie zmien zdrojových súborov v priečinku „assets/src“ a na vykonávanie rôznych úloh, ak k tomu dôjde. Inými slovami, umožňuje automaticky spúšťať potrebné úlohy a udržiavať výsledné súbory (obsah priečinka „assets/build“) aktuálne.

Okrem toho môžete vykonať selektívnu (nezávislú) montáž jednej alebo druhej časti projektu.

Napríklad, ak chcete vytvoriť iba CSS časť lokality, stačí zadať príkaz:

Gulp css:build

Zoznam ďalších úloh:

Gulp clean:build // na vyčistenie adresára "assets/build" gulp html:build // na vytváranie súborov HTML gulp js:build // na vytváranie súborov JS gulp fonts:build // na vytváranie písiem gulp image:build // na zostavenie obrazu

Popis prostredia Gulp

V tejto časti sa pozrieme na:

• základné nástroje a štruktúra súborov prostredia Gulp;
• ako pripojiť zdroje Bootstrap k projektu a nakonfigurovať ich;
• ako nezávisle (od začiatku) inicializovať projekt Gulp a nainštalovať závislosti (bez použitia hotového súboru package.json)
• ako inicializovať Bower a nainštalovať front-end balíky od začiatku (bez použitia hotového "bower.json")*;
• obsah súboru Gulp project builder (gulpfile.js)

* Správca balíkov Bower sa v projekte nepoužíva od verzie 2.0.0.

Zoznam nástrojov

Prostredie určené na vývoj front-end projektu (stránky) je postavené na základe nasledujúcich nástrojov:

• Node.js (prostredie, v ktorom bude prostredie spustené);
• npm (správca balíkov súčasťou Node.js; použije sa na stiahnutie Gulpu, pluginov a front-end balíkov);
• jQuery, Popover, Bootstrap (balíky, ktoré sa použijú na zostavenie css a js častí stránky);
• Gulp a jeho pluginy (budú použité na zostavenie projektu a vykonávanie ďalších webových úloh).

V prvých verziách projektu sa používal aj správca balíkov Bower. Používal sa na načítanie knižníc jQuery, Popover a Bootstrap. Vo verziách projektu od 2.0.0 sa tieto knižnice načítavajú pomocou npm.

Štruktúra súboru projektu Gulp

Súborová štruktúra projektu môže byť organizovaná rôznymi spôsobmi. To môže závisieť od preferencií konkrétneho vývojára a od projektu, pre ktorý sa vytvára.

V tomto článku sa budeme držať nasledujúcej štruktúry:

V koreňovom adresári projektu sa nachádza priečinok „assets“ a súbory „gulpfile.js“, „package.json“. Súbor „gulpfile.js“ bude obsahovať úlohy pre tvorcu projektu Gulp.

Prvá verzia projektu používala aj súbory „.bowerrc“ a „bower.json“. Súbor "bower.json" je konfiguračný súbor manažéra Bower, na základe ktorého boli určené frontend balíky potrebné na načítanie. V tomto projekte bol použitý na načítanie Bootstrap, jQuery a Popper.

Priečinok "assets" obsahuje dva priečinky: "src" (pre zdrojové súbory) a "build" (pre hotové súbory; tvorca Gulp ich umiestni do tohto priečinka). Priečinok "src" obsahuje adresáre "fonts" (pre fonty), "img" (pre zdrojové obrázky), "js" (pre súbory js), "style" (pre štýly) a "template" (pre fragmenty HTML) a súbor "index.html".

V prvej verzii projektu priečinok „src“ stále obsahoval adresár „bower_components“. Bol určený pre komponenty, ktoré boli načítané pomocou Bower. Aktuálna verzia ho nemá.

Adresár „js“ obsahuje dva súbory: „main.js“ a „my.js“. Súbor „my.js“ sa používa na písanie vašich skriptov a súbor „main.js“ sa používa na definovanie zoznamu súborov, ktorých obsah bude potrebné zahrnúť do konečného súboru js. Výsledný súbor je myslený ako výstupný súbor (v adresári „build“).

Adresár „style“ je vyhradený pre štýly. Tento adresár obsahuje tri súbory: „main.scss“ (obsahuje zoznam súborov, ktorých obsah je potrebné zahrnúť do konečného súboru štýlov), „my.scss“ (používa sa na písanie vlastných štýlov) a „variables.scss“ ( obsahuje premenné SCSS, pomocou ktorých zmeníme štýly Bootstrap 4 a použijeme ho aj na vytváranie vlastných premenných).

Súbor "index.html" je hlavnou stránkou vytvoreného projektu. Okrem "index.html" môžete do tohto adresára umiestniť aj ďalšie html stránky.

Adresár "template" je určený na umiestnenie fragmentov HTML stránok do neho. Napríklad v tomto adresári môžete vytvoriť súbory "head.html" a "footer.html" a importovať ich obsah (pomocou syntaxe //= cesta_k_súboru) na niekoľko stránok naraz. To uľahčí vytváranie a úpravu html stránok, pretože... jednotlivé časti stránok už budú v samostatných súboroch.

Pripojenie zdrojov Bootstrap 4 k projektu a ich nastavenie

Existujú rôzne spôsoby pripojenia rámca Bootstrap 4 k projektu, ako aj možnosti práce s ním.

Najflexibilnejšou možnosťou je použitie zdrojových kódov. V tomto prípade môžete nielen Je veľmi jednoduché zmeniť predvolené štýly bootstrapu, ale aj pripojiť k projektu len tie triedy a komponenty, ktoré v ňom budú použité.

Zdrojové kódy štýlov CSS Bootstrap 4 sú napísané v jazyku SCSS a sú prezentované prostredníctvom veľkého počtu malých súborov.

Zoznam súborov SCSS (nachádza sa v adresári "node_modules/bootstrap/scss/"): "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", "prechody". scss" , "dropdown.scss" atď.

Každý takýto súbor vykonáva buď špecifickú servisnú úlohu, alebo je zodpovedný za štýl špecifickej funkcie rámca alebo komponentu. Súbory SCSS majú krátke a jasné názvy. Iba pomocou nich môžete celkom presne pochopiť účel každého z nich.

Vykoná sa prispôsobenie alebo zmena predvolených štýlov Bootstrapu 4 prepísaním hodnôt premenných SCSS. Pre pohodlie sú všetky premenné SCSS zhromaždené na jednom mieste (v súbore "variables.scss"). Je však vhodné predefinovať ich hodnoty, samozrejme, nie v tomto súbore, ale vo vašom vlastnom (napríklad s rovnakým názvom „premenné.scss“, ale nachádzajúcim sa v „assets/style/variables.scss“).

Napríklad zmena farby témy úspech A nebezpečenstvo, sa vykonáva zmenou hodnôt premenných $zelená a $červená:

// Prepísanie predvolených hodnôt premenných Bootstrap 4 $red: #cc2eaa; $zelená: #2ecc71;

Poznámkaže po skopírovaní premenných Bootstrap 4 do vášho súboru CSS ("assets/style/variables.scss") z nich musíte odstrániť značku!default.

Značka!default je určená na nastavenie premennej SCSS na jej predvolenú hodnotu. Ak premenná SCSS už má hodnotu, potom sa nová hodnota, ak je zadaná pomocou kľúča!default, nenastaví.

Určenie, ktoré zdrojové SCSS súbory Bootstrap 4 by mali byť zahrnuté do kompilácie do CSS a ktoré nie, sa vykonáva pomocou súboru SCSS "assets/style/main.scss". Inými slovami, je to obsah tohto súboru, ktorý určí množinu štýlov, ktoré budú po kompilácii pripojené k webovej stránke.

Okrem toho sú k tomuto súboru pripojené aj súbory „assets/style/variables.scss“ (na prepísanie premenných Bootstrapu) a „assets/style/my.scss“ (na vytváranie vlastných štýlov).

Obsah súboru "main.scss" (príklad):

// Prepísanie predvolených hodnôt premenných Bootstrap 4 a definovanie vlastných @import "premenných"; // Pripojenie potrebných zdrojov SCSS 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"; // Pripojte svoje SCSS súbory @import "my";

Niektoré komponenty Bootstrap 4 navyše vyžadujú na fungovanie kód JavaScript.

Zoznam súborov Bootstrap 4 js (umiestnených v adresári "node_modules/bootstrap/js/dist/"): "util.js", "alert.js", "button.js", "carousel.js", "collapse. js ", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" a "toast.js".

Určenie, ktoré súbory js rámca Bootstrap 4 je potrebné zahrnúť do súboru js konečného projektu a ktoré nie, sa vykonáva pomocou „main.js“.

Import požadovaných súborov do výsledného súboru build/main.js sa vykonáva pomocou nasledujúcej konštrukcie:

//= cesta_k_suboru

Túto akciu vykoná doplnok Gulp „gulp-rigger“. Ako ho nainštalovať a pripojiť bude popísané nižšie.

Do tohto súboru môžete importovať aj súbory jQuery, Popper (potrebné pre fungovanie komponentov Dropdown, Tooltip a Popover) a v prípade potreby aj vlastné súbory js.

Obsah súboru „main.js“ (príklad):

// Import jQuery //= ../../../node_modules/jquery/dist/jquery.js // Import Popper //= ../../../node_modules/popper.js/dist/umd /popper.js // Import potrebných súborov Bootstrap 4 js //= ../../../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 // Import iných súborov js //= môj . js

Ako inicializovať projekt Gulp a nainštalovať závislosti od začiatku?

Vývoj projektu zvyčajne začína vytvorením súboru „package.json“ (manifest).

Súbor „package.json“ bude obsahovať všeobecné informácie o projekte (názov, verzia, popis, autor atď.), ako aj informácie o balíkoch, na ktorých je tento projekt závislý.

Ak chcete vytvoriť manifest, musíte prejsť do koreňového priečinka projektu a zadať príkaz:

Npm init

Po zadaní príkazu musíte odpovedať na nasledujúce otázky:

• názov projektu (názov) – „bootstrap-4“;
• číslo verzie – „2.0.0“;
• popis – „Spustiť projekt s použitím Bootstrap 4“;
• autor (autor) – „stránka“;
• git úložisko - "";
• vstupný bod, testovací príkaz, licencia, kľúčové slová – predvolené hodnoty.

Na otázku "Je to v poriadku?" odpovedzte „áno“ alebo stlačte Enter.

V dôsledku toho sa súbor "package.json" objaví v koreňovom priečinku projektu.

Teraz nainštalujte balíky, ktoré použijeme v projekte, pomocou nasledujúceho príkazu:

Npm install package_name --save-dev // inštalácia balíka, pričom informácie o ňom sa automaticky zapíšu do sekcie "devDependencies" súboru "package.json" npm install package_name --save-prod // inštalácia balíka s informáciami o ňom sa automaticky zapíše do sekcie "dependencies" súboru "package.json".

Kľúč „--save-dev“ alebo „--save-prod“ určuje, do ktorej časti súboru „package.json“ sa informácie o ňom dostanú.

Zoznam balíkov, ktoré budú použité v projekte:

Npm install gulp --save-dev // install gulp npm install browser-sync --save-dev // install browser-sync npm install gulp-autoprefixer --save-dev // install gulp-autoprefixer npm install gulp-cache - -save-dev // inštalácia gulp-cache npm inštalácia gulp-clean-css --save-dev // inštalácia gulp-clean-css npm inštalácia gulp-rimraf --save-dev // inštalácia gulp-clean-css npm install gulp-imagemin --save-dev // inštalácia gulp-imagemin npm install gulp-plumber --save-dev // inštalácia gulp-plumber npm install gulp-rigger --save-dev // inštalácia gulp-rigger npm install gulp- sass --save-dev // inštalácia gulp-sass npm inštalácia gulp-sourcemaps --save-dev // inštalácia gulp-sourcemaps npm inštalácia gulp-uglify --save-dev // inštalácia gulp-uglify npm inštalácia imagemin-jpeg- recompress --save-dev // inštalácia imagemin-jpeg-recompress npm inštalácia imagemin-pngquant --save-dev // inštalácia imagemin-pngquant npm inštalácia gulp-rename --save-dev // inštalácia imagemin-pngquant npm install jquery - -save-prod npm install popper.js --save-prod npm install bootstrap --save-prod

Po nainštalovaní všetkých závislostí bude mať súbor package.json nasledujúci obsah:

( "name": "bootstrap-4", "version": "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-inštalatér": "^1.2.1", "gulp-rigger": "^0.5.8", "hlt" -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" ) )

Ako inicializovať Bower a nainštalovať frontend balíky od začiatku?

Definujme priečinok, do ktorého bude Bower sťahovať balíčky. Ak to chcete urobiť, vytvorte súbor .bowerrc a zadajte doň nasledujúce:

("adresár": "assets/src/bower_components/" )

Uložme súbor .bowerrc. Teraz budú všetky komponenty načítané do adresára bower_components umiestneného v assets/src/ .

Inicializujeme Bower (vytvorme súbor manifestu bower.json). Súbor bower.json je možné vytvoriť pomocou príkazu (v koreňovom priečinku projektu):

Bower init Inicializujte Bower

Potom musíte odpovedať na nasledujúce otázky:

• názov projektu (názov) – bootstrap-4;
• popis (popis) – Spustiť projekt na webovej stránke Bootstrap 4;
• autor (autor) – webová stránka;
• nastaviť aktuálne nainštalované komponenty ako závislosti – Y (Áno);
• prajete si označiť tento balík ako súkromný, čo zabráni jeho náhodnému zverejneniu v registri – Y (Áno);
• Pri ostatných otázkach ponecháme odpovede ponúkané programom štandardne;

V dôsledku týchto krokov sa vytvorí súbor bower.json.

Načítajme Bootstrap 4 a balíky, na ktorých závisí (Popper a jQuery) do nášho projektu pomocou Bower.

Ak to chcete urobiť, zadajte do konzoly nasledujúci príkaz:

Bower install bootstrap#v4.0.0-beta --save

Prepínač -save je potrebný na zapísanie informácií o balíku do sekcie závislostí súboru bower.json.

V dôsledku toho bude mať bower.json nasledujúci obsah:

( "name": "bootstrap-4", "description": "Začať projekt na lokalite Bootstrap 4", "authors": [ "site" ], "license": "ISC", "keywords": , "homepage ": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "dependencies": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )

Ak nechcete inicializovať Bower (bower.json) pomocou príkazu bower init a inštalovať balíčky manuálne, môžete jednoducho vytvoriť súbor bower.json (napríklad pomocou správcu súborov) a vložiť doň obsah vyššie uvedeného textu . Ak chcete nainštalovať závislosti do projektu, stačí zadať nasledujúci príkaz:

Inštalácia altánku

Popis súboru na tvorbu projektu Gulp (gulpfile.js)

Všetky predtým vykonané akcie boli prípravné. Všetky funkcie, ktoré bude vytvorené prostredie vykonávať, budú určené súborom „gulpfile.js“.

Súbor "gulpfile.js" je zoznam úloh.

Hlavné úlohy, ktoré bude tento súbor vykonávať:

• zhromažďovanie niekoľkých súborov štýlov do jedného, ​​kompilovanie výsledného SCSS do CSS, pridávanie autoprefixov, minifikácia CSS a vytváranie zdrojovej mapy;
• import všetkých potrebných js súborov do jedného, ​​minimalizovanie tohto súboru a vytvorenie zdrojovej mapy;
• zhromažďovanie html súboru, prenos fontov, spracovanie (komprimovanie) obrázkov a automatická aktualizácia stránok pomocou Browser Sync.

Okrem toho, aby sme sa vyhli spúšťaniu týchto úloh pri manuálnej zmene zdrojových súborov, vytvoríme ďalšiu „sledovaciu“ úlohu. Bude monitorovať zmeny súborov a automaticky spúšťať určité úlohy.

Kód súboru "gulpfile.js" (pomocou Gulp 4):

"používať prísne"; /* cesty k zdrojovým súborom (src), k hotovým súborom (build), ako aj k tým, ktorých zmeny je potrebné sledovať (sledovať) */ var cesta = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonty: "assets/build/fonts/", src: ( html: "assets /src/*.html", js: "assets/src/js/main.js", štýl: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fonty: "assets/src/fonts/**/*.*", sledujte: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonty: "assets/srs/fonts/* * /*.*" ), čisté: "./assets/build/*" ); /* nastavenia servera */ var config = ( server: ( baseDir: "./assets/build" ), notify: false ); /* pripojenie gulp a pluginov */ var gulp = require("gulp"), // pripojenie gulp webserver = require("browser-sync"), // server pre prácu a automatickú aktualizáciu stránok inštalatér = required("gulp-plumber "), // modul na sledovanie chýb rigger = require("gulp-rigger"), // modul na import obsahu jedného súboru do iného sourcemaps = require("gulp-sourcemaps"), // modul na generovanie mapy zdrojových súborov sass = require("gulp-sass"), // modul na kompiláciu SASS (SCSS) do CSS autoprefixer = require("gulp-autoprefixer"), // modul na automatické nastavenie autoprefixov cleanCSS = require("gulp- clean-css" ), // plugin na minifikáciu CSS uglify = require("gulp-uglify"), // modul na minimalizovanie vyrovnávacej pamäte JavaScript = require("gulp-cache"), // modul na ukladanie do vyrovnávacej pamäte imagemin = require(" gulp-imagemin" ), // plugin na kompresiu obrázkov PNG, JPEG, GIF a SVG jpegrecompress = require("imagemin-jpeg-recompress"), // plugin pre kompresiu jpeg pngquant = require("imagemin-pngquant"), / / plugin pre kompresiu png rimraf = require("gulp-rimraf"), // plugin pre mazanie súborov a adresárov premenovať = require("gulp-rename"); /* úlohy */ // spustenie servera gulp.task("webserver", function () ( webserver(config); )); // zbieranie html gulp.task("html:build", funkcia () ( return gulp.src(cesta.src.html) // výber všetkých html súborov na zadanej ceste.pipe(inštalatér()) // sledovanie chýb . pipe(rigger()) // import attachments.pipe(gulp.dest(path.build.html)) // upload hotových súborov.pipe(webserver.reload(( stream: true ))); // reštartovanie servera )); // zhromaždenie štýlov gulp.task("css:build", funkcia () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // pre chybu tracking.pipe( sourcemaps.init()) // inicializácia zdrojovej mapy .pipe(sass()) // scss -> css .pipe(autoprefixer()) // pridanie prefixov.pipe(gulp.dest(cesta.zostav.css)) .pipe (rename(( prípona: ".min" ))) .pipe(cleanCSS()) // minifikácia CSS .pipe(sourcemaps.write(). /")) // zápis zdrojovej mapy .pipe(gulp.dest(cesta.zostava.css)) // odovzdanie do zostavy .pipe(webserver.reload(( stream: true ))); // reštartovanie servera )); / / zhromaždiť js gulp.task("js:build", funkcia () ( vrátiť gulp.src(cesta.src.js) // získať súbor main.js .pipe(inštalatér()) // na sledovanie chýb. pipe( rigger()) // import všetkých zadaných súborov do main.js .pipe(gulp.dest(cesta.zostav.js)) .pipe(premenovanie(( prípona: ".min" ))) .pipe(zdrojové mapy. init( )) //inicializácia zdrojovej mapy .pipe(uglify()) //minifikácia js .pipe(sourcemaps.write(./")) //zápis zdrojovej mapy .pipe(gulp.dest(path.build.js)) // vložte hotový súbor.pipe(webserver.reload(( stream: true ))); // reštartujte server )); // prenos fontov gulp.task("fonts:build", funkcia () ( return gulp. src(cesta. zdroj.písma) .pipe(gulp.dest(cesta.zostav.písma)); )); // spracovanie obrázkov gulp.task("image:zostavenie", funkcia () ( return gulp.src(cesta .src.img ) // cesta so zdrojmi obrázkov.pipe(cache(imagemin([ // kompresia obrazu imagemin.gifsicle(( prekladaný: true )), jpegrecompress(( progresívny: true, max: 90, min: 80 )) , pngquant() , imagemin.svgo(( pluginy: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // nahrávanie hotových súborov )); // vymazanie adresára zostavy gulp.task("clean:build", funkcia () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // vymazanie vyrovnávacej pamäte gulp.task("cache:clear", funkcia () ( cache.clearAll(); )); // build gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", " image:build"))); // spúšťanie úloh pri zmene súborov 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")); )); // default task gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));

Kód v súbore "gulpfile.js" obsahuje komentáre. S ich pomocou je vysvetlené, čo tento alebo ten fragment pokynov vykonáva.

Vytvorenie úlohy v Gulpe je veľmi jednoduché:

// vytvorenie úlohy gulp (nametask je názov úlohy) gulp.task("nametask", function() ( // akcie, ktoré má úloha vykonať... ));

Úlohy v hltach sú postavené veľmi jednoducho. Vo väčšine prípadov môže byť rámec ich činností reprezentovaný takto:

• získať údaje zo zdrojových súborov;
• spracovávať zdrojové údaje pomocou zásuvných modulov gulp;
• uložiť výsledok (súbory) do adresára "build".

Ak používate Gulp 3, obsah súboru „gulpfile.js“ by mal byť takýto:

"používať prísne"; /* parametre pre gulp-autoprefixer */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "Android >= 4.4", "Opera >= 30" ]; /* cesty k zdrojovým súborom (src), k hotovým súborom (build), ako aj k tým, ktorých zmeny je potrebné sledovať (sledovať) */ var cesta = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonty: "assets/build/fonts/", src: ( html: "assets /src/*.html", js: "assets/src/js/main.js", štýl: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fonty: "assets/src/fonts/**/*.*", sledujte: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonty: "assets/srs/fonts/* * /*.*" ), čisté: "./assets/build/*" ); /* nastavenia servera */ var config = ( server: ( baseDir: "./assets/build" ), notify: false ); /* pripojenie gulp a pluginov */ var gulp = require("gulp"), // pripojenie gulp webserver = require("browser-sync"), // server pre prácu a automatickú aktualizáciu stránok inštalatér = required("gulp-plumber "), // modul na sledovanie chýb rigger = require("gulp-rigger"), // modul na import obsahu jedného súboru do iného sourcemaps = require("gulp-sourcemaps"), // modul na generovanie mapy zdrojových súborov sass = require("gulp-sass"), // modul na kompiláciu SASS (SCSS) do CSS autoprefixer = require("gulp-autoprefixer"), // modul na automatické nastavenie autoprefixov cleanCSS = require("gulp- clean-css" ), // plugin na minifikáciu CSS uglify = require("gulp-uglify"), // modul na minimalizovanie vyrovnávacej pamäte JavaScript = require("gulp-cache"), // modul na ukladanie do vyrovnávacej pamäte imagemin = require(" gulp-imagemin" ), // plugin na kompresiu obrázkov PNG, JPEG, GIF a SVG jpegrecompress = require("imagemin-jpeg-recompress"), // plugin pre kompresiu jpeg pngquant = require("imagemin-pngquant"), / / plugin pre kompresiu png rimraf = require("gulp-rimraf"), // plugin pre mazanie súborov a adresárov rename = require("gulp-rename"); /* úlohy */ // spustenie servera gulp.task("webserver", function () ( webserver(config); )); // zbieranie html gulp.task("html:build", funkcia () ( return gulp.src(cesta.src.html) // výber všetkých html súborov na zadanej ceste.pipe(inštalatér()) // sledovanie chýb . pipe(rigger()) // import attachments.pipe(gulp.dest(path.build.html)) // upload hotových súborov.pipe(webserver.reload(( stream: true ))); // reštartovanie servera )); // zhromaždenie štýlov gulp.task("css:build", funkcia () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // pre chybu tracking.pipe( sourcemaps.init()) // inicializácia sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer(( // pridanie prefixov do prehliadačov: autoprefixerList ))) .pipe(gulp.dest(path.build). css)) .pipe(rename(( prípona: ".min" ))) .pipe(cleanCSS()) // minimalizuje CSS .pipe(sourcemaps.write(". /")) // zápis zdrojovej mapy .pipe(gulp.dest(cesta.zostava.css)) // odovzdanie do zostavy .pipe(webserver.reload(( stream: true ))); // reštartovanie servera )); / / zhromaždiť js gulp.task("js:build", funkcia () ( vrátiť gulp.src(cesta.src.js) // získať súbor main.js .pipe(inštalatér()) // na sledovanie chýb. pipe( rigger()) // import všetkých zadaných súborov do main.js .pipe(gulp.dest(cesta.zostav.js)) .pipe(premenovanie(( prípona: ".min" ))) .pipe(zdrojové mapy. init( )) //inicializácia zdrojovej mapy .pipe(uglify()) //minifikácia js .pipe(sourcemaps.write(./")) //zápis zdrojovej mapy .pipe(gulp.dest(path.build.js)) // vložte hotový súbor.pipe(webserver.reload(( stream: true ))); // reštartujte server )); // prenos fontov gulp.task("fonts:build", funkcia () ( return gulp. src(cesta. zdroj.písma) .pipe(gulp.dest(cesta.zostav.písma)); )); // spracovanie obrázkov gulp.task("image:zostavenie", funkcia () ( return gulp.src(cesta .src.img ) // cesta so zdrojmi obrázkov.pipe(cache(imagemin([ // kompresia obrazu imagemin.gifsicle(( prekladaný: true )), jpegrecompress(( progresívny: true, max: 90, min: 80 )) , pngquant() , imagemin.svgo(( pluginy: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // nahrávanie hotových súborov )); // vymazanie adresára zostavy gulp.task("clean:build", funkcia () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // vymazanie vyrovnávacej pamäte gulp.task("cache:clear", funkcia () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // spustenie úloh pri zmene súborov 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(cesta.watch.img, ["image:build"]); gulp.watch(cesta .watch.fonts, ["fonts:build"]); )); // default task gulp.task("default", [ "build", "webserver", "watch" ]);

Táto príručka obsahuje popis užitočných a najčastejšie používaných nástrojov front-end. Budete sa môcť naučiť proces inštalácie nástrojov a hlavné body práce s nimi.

NPM

Úvod

Počas vývoja projektu je často potrebné pridať knižnice a pluginy tretích strán. V dôsledku toho musí vývojár vyhľadať požadovanú závislosť, stiahnuť, rozbaliť archív a skopírovať súbory do projektu. Správcovia balíkov pomôžu automatizovať túto rutinnú prácu.

Správca balíkov– softvér, ktorý vám umožňuje riadiť proces inštalácie, odinštalovania, konfigurácie a aktualizácie rôznych komponentov.

Pridávanie knižníc tretích strán pomocou správcu balíkov je nahradené niekoľkými príkazmi v termináli.

Jedným zo správcov balíkov používaných vo frontend projektoch je NPM.

npm(Node.js Package Manager) je správca balíkov zahrnutý v Node.js. Používa sa na sťahovanie balíkov z cloudového servera npm alebo na nahrávanie balíkov na tento server.

Oficiálna stránka

Začiatok práce

Ak chcete nainštalovať npm, musíte si stiahnuť a nainštalovať NodeJS (npm sa nainštaluje automaticky): https://nodejs.org/en/.

Použitie

Inštalácia balíkov

Balík je jeden alebo viacero súborov JavaScript, ktoré predstavujú nejaký druh knižnice alebo nástroja. Ak chcete nainštalovať balík pomocou npm, musíte spustiť nasledujúci príkaz:

Inštalácia Npm<название пакета>

Ak chcete balík nainštalovať globálne, použite kľúč -g. Po inštalácii sa balík spolu so zdrojmi nachádza v adresári node_modules/.

Kontrola verzie

Ak chcete skontrolovať aktuálnu verziu npm, musíte spustiť príkaz:

Nastavenie konfiguračného súboru

Súbor package.json obsahuje informácie o vašej aplikácii: názov, verzia, závislosti atď. Každý adresár, ktorý obsahuje tento súbor, sa interpretuje ako balík Node.js.

Ak chcete vytvoriť súbor package.json musíte spustiť príkaz:

Npm init

Potom budete musieť vyplniť niektoré informácie o projekte.

Tento súbor bude uchovávať názvy a verzie všetkých balíkov potrebných v projekte. Pomocou príkazu inštalácia npm si môžete stiahnuť všetky balíčky, ktoré sú v package.json.

Ak chcete nainštalovať určitý balík a automaticky ho uložiť do súboru package.json, použite príkaz:

Inštalácia Npm<название пакета>--save-dev

Alternatívy

Priadza

Zvláštnosti

• Vytvorenie webového servera a automatické opätovné načítanie stránky v prehliadači pri ukladaní kódu, sledovanie zmien v projektových súboroch.
• Používanie rôznych JavaScript, CSS a HTML preprocesorov (CoffeeScript, Less, Sass, Stylus, Jade atď.).
• Minifikácia CSS a JS kódu, ako aj optimalizácia a zreťazenie jednotlivých projektových súborov do jedného.
• Automatické vytváranie predpôn dodávateľa (predpony k názvu vlastností CSS, ktoré výrobcovia prehliadačov pridávajú pre neštandardné vlastnosti) pre CSS.
• Správa súborov a priečinkov v rámci projektu – vytváranie, mazanie, premenovávanie.
• Spúšťanie a riadenie vykonávania príkazov externého operačného systému.
  Práca s obrázkami - kompresia, vytváranie sprite, zmena veľkosti (png, jpg, svg atď.).
• Nasadiť (odoslať na externý server) projekt cez FTP, SFTP atď.
  Pripojenie a používanie neobmedzeného počtu pomôcok, programov a pluginov Node.js a Gulp v projekte.
• Tvorba rôznych projektových máp a automatizácia inej ručnej práce.

Začiatok práce

NodeJS a npm musia byť nainštalované v systéme.

Krok 1: Ak chcete nainštalovať GulpJS globálne pomocou správcu balíkov npm, musíte spustiť príkaz:

Npm nainštalovať gulp -g

Krok 2: Musíte ho nainštalovať pre aplikáciu:

Npm install --save-dev gulp

Načítanie ďalších doplnkov, ktoré možno použiť pri zostavovaní projektu, sa tiež vykonáva pomocou npm s nasledujúcim príkazom:

Inštalácia Npm<название плагина>--save-dev

Všetky nainštalované pluginy sa nachádzajú v adresári node_modules/.

Použitie

Krok 1: Najprv sa musíte pripojiť hlt k projektu. Ak to chcete urobiť v súbore gulpfile.js napíš riadok:

Var gulp = vyžadovať("hlt");

Funkcia vyžadovať() umožňuje pripojiť pluginy z priečinka node_modules/.

Krok 2: Pomocou premennej hlt môžete vytvoriť úlohy na zostavenie projektu:

Gulp.task("exampleTask", function() ());

Metóda úloha má dva parametre: názov a funkciu s telom úlohy.
Tento pokyn je teraz možné dokončiť. Ak to chcete urobiť, napíšte do konzoly:

Príklad hltuÚloha

Základné príkazy

Nižšie je uvedený komplexnejší príklad inštrukcie:

Gulp.task("exampleTask", funkcia () ( return gulp.src("zdrojové-súbory") .pipe(plugin()) .pipe(gulp.dest("priečinok")); ));

Pozrime sa na príkazy použité v tomto príklade:

• gulp.src– výber zdrojových súborov projektu na spracovanie pomocou pluginu;
• .pipe(plugin())– volanie doplnku Gulp na spracovanie súboru;
• .pipe(gulp.dest('priečinok')) – výstup výsledného súboru do cieľového priečinka.

Masky súborov

Funkcia gulp.src berie ako parameter masku súboru. Príklady masiek:

• ./ – aktuálny adresár;
• ../ – nadradený adresár;
• js/index.js– súbor index.js v priečinku js;
• js/*.js– všetky súbory s príponou js v priečinku js;
• js/**/*.js– všetky súbory s príponou js v priečinku js a v jeho podadresároch;
• !js/*.js– vylúčenie súborov s príponou js v priečinku js.

Prúdy

Použitie vlákien je jednou z najdôležitejších výhod GulpJS.

Prúdy vám umožňujú prenášať niektoré údaje postupne z jednej funkcie do druhej, pričom každá z nich vykonáva nejaké akcie s týmito údajmi.

Funkcia gulp.src() vytvorí prúd objektov reprezentujúcich súbory, ktoré mu boli odovzdané ako parameter. Ďalšie používanie funkcií rúra je postavený dopravník, cez ktorý sa prenáša tok predmetov. Tejto funkcii sa ako parameter odovzdá plugin, ktorý nejakým spôsobom spracuje prúd objektov.

Nižšie je uvedený príklad použitia vlákien. Tento príklad používa doplnky tretích strán hlt-jšint A hlt-koncat ktoré je potrebné nainštalovať a pripojiť gulpfile.js.

Funkcia gulp.src berie súbory podľa masky js/*.js. Spustí JSHint a vytlačí výsledok. Potom zreťazí súbory a na konci uloží výsledný súbor po zreťazení do adresára dist/.

Gulp.task("príklad", funkcia () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest ("dist")); ));

Doplnky tretích strán

Pozrime sa na príklad použitia doplnkov tretích strán. Aby sme to dosiahli, vytvoríme inštrukciu na zreťazenie súborov js:

Krok 1: Najprv musíte povoliť doplnok pomocou príkazu require:

Var concat = vyžadovať("gulp-concat");

Krok 2: Potom musíte vytvoriť úlohu na zreťazenie súborov s príponou js umiestnenou v adresári js/. Na konci sa výsledný súbor umiestni do adresára dist/js:

Gulp.task("concat", funkcia () ( return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js") );));

Gulp concat

Ďalšie informácie

Môžete tiež definovať úlohu, ktorá spôsobí vykonanie iných úloh.

Gulp.task("zostaviť", ["html", "css"]);

Okrem toho existuje metóda sledovať na sledovanie zmien v súboroch:

Gulp.watch("maska ​​súborov na sledovanie", ["názov úlohy, ktorá sa vykoná pri zmene súborov"]);

IN gulpfile.js môžete vytvoriť predvolenú úlohu:

Gulp.task("predvolené", ["úloha1", ​​"úloha2"]);

Táto úloha sa spúšťa z konzoly príkazom:

Základné pluginy

• hlt-autoprefixer– automaticky predponuje vlastnosti CSS;
• gulp-browser-sync– vytvorí spojenie, po ktorom automaticky obnoví stránku pri zmene súborov klienta alebo dokonca servera;
• hlt-uncss– optimalizácia CSS súborov. Plugin analyzuje HTML kód a nájde všetky nepoužívané a duplicitné štýly;
• hlt-csso– Minifikátor CSS;
• hlt-htmlmin– jednoduchý HTML miniifier;
• hlt-htmltip- HTML validátor;
• hlt-oškliviť– Minifikátor JavaScriptu;
• hlt-koncat– zreťazenie súborov;
• gulp-webový server- umožňuje vytvoriť a spustiť server;
• hlt-jšint– kontrola kvality JS kódu;
• hlt-jazmín– prebiehajúce testy jazmínu;
• gulp-jsdoc– generovanie dokumentácie JSDoc.

Kompletný zoznam doplnkov Gulp nájdete na nasledujúcom odkaze:
http://gulpjs.com/plugins/

Alternatívy

GruntJS

Zvláštnosti

• Podpora asynchrónneho testovania.
• Schopnosť umiestniť pozorovateľov na rôzne objekty.

Začiatok práce

Ak chcete pripojiť Jasmine k svojmu projektu, musíte si stiahnuť knižnicu a zahrnúť nasledujúce súbory na hlavnú stránku HTML:

• lib/jasmine-*/jasmine.js- samotný rámec;
• lib/jasmine-*/jasmine-html.js- formátovanie výsledkov vo forme HTML;
• lib/jasmine-*/jasmine.css- vzhľad výsledku testu;
• SpecRunner.html- súbor, ktorý by sa mal otvoriť v prehliadači na spustenie testov.

Synchronizácia s nástrojmi

GulpJS

Jasmine môže byť zahrnutá do zostavy projektu GulpJS:

Krok 1: Najprv musíte nainštalovať doplnok gulp-jasmine:

Npm nainštalovať gulp-jasmine --save-dev

Krok 2: Potom musíte pripojiť doplnok v súbore zostavy a vytvoriť úlohu testovacieho spustenia:

Var jazmín = vyžadovať("dúšok-jazmín"); gulp.task("jasmine", function() ( gulp.src("testovacie súbory") .pipe(jasmine()); ));

KarmaJS

(práca s týmto nástrojom je podrobnejšie popísaná na konci článku)

Na pripojenie Jasmine ku KarmaJS potrebujete:

Krok 1: Nainštalujte KarmaJS:

Npm install -g karma-cli

Krok 2: Nainštalujte doplnky potrebné na spustenie testov napísaných v jazyku Jasmine v prehliadačoch Chrome a PhantomJS:

Npm install karma-jasmine karma-chrome-launcher karma-phantomjs-launcher

Krok 3: Nainštalujte samotný Jasmine:

Npm install -g jasmine

Krok 4: V konfiguračnom súbore karmy pripojte pluginy a zadajte cestu k testom.

Použitie

Kľúčové slová

• popis – definícia testovacej sady;
• it – definícia testu;
• očakávať – definuje očakávania, ktoré sa kontrolujú v teste.

Funkcia description a it má dva parametre: prvý je názov, druhý je funkcia s kódom.

Príklad základného testu

opísať(“názov testovacej sady”, funkcia () ( it(”názov testu”, funkcia () ( očakávať(2+2).toBe(4); )); ));

Metódy kontroly výsledkov

• očakávať().toBe()– kontrola rovnosti premenných („===“);
• očakávať().not.toBe()– kontrola rovnosti premenných („!==“);
• očakávať().toEqual()– kontrola rovnosti premenných a objektov vrátane obsahu;
• očakávať().toBeDefined()– skontrolovať existenciu;
• očakávať().toBeUndefined()– skontrolujte neexistenciu;
• očakávať().toBeNull()– kontrola hodnoty premennej na nulu;
• očakávať().toBeTruthy()– overenie pravdy;
• očakávať().toBeFalsy()– skontrolovať nepravdivosť;
• očakávať().toBeLessThan()– kontrola, či hodnota musí byť menšia ako;
• očakávať().toBeGreaterThan()– kontrola, či hodnota musí byť väčšia ako;
• očakávať().toBeCloseTo()– kontrola, či sa hodnota musí približovať k číslu;
• očakávať().toMatch()– kontrola súladu s regulárnym výrazom;
• očakávať().toContain()– kontrola obsahu v poli;
• očakávať().toThrow()– kontrola vyvolania výnimky;
• očakávať().toHaveBeenCalled()– kontrola volania funkcie.

Doplnkové funkcie

Aby sa zabránilo kopírovaniu akejkoľvek logiky použitej v testoch, používajú sa funkcie pred každým/po každom. Spúšťajú sa pred/po každom teste.

Funkcie sa používajú na testovanie asynchrónnych volaní beží A čaká na.

• beží– akceptuje na vykonanie asynchrónnu funkciu;
• čaká na– má tri parametre: prvý je funkcia, ktorá by sa mala vrátiť pravda, ak asynchrónne volanie vo funkcii beží bola vykonaná, druhé je chybové hlásenie, tretie je čakanie v milisekundách.

description(“príklad testovania asynchrónneho volania”, funkcia () ( var výsledok = 0; funkcia asyncFunc() ( setTimeout(funkcia() ( výsledok = výsledok + 2; ), 500); ) it(“názov testu” , funkcia ( ) ( beží(funkcia () ( asyncFunc(); )); čakáNa(funkcia() (výsledok návratu === 2; ), „hodnota sa nezmenila“, 2000); )); ));

Pozorovatelia

Schopnosť sledovať volania funkcií sa vykonáva pomocou špehovať. Táto funkcia má dva parametre: prvý je objekt, pre ktorý sa funkcia volá, druhý je názov funkcie, ktorú treba monitorovať.

If(“kontrola volania funkcie”, funkcia () ( spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); expect(exampleObject.exampleFunction).toHaveBeenCalled(; ));

Pri testovaní pomocou špehovať Môžete sledovať počet hovorov, ich parametre a každý hovor samostatne.

Ak chcete vytvoriť funkciu bez implementácie, môžete použiť createSpy. Funkcia createSpy prevezme názov funkcie na identifikáciu.

If(“kontrola volania funkcie”, funkcia () ( var example = createSpy("PRÍKLAD"); example(“param1”, “param2”); expect(example.identify).toHaveBeenCalledWith(”param1”, “param2”) ; očakávať(example.calls.length).toEqual(1); ));

Vytvorenie objektu stub sa vykonáva pomocou createSpyObj. Ako parametre createSpyObj berie názov objektu a pole reťazcov, čo je zoznam metód stub objektu.

Alternatívy

Mocha

Použitie

Dokumentácia je generovaná z komentárov zdrojového kódu.

24. septembra , 2016

Budú sa zaoberať nasledujúcimi problémami: práca so štýlmi sass pomocou zdrojových máp, lepenie a komprimovanie súborov js, vytváranie súborov requirejs pomocou rjs, predbežné spracovanie html, čistenie a kopírovanie súborov, optimalizácia obrazu, vytváranie lokálneho webového servera a režim monitorovania - úlohy sledovania. Vitajte pri článku, bude tam veľa zaujímavých vecí!
P.S. Materiálu je veľa, preto bude článok rozdelený na 3 časti: základy montáže a organizácie projektu, písanie testovacej aplikácie na Backbone + Require.js a samotná montáž pomocou hltu.

Prečo potrebujete vybudovať frontend?

Jedným z najdôležitejších princípov vývoja je modularita. Rozdelenie projektového kódu do mnohých malých, ideálne voľne spojených kusov-modulov. To platí nielen pre kód javascript. Týka sa to štýlov, html šablón a rôznych knižníc.

Štruktúra jednoduchej aplikácie napísanej v Backbone + Require môže vyzerať asi takto.

A toto je malý testovací projekt, v reálnej aplikácii môžu byť stovky a tisíce súborov. Nútiť prehliadač používateľa k stovkám požiadaviek http je prinajmenšom nehumánne. Musíme zabezpečiť, aby sa služba, ktorú píšeme, načítala čo najrýchlejšie. Jednou z najdôležitejších úloh montážnych nástrojov je preto minifikácia, zníženie počtu súborov použitých v projekte, ich lepenie do zväzkov. Na výstupe by sme mali mať stručnejšiu štruktúru, napríklad takto:

Rozdiel je jasne viditeľný: namiesto desiatok súborov máme v samostatnom priečinku jeden index.html, jeden css súbor, optimalizované a komprimované obrázky, hoci to na screenshote nie je vidieť :-)

A tiež to najzaujímavejšie: v priečinku js sme dostali iba 3 komprimované súbory.
P.S. Neskôr vám poviem, prečo tri a nie jeden.
Všimnite si, že toto je skutočná štruktúra testovacej aplikácie, ktorú čoskoro napíšeme.

Opísal som len jeden dôvod, prečo používať nástroje na zostavovanie, ale to už stačí na to, aby ste mohli vo svojich projektoch začať používať gulp, grunt, webpack alebo niečo podobné. Navyše nezáleží na tom, či píšeme obrovskú službu, malé SPA (ako v našom článku) alebo vstupnú stránku. Princípy montáže sú pre všetky projekty rovnaké a líšia sa len rôznorodosťou úloh a prístupov k ich riešeniu. V našom príklade vytvoríme štruktúru, ktorá sa môže v budúcnosti ľubovoľne rozširovať, ale výstupom bude vždy úhľadná kopa súborov, pripravená na nahranie do vašej produkčnej lokality – produkčnej lokality.

Ako správne zorganizovať projekt.

Princíp je takýto: existuje sekcia s vývojovými súbormi, je tu sekcia so zhromaždenými súbormi a všetko ostatné, na čo tieto veci slúžia. V koreňovom adresári projektu vytvoríme 2 priečinky: src a build. V src a iba v src budeme pracovať, vytvárať nové súbory, upravovať ich a celkovo sa baviť. Na snímke obrazovky vyššie, kde je niekoľko desiatok súborov, ste presne videli obsah priečinka src nášho testovacieho projektu. A hneď nižšie je niekoľko úhľadných súborov z priečinka build. Generuje sa len automaticky pomocou montážnych nástrojov, nemusíte tam nič upravovať. Napriek tomu sa pri každej zostave jej obsah prepíše novými súbormi (a vo vývojovom režime nie je k dispozícii žiadny priečinok zostavenia - je odstránený, aby z neho nebolel zrak)

Okrem src a build bude root obsahovať súbory package.json, gulpfile.js, priečinok node_modules a voliteľne aj .gitignore (ak pracujete s Git). Môžete tiež vidieť priečinok protokolov - to je produkt Apache a dlhoročný zvyk uchovávať protokoly projektu vo vlastnom priečinku, samozrejme, s výnimkou repozitára Git :-)

Takto vyzerá celá štruktúra projektu:

Myslím, že neexistujú žiadne otázky týkajúce sa obsahu zostavy, ale podrobnejšie vysvetlím o src:

• 1. html - index.html, koreňový indexový súbor projektu. Prečo nie hneď v koreňovom adresári src? Pretože to bude predspracované a vytvorené hltom. Ako na to, sa dozvieme o niečo neskôr, keď to s montážou začneme vážne.
• 2. img - obrázky, nekomprimované, bežné
• 3. js - celý javascriptový pohyb projektu, modelu a zobrazenia Backbone
• 4. lib – knižnice tretích strán, ako backbone.js, require.js, lodash.js a ďalšie
• 5. skripty – skripty js, ktoré sú potrebné na produkčnom mieste, ale nie sú potrebné v režime vývoja. Týka sa to kódov pre analýzu, rôzne experimenty a iné marketingové veci.
• 6. štýly - sass súbory so štýlmi. Zostavený súbor css bude umiestnený do rovnakého priečinka (iba pre režim vývoja)
• 7. tpl - html šablóny. Používajú ho zobrazenia Backbone pomocou textového doplnku require.js

Vzhľad testovacej aplikácie je pomerne jednoduchý. Môžete povedať, že tento druh svinstva sa robí s niekoľkými riadkami kódu html a css bez jediného súboru js.
Naším cieľom však nie je nakresliť pekný obraz, ale vytvoriť pevnú štruktúru projektu a zvážiť čo najviac aspektov stavby. Keď sa projekt rozrastie na stovky súborov, budeme na toto nešťastie pripravení a dokážeme sa ľahko vyrovnať so zvýšenými objemami. Preto sa aj napriek malosti a vonkajšej úbohosti testovacej aplikácie naučíme princípy montáže pre veľké a zložité projekty.

Aké montážne problémy vyriešime?

Pripomínam, že sme sa dohodli na dvoch režimoch zostavovania: vývoj a výroba. Všetky naše úlohy napíšeme s ohľadom na tieto dva režimy. Nepotrebujeme všetky operácie počas procesu vývoja a nie všetky pri montáži do výroby.

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

• 1. Čistenie súborov a priečinkov z výsledkov predchádzajúceho zostavenia
• 2. Vytváranie css zo súborov sass s kompresiou a bez nej
• 3. Pripojenie zdrojových máp k štýlom, zároveň ukážem na príklade, prečo je to potrebné
• 4. Vytvorenie balíka js pomocou requirejs
• 5. Lepenie a kompresia jednotlivých súborov js (analytics)
• 6. Predspracovanie HTML
• 7. Optimalizácia a kompresia obrazu
• 8. Zriadenie lokálneho webového servera
• 9. Úlohy sledovania súborov pri práci vo vývojovom režime - úlohy sledovania
• 10. Zhromažďovanie jednotlivých úloh do kopy - záverečné úlohy pre výrobu stavieb a vývojové práce

Takže sme diskutovali o tom, prečo vôbec potrebujeme vybudovať frontend, rozhodli sme sa o štruktúre projektu, podrobne sme analyzovali, čo od zostavenia chceme, a hovorili sme všeobecne o testovacej aplikácii. V ďalšej časti článku napíšeme jednoduchú Backbone aplikáciu v spojení s Require.js. Ak nepoznáte Backbone a/alebo Require.js, potom sa nemáte čoho obávať. V skutočnosti je v aplikácii malý kód chrbtice. Namiesto toho môžete jednoducho použiť svoju obľúbenú knižnicu alebo jednoducho napísať kód javascript/jquery a preskočiť sekciu konfigurácie requirejs.

Gentleman's kit pre front-end vývojárov

Nie je žiadnym tajomstvom, že moderný front-end developer musí mať vo svojom arzenáli jeden z nástrojov na zostavenie projektu, ako napr. Gulp alebo Grunt. Až do určitej doby mal Grunt v tejto veci monopol, ale skupina vývojárov, ktorí sa oddelili od Gruntu, sa rozhodla vytvoriť vlastného ľahkého a rýchleho správcu úloh Gulp.

V tomto článku pripravíme štartovací balíček od začiatku na použitie v budúcich projektoch.

Aké technológie používame?

• Softvérová platforma: Node.js
• Predprocesor CSS: Stylus
• Správca úloh: Gulp

Prečo frontender potrebuje správcu úloh?

Sám som si donedávna kládol otázku, prečo potrebujem tráviť čas nastavovaním konfigurácie správcu úloh, keď už som dobre pracoval s rozložením rozložení, kým som nezačal používať predprocesory CSS.

CSS preprocesory sú naozaj pohodlné a zrýchľujú písanie štýlov, no skompilovať kód napísaný na preprocesore do bežného CSS nie je úplne triviálna úloha, ktorú možno vyriešiť jedným tlačidlom. Tu nám prichádza na pomoc správca úloh. Ku konverzii kódu nedochádza len kliknutím na tlačidlo, všetko sa deje online bez vašej účasti (samozrejme, ak všetko správne nakonfigurujete).

Úlohy správcu úloh samozrejme ďaleko presahujú procesy spojené s konverziou predprocesorového kódu na čistý CSS. Tvorca projektu sa zaoberá aj minifikáciou, zreťazením, kontrolou chýb v kóde, skladaním obrázkov do sprite, optimalizáciou obrázkov pre web atď. Jednoducho vo svojom projekte vytvoríte veľa logicky oddelených súborov, ktoré sa potom pohodlne zhromažďujú do jedného adresára, sú už spracované a pripravené na použitie v prehliadači. Ale o tom trochu neskôr, ale teraz začnime s prípravou.

Inštalácia Node.js

Ak viete, ako nainštalovať node.js na váš systém a používate ho, môžete bezpečne prejsť na ďalší titul.

Chcel by som vás okamžite upozorniť, že všetky opísané akcie sú relevantné pre Mac OS X, ale všeobecne použiteľné pre ostatných Unix systémov Vývoj prostredníctvom správcu úloh a príkazového riadku Windows o niečo ťažšie a nebude tu popisované. Ak však stále používate Windows a nie ste pripravení sa ho vzdať, potom vám môžem navrhnúť možnosť použiť virtuálny stroj s nainštalovaným Ubuntu, používam túto možnosť na mojom domácom systéme, čo je vo všeobecnosti celkom pohodlné.

Takže v prvom rade si musíme stiahnuť a nainštalovať balík node.js do nášho systému, aby sme mohli pracovať s uzlom cez konzolu. Prejdite na oficiálnu webovú stránku node.js a stiahnite si najnovšiu stabilnú verziu pre váš systém. Po nainštalovaní by mal byť príkaz node dostupný na príkazovom riadku. Ak chcete skontrolovať, či je váš uzol spustený, zadajte príkaz do príkazového riadka

odpoveď by mala zobrazovať verziu nainštalovaného node.js. Ak je všetko v poriadku, ideme ďalej.

Štruktúra adresára projektu

V našich projektoch budeme používať jednotnú verziu štruktúry:

Rozvíjať - koreňový adresár vývoja└─ začať - adresár projektu├─ stavať - zostava zostavená správcom úloh├─zdroj - všetky zdrojové súbory na vývoj (.psd atď.)├─src - vývojový adresár│├─css - adresár vývoja štýlu││├─obrázky - všetky statické obrázky││├─škriatkovia - obrázok zhromaždený do škriatka││├─čiastočné - súbory vlastného štýlu│││├─mixins.styl - mixy na mieru│││└─štýly.štýl - vlastné štýly││├─predajca - iné externé súbory štýlov││└─štýly.štýl - súbor hlavného štýlu│├─písma - adresár fontov│├─obr - katalóg dynamických obrázkov│├─js - Vývojový adresár JavaScriptu││├─_*.js - bočné súbory js││├─_main.js - základný vlastný js││└─main.js - hlavný súbor js│├─.htaccess - konfigurácia pre server│├─*.html - súbory rozloženia stránky│├─pages.html - súbor s odkazmi na všetky stránky šablóny│├─index.html - indexový súbor rozloženia stránky│└─zahŕňať - adresár zahrnutých značkovacích súborov│ └─*.html - zahrnuté značkovacie súbory (header.html atď.)├─package.json - konfigurácia správcu balíkov npm├─gulpfile.js - Konfigurácia hltu├─stylus.šablóna.fúzy - maska ​​na čítanie škriatok├─TODO - hárok úloh└─.gitignore - konfigurácia pre Git

Inštalácia

V konzole pomocou príkazu cd prejdite do koreňového vývojového adresára, vytvorte adresár pre náš projekt mkdir start a prejdite do neho.

Nainštalujte našu štruktúru pre projekt cez konzolu:

mkdir build resource 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

Vytvorme počiatočné súbory v štruktúre projektu:

touch 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 src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Vytvorme package.json

Na všetky vyskakovacie otázky je možné kliknúť cez Enter, node ich nastaví na predvolené hodnoty, alebo môžete vyplniť navrhované polia.

.gitignore

Hovoríme Gitu, ktoré adresáre má ignorovať a neodovzdávať do úložiska:

/node_modules/ /build/ /resource/

Adresár node_modules sa objaví neskôr po inštalácii zásuvných modulov a bude obsahovať všetky zásuvné moduly uzla pre projekt.

src/.htaccess

Nainštalujeme ďalšiu kompresiu gzip a ukladanie do vyrovnávacej pamäte pre server:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Poskytujte komprimované CSS súbory gzip, ak existujú # a klient akceptuje gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Poskytovať gzip komprimovaný Súbory JS, ak existujú # a klient akceptuje gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Poskytovať správny obsah typov a zabrániť dvojitému gzip mod_deflát. RewriteRule "\.css\.gz$" "-" RewriteRule "\.js\.gz$" "-" # Poskytujte správny typ kódovania. Header append Kódovanie obsahu gzip # Vynútiť ukladanie súborov gzip a # súborov css/js bez gzip do vyrovnávacej pamäte oddelene. Príloha hlavičky Vary Accept-Encoding ExpiresActive on ExpiresByType application/javascript "prístup plus 1 mesiac" ExpiresByType image/jpg "prístup plus 1 mesiac" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "prístup plus 1 mesiac" ExpiresByType image/pngType image/png mesiac" ExpiresByType text/css "prístup plus 1 mesiac"

src/css/styles.styl

Zahrňme súbory vlastného štýlu do hlavného súboru štýlu:

@import "čiastočné/štýly"

Upozorňujeme, že pre súbory connection.styl nie je špecifikovaná prípona podľa sémantiky kódu predprocesora Stylus. Ak chcete zahrnúť štýly do iného rozšírenia, napríklad .css, je potrebné toto rozšírenie.

ROBIŤ

Táto stránka obsahuje hárok úloh vývoja. Viac o práci s týmto súborom si môžete prečítať na stránke doplnku PlainTasks pre Sublime Text.

Tým je inštalácia konštrukcie dokončená.

Inštalácia doplnkov pomocou správcu balíkov npm

Node.js štandardne obsahuje správcu balíkov npm, ktorého úložiská obsahujú veľa pluginov, s ktorými budeme pracovať.

Inštalácia doplnku Gulp

Najprv musíme nainštalovať Gulp globálne (s prepínačom -g) na náš systém

npm install gulp -g

Musíte to urobiť iba raz, ďalšia globálna inštalácia nie je potrebná.

Teraz musíte nainštalovať Gulp lokálne do adresára projektu

npm install gulp --save-dev

Prepínač --save-dev znamená, že informácie o doplnku (názov v úložisku a jeho verzia) sa pridajú do konfigurácie package.json a zapamätajú si ich pre tento projekt. Keďže v systéme Git neukladáme ťažký priečinok s pluginmi node_modules, informácie o nainštalovaných pluginoch uložené v konfigurácii vám umožnia nasadiť všetky potrebné pluginy v projekte iba jedným príkazom npm i.

Pre každý príkaz sú skratky, takže príkaz vyššie môžeme napísať v kratšom formáte

V budúcnosti budeme používať aj skrátený formát príkazov.

Doplnok stylusu pre Gulp

V našich projektoch používame predprocesor Stylus, ktorý funguje skvele a kompiluje sa na uzle.

Inštalácia:

npm a dúškom -D

Pluginy na spracovanie CSS

Autoprefixer- automaticky vloží predpony -ms- -o- -moz- -webkit- do požadovaných vlastností:

npm a hlt-autoprefixer -D

Minifikácia CSS- plugin minimalizuje výstupný súbor CSS, čím eliminuje zbytočné medzery a tabulátory:

npm a gulp-minify-css -D

Doplnky na spracovanie obrazu

Spájanie obrázkov do škriatkov- už nemusíte tráviť hodiny drahocenného času kombinovaním všetkých obrázkov do spritov a následným výpočtom ich súradníc, tento plugin to všetko urobí automaticky za vás:

npm i hlt.spritesmith -D

Do predtým vytvoreného súboru stylus.template.muustache pridáme masku na výpočet pozícií v spritoch:

((#items)) $((name)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/položky))

Pridajme špeciálne mixiny do mixins.styl:

SpriteWidth($sprite) šírka $sprite spriteHeight($sprite) výška $sprite spritePosition($sprite) background-position $sprite $sprite spriteImage($sprite) url obrázka na pozadí($sprite) sprite($sprite) if !match( "hover", selector()) && !match("active", selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Pripojme mixiny a vygenerovaný súbor so súradnicami k hlavnému súboru štýlov src/css/styles.styl:

@import "čiastočný/sprite" @import "čiastočný/zmiešaný"

Upozorňujeme, že súbory sprite musia byť zahrnuté pred používateľskými štýlmi @import "čiastočné/štýly"

Optimalizácia obrázkov pre web- plugin automaticky vystrihne z vašich obrázkov všetky nepotrebné informácie a skomprimuje ich na optimálnu veľkosť, čo vám v niektorých prípadoch umožní znížiť objem obrázkov až o 90 %:

npm a hlt-imagemin -D

Doplnky na spracovanie JavaScriptu

Minifikácia JS- plugin čo najviac minimalizuje váš kód JS a skracuje čas načítania:

npm i gulp-uglify -D

Sledovanie chýb JS- doplnok dôkladne skontroluje váš kód JS, aby identifikoval všetky nezrovnalosti a zobrazil ich v konzole:

npm i jshint hlt-jshint -D

Doplnky na spracovanie HTML

Zahrnuté súbory- plugin umožňuje ukladať statické časti stránky, ako je hlavička, päta, bokom atď., do samostatných súborov a spájať ich v ľubovoľnej časti iného súboru. V prípade menších zmien v hlavičke už nie je potrebné meniť desiatky, ba dokonca stovky html stránok šablóny:

npm i gulp-rigger -D

Plugin je kompatibilný aj s JS.

Pripojme vlastný JS k hlavnému súboru JS src/js/main.js s nasledujúcou konštrukciou:

//= _main.js

Do index.html zahrňme súbory header.html a footer.html

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

Iné pluginy

LiveReload- plugin eliminuje potrebu zakaždým znovu načítať stránku v prehliadači, aby ste videli zmeny, teraz sa to deje automaticky pri ukladaní zmeneného súboru:

npm i gulp-connect -D

Zabránenie pádu Gulpu- niekedy sa stane, že Gulp môže vypadnúť z režimu sledovania, ak sa vyskytnú kritické chyby (hlavne kvôli JS). Tento doplnok sa snaží udržiavať procesy Gulp spustené vždy, keď je to možné:

npm i hlt-inštalatér -D

Premenovanie súborov- najbežnejšia práca s názvami súborov. Plugin vám umožňuje úplne premenovať súbory, zmeniť príponu, pridať predpony a postfixy, napríklad previesť súbor ako style.styl na style.min.css:

npm i hlt-premenovať -D

Čistič- niekedy je potrebné úplne vyčistiť adresár zostavy, tu nám pomôže plugin:

Zdrojová mapa- aby vaše súbory zostali čitateľné prostredníctvom ladenia prehliadača po minifikácii, musíte k miniifikovaným súborom pridať zdrojovú mapu:

npm a hlt-sourcemaps -D

Pokročilé funkcie hodiniek- plugin robí hodinky inteligentnými, teraz neprepíše všetky súbory v zostave, keď sa zmení iba jeden súbor, prepíše sa konkrétny zmenený súbor, čo šetrí čas a zdroje:

npm i hlt-sledovať -D

Pozrime sa na súbor package.json

Po nainštalovaní všetkých doplnkov skontrolujte súbor package.json. Malo by to vyzerať asi takto:

( "name": "start", "version": "1.0.0", "description": "Start pack for Front-end development", "author": "Ivan Ivanov", "licence": "MIT", "dependencies": (), "devDependencies": ( "gulp": "najnovšie", "gulp-autoprefixer": "najnovšie", "gulp-connect": "najnovšie", "gulp-imagemin": "najnovšie", "jshint": "najnovšie", "jshint-stylish": "najnovšie", "gulp-jshint": "najnovšie", "gulp-minify-css": "najnovšie", "gulp-inštalatér": "najnovšie", "gulp-rename": "najnovšie", "gulp-rigger": "najnovšie", "gulp-sourcemaps": "najnovšie", "gulp-stylus": "najnovšie", "gulp-uglify": "najnovšie", "gulp-watch": "najnovšie", "gulp.spritesmith": "najnovšie", "rimraf": "najnovšie"))

Namiesto najnovších budú vo vašom prípade špecifikované konkrétne verzie nainštalovaných pluginov. Pretože Vytvárame náš štartovací balík, ktorý bude použitý v mnohých projektoch, odporúča sa tiež nahradiť hodnoty verzií najnovšími, aby sa vždy nainštalovali najnovšie verzie pluginov v projekte.

V priečinku projektu by sa mal objaviť aj adresár node_modules, v ktorom sú uložené všetky súbory doplnkov uzla. Všetky potrebné doplnky sú nainštalované, môžete prejsť na nastavenia konfigurácie Gulp.

Nastavenie gulpfile.js

gulpfile.js- toto je hlavný konfiguračný súbor nášho správcu úloh; tu budeme ukladať všetky nastavenia a príkazy.

Všetka práca s dúškom prichádza na úlohu ( Angličtinaúloha). Úloha je samostatná nezávislá funkcia s názvom. Každú úlohu je možné vyvolať samostatne.

Režim kompatibility s modernými štandardmi

Po prvé, na začiatku súboru povoľme režim kompatibility iba podľa moderných štandardov:

"používať prísne";

Môžete sa dozvedieť viac o tejto smernici.

Inicializácia doplnku

Pluginy sú inicializované s nasledujúcim konštruktom:

var initPlugin = require("názov-doplnku");

V súlade s týmto dizajnom inicializujeme všetky naše pluginy:

Var gulp = required("gulp"), //hlavný dúšok plugin stylus = require("gulp-stylus"), //prefixer stylusu preprocesora = require("gulp-autoprefixer"), //usporiadanie automatických predpôn cssmin = require( " gulp-minify-css"), //minifikácia css uglify = require("gulp-uglify"), //js minifikácia jshint = require("gulp-jshint"), //js sledovanie chýb rigger = require("gulp" -rigger"), //práca s include v html a js imagemin = require("gulp-imagemin"), //minimalizácia obrázkov spritesmith = require("gulp.spritesmith"), //zlúčenie obrázkov do spritov rimraf = require( "rimraf"), //čistenie zdrojových máp = require("gulp-sourcemaps"), //premenovanie zdrojových máp = require("gulp-rename"), //premenovanie súborov inštalatér = require("gulp-plumber"), // poistka na zastavenie gulp watch = require("gulp-watch"), //rozšírenie možností watch connect = require("gulp-connect"); //liveload

Konštanty cesty

Pre pohodlie okamžite definujme všetky cesty a masky:

Var path = ( build: ( //Tu uvádzame, kam umiestniť súbory pripravené po zostavení html: "build/", js: "build/js/", css: "build/css/", img: "build/ css/ images/", fonty: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css/čiastočné /" ), src: ( //Cesty odkiaľ získať zdroje html: "src/template/*.html", //Syntax src/template/*.html hovorí gulp, že chceme vziať všetky súbory s rozšírenie .html js: "src/ js/[^_]*.js",//V štýloch a skriptoch potrebujeme iba hlavné súbory jshint: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //Ak chceme súbory knižnice ukladať oddelene, odkomentujte riadok img: "src/css/images/**/*.*", //Syntax img/**/*.* znamená - prevziať všetky súbory všetkých prípon z priečinka a z podadresárov fonty: "src/fonts/**/*.*", contentImg: "src/img/**/ *.*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), watch: ( //Tu označíme, v ktorých súboroch chceme sledovať zmeny html: "src/ template/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/* */*.*", contentImg: "src/ img/**/*.*", fonty: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src /css/sprites/*.png" ), clean : "./build", //adresáre, ktoré možno vyčistiť outputDir: "./build" //počiatočný koreňový adresár pre spustenie miniservera);

Upozorňujeme, že môžeme použiť masky mien:

• *.js- všetky súbory s príponou js
• [^_]*.js- všetky súbory s príponou js, s výnimkou tých, ktoré začínajú podčiarkovníkom
• *.* - všetky súbory s ľubovoľnou príponou v aktuálnom adresári
• /**/*.html- všetky súbory s príponou .html v aktuálnom adresári a všetky podradené adresáre

Úloha

Teraz, keď sú zapísané všetky konštanty, môžete začať písať úlohy. Všetky úlohy majú nasledujúcu štruktúru:

Gulp.task("názov úlohy", function())( //niektoré funkcie ));

Mini-server a LiveReload

Najprv nakonfigurujeme lokálny server a LiveReload:

// Lokálny server pre vývoj gulp.task("connect", function())( connect.server(( //nastavenie konfigurácií servera root: , //koreňový adresár pre spustenie servera port: 9999, //ktorý port máme použije livereload: true //inicializácia práce LiveReload )); ));

S najväčšou pravdepodobnosťou budete často musieť pracovať na niekoľkých projektoch súčasne. Server umožňuje prevádzkovať viacero serverov súčasne, stačí si zaregistrovať vlastný port pre rôzne projekty.

Zostavte HTML

// úloha na zostavenie html gulp.task("html:build", funkcia () ( gulp.src(cesta.src.html) // Vyberte súbory pozdĺž požadovanej cesty.pipe(rigger()) // Spustite to rigger . pipe(gulp.dest(path.build.html)) //nahrajte ich do priečinka zostavy .pipe(connect.reload()) //A reštartujte náš server kvôli aktualizáciám ));

Zostavte JS

// skontrolujte chyby js a vypíšte ich do konzoly gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //vyberte súbory pozdĺž požadovanej cesty.pipe(jshint( )) //spustite to cez jshint .pipe(jshint.reporter("jshint-stylish")); //vypis chyby do konzoly )); // Vytváranie JavaScriptu gulp.task("js:build", funkcia () ( gulp.src(cesta.src.js) // Nájdite náš hlavný súbor.pipe(rigger()) // Spustite ho cez rigger .pipe( sourcemaps .init()) //Inicializácia sourcemap .pipe(uglify()) //Komprimujte naše js .pipe(sourcemaps.write()) //Napíšte mapy.pipe(rename((prípona: ".min"))) / /pridajte príponu.min do výstupného súboru.pipe(gulp.dest(cesta.build.js)) //nahrajte hotový súbor na zostavenie .pipe(connect.reload()) //A reštartujte server )) ;

Stavba sprite

Všetky obrázky, ktoré sa majú skombinovať do sprite, sú umiestnené v adresári src/css/sprites/ a po prejdení cez Gulp sa stanú jedným obrázkom sprite. Nemali by ste vkladať logá a pozadia do spritov bez jasných rozmerov.

// zostavenie spritov gulp.task("sprites:build", funkcia () ( var spriteData = gulp.src(cesta.src.sprites) // vyberte, kde sa majú obrázky skombinovať do sprite.pipe(spritesmith(( imgName) : " sprite.png", //názov obrázku sprite cssName: "sprite.styl", //názov štýlu, do ktorého ukladáme pozície obrázkov v sprite imgPath: "images/sprite.png", / /cesta, kde je sprite cssFormat: "stylus", //formát, v ktorom spracovávame pozície cssTemplate: "stylus.template.muustache", //maska ​​súboru cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name //názov každého sprite sa bude skladať z názvu súboru a konštrukcie "s-" na začiatku názvu ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites) ); // cesta kam uložíme obrázok spriteData.css.pipe(gulp.dest(cesta .build.spritesCss)); // cesta kam uložíme štýly ));

Ak chcete zobraziť sprite, stačí použiť mixin. Napríklad pre súbor lorem.png bude výber zo sprite vyzerať takto:

Lorem sprite($s-lorem)

Teraz objekt s triedou .lorem prevezme rozmery obrázka a samotný obrázok ako pozadie.

Vytvárajte statické obrázky

Statické obrázky sú obrázky používané v šablóne rozloženia.

// zostavenie statických obrázkov gulp.task("image:build", function () ( gulp.src(path.src.img) //Vyberte naše obrázky.pipe(imagemin(( //Komprimujte ich postupne: true, // kompresia.jpg svgoPluginy: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //stupeň kompresie od 0 do 7 ))) .pipe(gulp.dest(cesta). build.img)) //nahrať do zostavy .pipe(connect.reload()) //reštartovať server ));

Vytvárajte dynamické obrázky

Dynamické obrázky sú obrázky obsahu, ktoré sa budú na lokalite meniť a sú zahrnuté na úrovni šablóny len na ukážku. Môžu to byť napríklad obrázky pre správy atď.

// vytváranie dynamických obrázkov gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Komprimujte ich postupne: true, //compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //stupeň kompresie od 0 do 7 ))) .pipe(gulp.dest(path.build.contentImg)) //nahrať na zostavenie .pipe(connect.reload()) //reštartovať server ));

Zostavte CSS

// vytvorenie vlastného css gulp.task("cssOwn:build", funkcia () ( gulp.src(cesta.src.css) //Vyberte náš hlavný štýl file.pipe(sourcemaps.init()) //inicializujte soucemap . pipe(stylus(( komprimovať: true, "include css": true ))) //Skompilovať stylus .pipe(prefixer(( prehliadač: ["posledná 3 verzia", ​​"> 1%", "ie 8", "tj 7"] ))) //Pridať predpony dodávateľa.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //zapísať zdrojovú mapu .pipe(rename((prípona: ".min"))) / /pridať príponu.min k názvu výstupného súboru.pipe(gulp.dest(cesta.zostav.css)) //nahrať na zostavenie .pipe(connect.reload()) //reštartovať server ));

Samostatná úloha pre externé štýly:

// dodávateľ stavby css gulp.task("cssVendor:build", funkcia () ( gulp.src(cesta.src.cssVendor) // Vezmite priečinok dodávateľa .pipe(sourcemaps.init()) //inicializujte soucemap .pipe ( cssmin()) //Compress.pipe(sourcemaps.write()) //zapíšte zdrojovú mapu .pipe(gulp.dest(cesta.build.css)) //nahrajte na vytvorenie .pipe(connect.reload()) / / reštartujte server));

Pridajme aj úlohu na vytvorenie všeobecného CSS:

// zostavenie celého css gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

Ak potrebujete spracovať externé štýly oddelene od domácich štýlov a nahrať ich ako samostatné súbory, musíte odkomentovať riadok „cssVendor:build“

Vytvorenie písma

// zostavenie fontov gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //nahrať na zostavenie ));

Build.htaccess

// zostava htaccess gulp.task("htaccess:build", function() ( gulp.src(cesta.src.htaccess).pipe(gulp.dest(path.build.htaccess)) //odovzdať na zostavenie ));

Všeobecná konštrukcia

Aby sme nemuseli zostavovať každú časť samostatne, napíšme si úlohu pre všeobecnú zostavu:

// zostaviť všetko gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:build", "image:build", "imagescontent:build" ]);

Upratovanie stavby

Niekedy je potrebné úplne vyčistiť adresár zostavy. Tu nám pomôže nasledujúca úloha:

// vyčistí zostavovací priečinok gulp.task("clean", funkcia (cb) ( rimraf(path.clean, cb); ));

Sledujte alebo sledujte zmeny v reálnom čase

Jednou z najdôležitejších a najužitočnejších funkcií Gulp je funkcia sledovania, ktorá vám umožňuje v reálnom čase sledovať všetky zmeny vo vytvorených súboroch a v závislosti od toho vykonávať konkrétne akcie:

// sledujte gulp.task("watch", function())( //zostavte html v prípade zmeny watch(, function(event, cb) ( gulp.start("html:build"); )); // zostavenie spritov v prípade zmeny watch(, function(event, cb) ( gulp.start("sprites:build"); )); //vytvorenie kontextových obrázkov v prípade zmeny watch(, function(event, cb) ( gulp .start(" imagescontent:build"); )); //zostavenie css v prípade zmeny watch(, function(event, cb) ( gulp.start("css:build"); )); //kontrola js case of change watch(, ["jshint"]); //zostavenie js v prípade zmeny watch(, function(event, cb) ( gulp.start("js:build"); )); //zostavenie statických obrázkov v prípade zmeny watch(, function (event, cb) ( gulp.start("image:build"); )); //vytvorenie fontov v prípade zmeny watch(, function(event, cb) ( gulp.start( "fonts:build"); )) ; //zostavenie htaccess v prípade zmeny watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));

Predvolené akcie

Predvolené akcie sú úlohy, ktoré správca úloh vykoná, keď do konzoly zadáte príkaz gulp:

// predvolené akcie gulp.task("predvolené", ["zostavenie", "sledovanie", "pripojenie"]);

V našom prípade, ako obvykle, zostavíme náš projekt, povolíme režim sledovania a spustíme server.

Príkazy príkazového riadku

Všetky príkazy gulp pre príkazový riadok pozostávajú z dvoch častí: samotného príkazu gulp a názvu úlohy oddelených medzerou. Tu je zoznam príkazov použiteľných pre našu konfiguráciu:

• gulp - hlavný príkaz, spustí predvolenú úlohu
• hlt stavať - ​​stavať všetko
• gulp watch - spustenie hodiniek
• gulp clean - vyčistí adresár zostavy
• gulp connect - spustite server
• gulp html:build - zostavenie HTML
• gulp jshint:build - skontrolujte chyby v JS
• gulp js:build - zostavenie JS
• gulp sprites:build - sprite build
• gulp image:build - vytváranie statických obrázkov
• gulp imagecontent:build - vytváranie dynamických obrázkov
• gulp cssOwn:build – vlastné zostavenie CSS
• gulp cssVendor:build - zostavenie externého CSS
• gulp css:build - všeobecná zostava CSS
• gulp fonts:build - zostavenie písma
• gulp htaccess:build - build.htaccess

V tomto bode je konfigurácia gulpfile.js dokončená.

Skopírujte štartovací balík do projektu

Najprv si prejdeme konzolu v priečinku, kde vyvíjame, napríklad cd develop/example a skopírujeme všetko z adresára štartovacieho balíčka do nášho projektu cp -a ~/develop/start/. ~/develop/example/

Tento spôsob kopírovania je najpohodlnejší, pretože... presne skopíruje všetko, vrátane skrytých súborov.gitignore atď.

Záver

Pomocou tejto príručky sme pripravili štartovací balík na používanie Gulpu v našich vývojových projektoch front-end.

Tento balík je dostupný aj na GitHub

Post Scriptum

Tento článok nie je konečný a bude aktualizovaný v závislosti od zmien a vylepšení.