Nedávno Doušek získává na popularitě a je pochopitelné proč. Je to rychlejší, krásnější a jednodušší než Grunt... Často jsem s ním musel pracovat, ale vždy jsem bral hotová řešení a úplně jsem nechápal, jak to všechno udělal. Tento víkend jsem se rozhodl tento malý problém rozebrat a uzavřít. Dnes o tom budeme mluvit.

Co je Gulp?

Gulp je front-a build nástroj. Umožňuje automatizovat opakující se úkoly (vytváření a minifikace souborů CSS a JS, spouštění testů, restartování prohlížeče a další). Gulp tak urychluje a optimalizuje proces vývoje webu.

Instalace Gulp

Instalace Gulpu je dostatečně snadná. Pokud se vám něco nedaří, napište do komentářů nebo vygooglujte svůj problém. Chcete-li tedy nainstalovat, musíte provést 3 kroky:

• Nainstalujte Gulp globálně
• Nainstalujte Gulp jako devDependencies (závislosti vývoje)
• Vytvořte soubor gulpfile.js

Prvním krokem je globálně nainstalovat Gulp. Otevřete terminál a napište:

npm install --global gulp

Poté musíte nainstalovat Gulp jako devDependencies pro váš projekt. Ujistěte se, že máte soubor package.json. Pokud tam není, vytvořte jej napsáním npm init do konzole. Nyní můžete nainstalovat Gulp jako devDependencies:

npm install --save-dev gulp

Nakonec musíte vytvořit gulpfile.js v kořenovém adresáři vašeho projektu, který bude obsahovat vaše úkoly. Jako mezikrok nainstalujeme plugin gulp-util. Postup instalace pluginů:

npm install --save-dev gulp-util

Nyní je čas napsat náš první problém. Otevřete soubor gulpfile.js, který jsme právě vytvořili, a napište do něj následující:

/ * Soubor: gulpfile.js * / // shromážděte všechny naše pluginy var gulp = vyžadovat ("gulp"), gutil = vyžadovat ("gulp-util"); // vytvořte úlohu, která se spustí ve výchozím nastavení doušek. úloha ("výchozí", funkce () (vrácení gutil. log ("Gulp běží!")));

A teď stačí spustit gulp v terminálu a uvidíme něco podobného:

> gulp [12:32:08] Používání gulpfile ~ / Projects / gulp-scotch-io / gulpfile.js [12:32:08] Spouštění "výchozí" ... [12:32:08] Gulp běží! [12:32:08] Hotovo „výchozí“ po 1 ms

Přehled

Gulp sám o sobě je velmi chudý. Ale vše, co potřebujete, je odebráno v samostatných zásuvných modulech. S Gulpem dělají zázraky.

Gulp api je velmi malé a obsahuje pouze 4 funkce vyššího řádu:

• hlt.úkol
• gulp.src
• doušek.dest
• doušek.sledovat

gulp.task definuje naše úkoly. Jako argumenty bere jméno, závislosti (pole) a funkci (hlavní akce). Nemusí existovat žádné závislosti:

doušek. úkol ("mytask", funkce () (// něco udělat)); doušek. úkol ("dependenttask", ["mytask"], funkce () ( // udělat něco po dokončení "mytask". });

gulp.src ukazuje na soubory, které chceme použít. Pro přístup k souborům prostřednictvím pluginů používá .pipe.

gulp.dest ukazuje na složku, kam chceme uložit upravené soubory.

gulp.src a gulp.dest se používají pro jednoduchou kopii souborů:

doušek. úkol ("copyHtml", funkce () ( // zkopírujte všechny html soubory ze zdrojového / do veřejného / doušek. src ("zdroj / *. html"). potrubí (gulp. dest ("veřejné")); ));

Gulp má vestavěný systém odezvy na změnu souboru (gulp.watch). Tuto úlohu můžete použít ke spuštění dalších úloh, které potřebujete při změně souborů.

Chcete získat více bodů v rychlosti stránky Google? Nejste si jisti, co je přední sestava? Pak to pro vás bude zajímavé.

Co je Node.JS?

Node.JS se běžně označuje jako „severní JavaScript“. Tato platforma umožňuje psát programy pomocí syntaxe JavaScriptu.

Existují implementace pro Windows, Mac OS a Linux.

Včetně správce balíčků NPM pomocí kterého můžete instalovat balíčky.

Co je Gulp?

Gulp je balíček napsaný v Node.JS, který pomáhá webmasterům vytvářet projekty ve fázi rozvržení.

Chcete-li nainstalovat Gulp, musíte použít příkazový řádek.

Npm nainstalovat gulp

Na konci tohoto článku je soubor, který vám pomůže vytvořit typický projekt.

V tomto příkladu s použitím Gulp uděláme následující:

• Automaticky optimalizovat obrázky pro web;
• Sestavení jednoho souboru minifikovaného stylu z preprocesorů (SASS, SCSS);
• Dát dohromady jeden soubor minifikovaného skriptu.

Jak vytvořím front-end s Gulp?

Abychom pochopili, jak vše funguje, pojďme se na vše podívat krok za krokem.

Struktura je vidět na snímku obrazovky.

• Složka Assets – pro zdrojové obrázky, styly a skripty;
• Veřejná složka - v ní bude umístěn výsledek budování projektu;
• gulpfile.js - soubor, který popisuje logiku kolektoru;
• package.json je soubor, který obsahuje informace o programech a pluginech používaných ke správnému fungování Gulpu.

package.json

Obsah souboru:

("name": "gulp_project", "version": "1.0.0", "description": "Příklad", "main": "gulpfile.js", "scripts": ("test": "echo \" Chyba: není zadán žádný test \ "&& exit 1"), "autor": "Dmitriy Ilichev", "licence": "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 "))

Z tohoto souboru je zřejmé následující:

• Název projektu Gulp_project, verze a popis;
• Hlavní soubor je gulpfile.js;
• Autor projektu, licence - to vše není tak důležité a jednoduše tato pole mohou být prázdná;
• Zajímavým bodem je devDependencies. Popisuje závislosti.

Soubor lze upravovat obvyklým způsobem textový editor... Může být také vytvořen pro nový projekt pomocí příkazu npm int.

Na základě toho Node.JS chápe, že pro práci potřebujeme:

• Gulp verze 3.9.0 a vyšší pro stavbu;
• Gulp-csso verze 1.0.0 a vyšší - plugin pro minifikaci stylů (css);
• Gulp-concat verze 2.6.0 a vyšší - plugin pro sloučení více souborů do jednoho;
• Gulp-uglify verze 1.2.0 a vyšší - plugin pro minifikaci javascriptu;
• Gulp-imagemin verze 2.3.0 a vyšší - plugin pro optimalizaci obrazu;
• Gulp-sass verze 2.1.1 a vyšší je plugin pro získání css ze sass (scss).

Pokuta! Poté musíte toto vše nainstalovat. To se provádí z příkazového řádku. Když jste ve složce s projektem, musíte spustit příkaz:

Instalace Npm

Všechny potřebné informace budou převzaty z package.json.

Poté se všechno toto kouzlo objeví servisní složka node_modules.

gulpfile.js

Obsah souboru:

/ * * * Definice proměnných * * / var gulp = vyžadovat ("gulp"), // Správně Gulp JS uglify = vyžadovat ("gulp-uglify"), // minifikace JS concat = vyžadovat ("gulp-concat"), // Gulp soubory imagemin = vyžadovat ("gulp-imagemin"), // Minifikovat obrázky csso = vyžadovat ("gulp-csso"), // Minifikovat CSS sass = vyžadovat ("gulp-sass"); // Převod SASS (SCSS) na CSS / * * * Vytvořte úkoly (úkoly) * * / // Úkol "sass". Spouští se příkazem "gulp sass" gulp.task ("sass", funkce () (gulp.src (./ aktiva / styly / style.scss") // soubor, který zpracováváme.pipe (sass (). On (" error ", sass.logError)) // převést sass na css .pipe (csso ()) // minimalizovat css získané v předchozím kroku .pipe (gulp.dest (" ./ public / css / ") ); // výsledek zapíšeme na zadanou adresu)); // Úloha "js". Spouští se příkazem "gulp js" gulp.task ("js", funkce () (gulp.src ([./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/ bootstrap. min.js "," ./assets/javascripts/script.js "]) // soubory, které zpracováváme.pipe (concat (" min.js ")) // slepíme všechny JS .pipe (uglify ()) // zmenší výsledný "footcloth" .pipe (gulp.dest (./ public / js /")) // zapíše výsledek na zadanou adresu)); // Úloha "obrázky". Spouští se příkazem "gulp images" gulp.task ("images", funkce () (gulp.src (. Assets / images / ** / *") // převezme všechny soubory ve složce a jejích podsložkách.pipe ( imagemin () ) // optimalizace obrázků pro web.pipe (gulp.dest (./ public / images /")) // zápis výsledku na zadanou adresu)); // Úloha "sledovat". Spustí se příkazem "gulp watch" // Sleduje změny souborů a automaticky spouští další úlohy gulp.task ("watch", function () (// Při změně * .scss souborů ve složce a podsložkách "styles" spusťte sass task gulp. watch (./ aktiva / styly / ** / *. scss", ["sass"]); // Při změně souborů * .js ve složce a podsložkách "javascripts" spusťte js task gulp .watch (./ assets / javascripts / ** / *. js ", [" js "]); // Při změně jakýchkoli souborů ve složce " images " a podsložkách spusťte úlohu images gulp.watch (" . / aktiva / obrázky / ** / * ", ["obrázky"]);));

Hlavní rys je v úkolu hodinky... Jakmile jej jednou spustíte, můžete bezpečně pracovat se zdroji a projekt bude automaticky vytvořen pokaždé, když uložíte upravené soubory.

V důsledku toho získáme šablonu připravenou pro zveřejnění na internetu.

Úkoly lze spouštět samostatně. Ve výsledku na vás v archivu na konci článku čeká:

! Poznámkaže po rozbalení tohoto archivu budete muset nejprve spustit příkaz npm install. Tato složka obsahuje docela velký počet souborů a jejich kopírování/vkládání pokaždé je ztráta času.

Ve vazbě

Existuje spousta dalších užitečných pluginů. Například výborný šablonovací engine Jade, který výrazně zrychluje psaní html kódu, někomu může stačit MÉNĚ a podobně.

Prezentovaný příklad je pouze platforma a šablona, ​​ze které můžete rychle a bez velkých znalostí začít používat všechny tyto úžasné funkce.

Správci úloh a sestavovací systémy věci hodně urychlují automatizací kompilace, testování a dalších rutinních úkolů. Stejně jako v každé jiné oblasti je i na tomto trhu silná konkurence. Do roku 2014 mezi nimi dominoval task runner grunt, ale později se z projektu vyklubal malý tým, který se rozhodl vyrobit alternativní nástroj gulp zaměřený na budování projektu.

Abychom vám pomohli udělat správnou volbu, v rámci článku zvážíme hlavní správce úloh:

• chrochtat

a také se dotkneme dalších prostředků a způsobů montáže.

Když trochu předběhneme, řekněme, že ve WaveAccess používáme gulp. Implementace nástroje se ukázala jako velmi snadná: rodina produktů JetBrains (IDEA, WebStorm, ReSharper), kterou používáme již mnoho let, má skvělé pluginy pro práci s gulp / grunt a npm / nodejs.

Správce úloh vs. systém sestavení projektu: jaký je rozdíl?

Správce úloh- nástroj pro automatizaci úkolů. V konfiguraci běžce si můžete zapsat názvy těchto úloh; funkce, která je vykonává; pluginy pro urychlení standardních akcí, ale samotné úkoly mohou být libovolné. Například:

• Úkoly pro nasazení (zip projektu, nahrání projektu do vzdálený server atd)
• Úkoly sestavení projektu (minifikace, optimalizace, validace kódu atd.)
• Úkoly pro migraci dat atd.

Příklady takových nástrojů jsou grunt a gulp.

Sestavte systém je nástroj, který řeší pouze jeden typický úkol vytváření projektu v java skriptu, který zahrnuje:

• zřetězení,
• kontrola platnosti kódu,
• minifikace kódu atd.

Mezi takové nástroje patří Webpack, Broccoli, Brunch, Browserify a další.

Všechny takové frontendové úlohy lze automaticky provádět pomocí jiných prostředků: například pomocí npm run, o kterém si také povíme v článku.

Příklad

Zvažte soubor gulp pro vytvoření projektu:

Const gulp = vyžadovat ('gulp'); const coffee = vyžadovat ('hlt-káva'); const concat = vyžadovat („gulp-concat“); const uglify = vyžadovat ('gulp-uglify'); const imagemin = vyžadovat („gulp-imagemin“); const sourcemaps = vyžadovat („gulp-sourcemaps“); const del = vyžadovat („del“); )

Ale montáž je speciální případ velkého typického úkolu. Pro gulp můžete napsat jinou konfiguraci - například pro nasazení:

Var gulp = vyžadovat ("hlt"); var zip = vyžadovat ("gulp-zip"); var del = vyžadovat ("del"); var install = vyžadovat ("gulp-install"); var runSequence = vyžadovat ("run-sequence"); var awsLambda = vyžadovat ("node-aws-lambda"); gulp.task ("čistý", funkce (cb) (del ([./ dist", "./dist.zip"], cb);)); gulp.task ("kopírovat", funkce () (vrátit gulp.src ("index.js") .pipe (gulp.dest ("dist /"));)); gulp.task ("node-mods", funkce () (return gulp.src (./ package.json") .pipe (gulp.dest ("dist /")) .pipe (install ((výroba: true)) ));)); // Vyčistí všechny adresáře aws-sdk z node_modules. Nemusíme je // nahrávat, protože instance Lambda je již // bude mít k dispozici globálně. Gulp.task (" clean-aws-sdk ", funkce (zpětné volání) (del ([" dist / node_modules / ** / aws-sdk "], zpětné volání);)); gulp.task (" zip ", funkce () (return gulp.src ([" dist / ** / * ","! dist / package.json "]) .pipe (zip ("dist.zip")) .pipe (gulp.dest (./"));)); gulp.task ("nahrát", funkce (zpětné volání) (awsLambda.deploy (./ dist .zip ", vyžadovat (" ./ lambda-config.js "), zpětné volání);)); gulp.task (" nasadit ", funkce (zpětné volání) (vrátit runSequence ([" vyčistit "], [" zkopírovat "] , ["node-mods"], ["clean-aws-sdk"], ["zip"], ["upload"], zpětné volání);));

Nové úkoly lze popsat jako kombinace stávajících:

Gulp.task („nasadit“, gulp.series („vyčistit“, „kopírovat“, „uzel-mods“, „clean-aws-sdk“, „zip“, „nahrát“));

V tom je rozdíl. Nyní se podíváme na základní nástroje.

doušek vs. chrochtat

Takže máme dva úkoly: hlt a chrochtat. Oba používají node.js a npm a mají za úkol používat javascript.

Na první pohled jsou si podobné, ale gulp má něco, co usnadňuje montáž: schopnost zpracovávat úkoly paralelně a kompaktní konfiguraci, lakonické API. Pojďme se blíže podívat na to, jak fungují.

Streamování dat

Toto je soubor grantu, který vytváří a zpracovává CSS.

Z toho můžete vidět to chrčení při spuštění každého procesu:

otevře soubor;

spustí proces;

uloží změny;

zavře zpracovaný soubor, aby zabránil dalšímu procesu, aby do něj zasahoval;

zapíše soubor do výsledné složky.

To znamená, že řetězec zahrnuje vytváření několika dočasných složek a ukládání přechodných souborů:

Pluginy jsou napsány různými autory. Aby každý plugin mohl pracovat se soubory a obejít ukládání, musí být soubory reprezentovány jako objekty. V doušku tento úkol provádí virtuál souborový systém Vynyl-FS. A gulp okamžitě předá soubor dalšímu procesu bez vytváření dočasných souborů a bez ukládání na disk.

Stejná konfigurace pro gulp je kompaktnější:

Jeho obecným mechanismem činnosti je streamování zpracování souborů bez zápisu na disk:

Posloupnost úkolů

Existuje další rozdíl: gulp ve výchozím nastavení provádí úlohy asynchronně. To má své klady i zápory. Ve stejném konfiguračním souboru dáváme pokyn ke čtení souborů z adresáře dev / * scss a jejich odeslání do SASS.

Proudy pošlou výsledek do .pipe. Metoda .pipe umožňuje shromažďovat výsledek do vyrovnávací paměti po částech, a když je plná, okamžitě odeslat informace do proudu ke čtení, než dokončí příjem obsahu adresáře.

Díky sekvenčnímu provádění úkolů je hlt rychlý a výkonný, ale občas je nutné provádět úkoly synchronně, jako v gruntu. Problém lze vyřešit zpětným voláním, vrácením proudu nebo příslibem. Úkol je podrobněji rozebrán na Habrém. Na samotném webu npm.js je také alternativní možnost

Pokud používáte grunt, ale láká vás streamování dat, lze stejný modul Vynyl-FS použít k jeho implementaci do gruntu.

Laconické hlt API má pouze 5 metod:

Úkol (jméno, fn). Registruje funkci s názvem. Můžete určit závislost na jiných úlohách, pokud je potřebujete provést jako první.

Spustit (úkoly ...). Plní úkoly.

Sledujte (glob, fn). Provede funkci, pokud se změní soubor na místě glob.

Src (glob). Jako parametr bere masku souboru a vrací proud představující tyto soubory. Stream pak může být předán pluginům jako vstup.

Dest (složka). Uloží soubory do zadané složky.

Zvláště bych rád poznamenal přítomnost .watch () v „nativním“ API projektu, protože sledování neustálých změn souborů je nejdůležitější součástí sestavy. Stručnost API umožňuje tomuto správci úloh soustředit se na svůj hlavní úkol – budování projektů.

Alternativy hltat a chrochtat

Navzdory oblibě gulp (více než 130 stažení za den) a gruntu (více než 86 stažení za den podle npmjs.com) vidí vývojáři v těchto systémech jejich nevýhody: například závislost na pluginech, neúplná dokumentace, nepohodlné ladění. Případně zvažte systémy sestavení projektu (jako je Broccoli a Webpack) nebo skripty npm.

Systémy sestavení projektu

Zvažme několik alternativních řešení na platformě Node.js. Chcete-li postavit projekt, mohou nahradit hlty a chrochtání.

Tento systém podobně jako gulp vznikl jako konkurence task runner gruntu, ale vývojáři jej původně pojali jako build assistant se všemi výhodami i nevýhodami. Bez nastavení „pochopí“, že * .js je soubor se skripty, * .coffee je CoffeeScript; jeho konfigurace je kompaktnější. Ve fázi montáže však nebude moci provádět žádné svévolné akce.

Zde je konfigurační soubor Brunch. Je napsán v CoffeeScript (můžete také psát v JS):

Exports.config = soubory: javascripts: joinTo: "javascripts / app.js": / ^ app / "javascripts / vendor.js": / ^ (bower_components | dodavatel) / styly: joinTo: "stylesheets / app.css" objednávka : after: ["vendor / styles / helpers.css"] templates: joinTo: "javascripts / app.js"

Zde bych se chtěl věnovat operátorům joinTo a objednat. Na úrovni konfigurace Brunch chápe, že bude muset sbírat soubory ve správném pořadí. Výsledkem je, že konfigurace zabere 20-30 řádků.

Brokolice

Nezávislý nástroj ve vývoji. Jeho vývojáři chtěli vytvořit konkurenci pro doušek.

Ve srovnání s hltem používá nástroj Brokolice jiné principy:

Urychlení montáže. Každý plugin implementuje přechodné ukládání výsledků sestavení do mezipaměti namísto částečného přestavby pouze souborů, které potřebujete.

Stromy místo souborů. Gulp je nejlepší v transformaci jednoho souboru na jeden konečný soubor. Broccolli standardně používá pouze stromy, nikoli soubory, a převádí je na jiné stromy (degenerované z jednoho vrcholu).

V současné době se nástroj aktivně vyvíjí, objevují se nové pluginy, ale je příliš brzy na to, abychom jej používali pro seriózní projekty: zatím není dostatek pluginů.

Webpack je flexibilní modulární systém sestavování. Má neobvyklou syntaxi, ale sám přijímá jakoukoli syntaxi modulů.

Tvůrci si uvědomili, že budou muset soutěžit s takovými giganty, jako je gulp, a rozhodli se nám usnadnit život při vývoji velkých projektů. A do utility přidáno:

Schopnost automaticky vytvořit strom závislostí a zdrojů.

Pohodlné nástroje pro implementaci dynamického zatížení.

Kompatibilní s téměř všemi moduly (AMD, UMD, ES 2015, Common JS, moduly třetích stran na nich založené).

Kompatibilní s preprocesory (SASS, Babel, Coffee Script, Type Script atd.).

Live Reload (technologie asynchronního načítání, při které prohlížeč neobnovuje celé stránky, ale jednotlivé aplikace).

Schopnost rozdělit kód a generovat více souborů svazků, čímž se vyhnete vytvoření jednoho těžkého svazku.js.

Schopnost optimalizovat kód.

Samostatně lze zaznamenat flexibilní přístup k závislostem. Modul může být soubor JS, CSS a HTML a dokonce i JPEG s PNG. Můžete použít vyžadovat („myJSfile.js“) a vyžadovat („myCSSfile.css“), sdílet a znovu používat části artefaktu.

Více podrobností o funkcích, konfiguraci nástrojů, pluginech najdete na Github, v prezentaci s Fronttalks: Webpack Deep Dive.

skripty npm

Úlohy sestavení lze také řešit pomocí skriptů npm. Mnozí se této myšlenky bojí: málo funkcí, skripty nejsou dostatečně rychlé ve srovnání s gulp nebo Webpack. Tyto nedostatky jsou však přehnané.

Možnosti npm skriptů

Npm skripty dělají spoustu věcí. Můžete tedy například implementovat hákové skripty:

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("prebuild": "echo, které spustím před sestavovacím skriptem "," build ":" cross-env NODE_ENV = produkční webový balíček "" postbuild ":" echo spustím po sestavení skriptu "))

Skripty se načtou v pořadí podle prefixů: prebuild se například spustí před sestavením, protože má prefix prefix. Podle toho bude postbuild načten jako poslední. Příkaz npm run build je spustí ve správném pořadí.

Můžete volat jeden skript z jiného, ​​aby se rozložil náročné úkoly... Například zde úloha předsestavení volá úlohu čištění.

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("clean": "rimraf ./dist && mkdir dist "," prebuild ":" npm run clean "," build ":" cross-env NODE_ENV = production webpack "))

Pokud se úloha stane příliš složitou, můžete vždy zavolat samostatný soubor:

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("build": "node build.js"))

Díky streamování je hlt při sestavování mnohem pohodlnější než grunt. Ale lze to implementovat i přes npm. V systémech Windows a Unix se streamování provádí standardně bez ukládání mezilehlých souborů.

Například na Unixu můžete grepovat obsah souboru a přenést jej do nového souboru:

Grep „Moje jméno“ bigFile.txt> lines ThatHaveMyName.txt

Přesměrování (>) nasměruje požadované řádky do konečného souboru. Úloha se provede bez uložení mezilehlých souborů.

Existují však některé nepříjemnosti: v package.json nemůžete zanechat komentáře. Řešením může být vytvoření krátkých skriptů s jasnými názvy, zaměřených na nějaký malý úkol. Podrobněji je problematika nahrazení task runnerů skripty npm dobře popsána v anglicky psaném článku Why I Left Gulp and Grunt for npm Scripts.

Výsledek

Na trhu existuje velká konkurence nástrojů pro automatizaci rutinních úkolů (například gulp a grunt), stejně jako nástrojů pro automatizaci sestavování projektů (Webpack, Broccoli, Medusa, Browserify atd.).

Pokud se podíváte na task runners, gulp je jednodušší, srozumitelnější a efektivnější než grunt: těží z úspor na diskových operacích. Grunt má ale pluginů více (např. existuje plugin na testování). Díky tomu má spoustu fanoušků.

Pokud mluvíme pouze o montáži, pak má gulp oproti gruntu všechny výhody:

Streamingová architektura pro řetězové přenosy souborů poskytovaná modulem Vynyl-FS.

Výchozí nastavení je provádět úlohy asynchronně.

Stručné API pouze 5 funkcí.

Webpack je přitom neméně zajímavým nástrojem pro budování. Obsahuje technologii Live Reload pro urychlení obnovy prohlížeče. To je obrovské plus: technologie šetří čas stisknutím tlačítka pro obnovení, které musí vývojáři neustále mačkat. Gulp má také Live Reload, ale Webpack je těžké srovnávat s hltem nebo gruntem, protože je "naostřený" pouze pro sestavení a nemůže "řešit" libovolné úkoly.

Všechna tato řešení se perfektně integrují do rodiny produktů od JetBrains, nicméně my ve WaveAccess jsme upřednostnili grunt pro široké možnosti jak pro designéry layoutů, tak pro front-end specialisty.

Pokud máte nějaké dotazy a potřebujete vytvořit webový projekt, napište nám na [e-mail chráněný]

• Frontend
• Grunt
• Doušek
• Průběžci úkolů

V tomto článku podrobně rozebereme proces budování frontendového projektu, který se zakořenil v mé každodenní práci a značně usnadnil rutinu.
Článek si nečiní nárok na konečnou pravdu, protože dnes existuje velké množství různých sestavovačů a montážních přístupů a každý si vybere podle chuti. Jen se podělím o své myšlenky na toto téma a ukážu svůj pracovní postup.

Budeme používat sběrač Gulp. V souladu s tím musíte mít ve svém systému nainstalovaný Node js. Nebudeme uvažovat o instalaci uzlu pro konkrétní platformu, protože je vygooglováno za pár minut.
A nejprve odpovím na otázku - proč Gulp?
Z víceméně únosných alternativ tu máme Grunt a Brunch.
Když jsem poprvé začal s kompilátory, Grunt i Gulp již byly na trhu. První se objevil dříve, a proto má větší komunitu a různé pluginy. Podle npm:
Grunt - 11171 balíků
Gulp - balíček 4371

Ale Grunt mi přišel příliš mnohomluvný. A po přečtení několika srovnávacích článků jsem dal přednost Gulpu pro jeho jednoduchost a přehlednost.
Brunch je poměrně mladý projekt se všemi výhodami i nevýhodami, které z toho plynou. Se zájmem to sleduji, ale zatím jsem to ve své práci nepoužil.

Začněme:

Vytvořme si složku pro náš projekt, například „habr“. Otevřeme jej v konzole a provedeme příkaz

Npm init

Na všechny dotazy instalátoru stačí stisknout Enter. teď už je to jedno.
V důsledku toho se ve složce s projektem vygeneruje soubor package.json, přibližně s následujícím obsahem

("name": "habr", "version": "1.0.0", "description": "", "main": "index.js", "scripts": ("test": "echo" Chyba: není zadán test "&& exit 1"), "autor": "", "licence": "ISC")

Pojďme to trochu upravit, aby vyhovovalo našim potřebám:

("name": "habr", "version": "1.0.0", "description": "", "author": "", "licence": "ISC", "devDependencies": ("gulp": "^ 3.8.1"))

v bloku devDependencies jsme uvedli, že potřebujeme gulp a okamžitě zaregistrujeme všechny naše pluginy.

Pluginy:

Se styly to dělám stejně jako s js, ale místo riggeru "a - používám vestavěný import SCSS.
Náš main.scss bude vypadat takto:

/ * * Třetí strana * / @import "CSS: ../../ bower_components / normalize.css / normalize.css"; / * * Vlastní * / @import "části / aplikace";

Tímto způsobem můžete snadno spravovat pořadí, ve kterém jsou styly zahrnuty.
Pojďme zkontrolovat náš úkol spuštěním

Styl doušku: stavět

Sbírání obrázků

Obrazová úloha bude vypadat takto:

Gulp.task ("image: build", function () (gulp.src (path.src.img) // Vyberte naše images.pipe (imagemin ((// Compress them progressive: true, svgoPlugins: [(removeViewBox: false) )], use:, interlaced: true))) .pipe (gulp.dest (path.build.img)) // A hodí to do build .pipe (connect.reload ());));

Používám výchozí nastavení imagemin, kromě prokládaného. Můžete si přečíst více o API tohoto pluginu.
Nyní, když vložíme nějaký obrázek do src / img a spustíme příkaz

Obrázek doušku: build

pak uvidíme náš optimalizovaný obrázek v buildu. Gulp také laskavě napíše do konzole, kolik místa ušetřil uživatelům našeho webu :)

Písma

S fonty obvykle nepotřebuji provádět žádné manipulace, ale abych neporušil paradigma "Pracujeme v src / a vestavíme sestavení /" - pouze zkopíruji soubory z fontů src / a vložím je do build / fonty. Zde je úkol

Gulp.task ("fonts: build", funkce () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts))));

Nyní definujeme úlohu nazvanou "build", která spustí vše, co jsme zde udělali.

Gulp.task ("build", ["html: build", "js: build", "style: build", "fonts: build", "image: build"]);

Změny souborů

Abychom nelezli pořád do konzole, požádejme gulpa, aby při každé změně souboru spustil požadovanou úlohu. Chcete-li to provést, napište následující úkol:

Gulp.task ("watch", function () (watch (, function (event, cb) (gulp.start ("html: build"));)); watch (, function (event, cb) (gulp.start ( "style: build");)); watch (, function (event, cb) (gulp.start ("js: build");)); watch (, function (event, cb) (gulp.start ("image : build ");)); watch (, function (event, cb) (gulp.start (" fonts: build ");));));

Chápeme, že by neměly být žádné problémy. Prostě sledujeme naše cesty definované v proměnné path a ve funkci volané při změně souboru požádáme o spuštění úlohy, kterou potřebujeme.
Zkuste spustit v konzoli

Gulp hodinky

a měnit různé soubory.
No, není to cool?)

webový server

Abychom si užili zázrak Liverpoolu - musíme si vytvořit místní webový server. K tomu napíšeme následující úkol:

Gulp.task ("webserver", funkce () (connect.server ((hostitel: server.host, port: server.port, livereload: true));));

Není ani co komentovat. Prostě spustíme server s livereloadem na hostiteli a portu, který jsme definovali v objektu serveru.

Čištění

Pokud přidáte jakýkoli obrázek, spusťte úlohu image: build a poté obrázek odstraňte – zůstane ve složce build. Bylo by tedy vhodné jej pravidelně čistit. Vytvořme si k tomu jednoduchý úkol.

Gulp.task ("čistý", funkce (cb) (rimraf (cesta.čistý, cb);));

Nyní, když spustíte příkaz

Doušek čistý

smaže pouze složku sestavení.

A na závěr trocha milosti

Tento úkol nemá kritické funkce, ale opravdu se mi líbí :)

Gulp.task ("openbrowser", funkce () (opn ("http: //" + server.host + ":" + server.port + "/ build");));

Až to budeme potřebovat, spustíme to – a v prohlížeči se nám automaticky otevře karta s naším projektem.
Chladný :)

Závěrečný akord

Poslední věc, kterou musíme udělat, je definovat výchozí úlohu, která spustí celé naše sestavení.

Gulp.task ("výchozí", ["sestavit", "webový server", "sledovat", "otevřený prohlížeč"]);

Vaše finální gulpfile.js bude vypadat nějak takto.
Nyní provedeme v konzole

A voila :) Prázdné místo pro váš projekt je připraveno a čeká na vás.

Pár slov na závěr

Tento článek byl koncipován jako způsob, jak znovu oprášit složitosti budování frontendových projektů a snadno přenést tyto zkušenosti na nové vývojáře. Tuto možnost sestavení nemusíte u svých projektů používat. Existuje yeoman.io, kde najdete generátory pro téměř jakoukoli potřebu.
Tohoto sběratele jsem napsal ze dvou důvodů.
- Rád používám rigger ve svém html kód
- Téměř ve všech sestavách, se kterými jsem se setkal, se používá dočasná složka (obvykle .tmp /), pro nahrávání mezivýsledky shromáždění. Tento přístup se mi nelíbí a chtěl jsem se zbavit dočasných složek.
- A nejradši bych to měl všechno po vybalení :)

Moji pracovní verzi kolektoru si můžete stáhnout na mém githubu.

Doufám, že vám článek pomohl :)

P.S. o všech chybách, nedostatcích a zásekech - napište prosím osobně

Gentleman's Front-end Developer's Kit

Není žádným tajemstvím, že moderní front-end vývojář musí mít ve výzbroji některý z nástrojů pro montáž projektu, jako např. Doušek nebo Grunt... Až do určité doby měl Grunt v této otázce monopol, ale skupina vývojářů oddělená od Grunt se rozhodla vytvořit svůj vlastní lehký a rychlý správce úloh Gulp.

V tomto článku připravíme startovací balíček od začátku pro použití v budoucích projektech.

Jaké technologie používáme

• Softwarová platforma: Node.js
• Předprocesor CSS: Stylus
• Správce úloh: Doušek

Proč frontend potřebuje správce úloh

Sám jsem si donedávna říkal, proč musím trávit čas nastavováním konfigurace správce úloh, když už dělám dobrou práci s rozložením, dokud jsem nezačal používat předprocesory CSS.

CSS pre-procesory jsou opravdu pohodlné a urychlují zápis stylů, ale kompilace kódu napsaného na pre-procesoru do běžného CSS není úplně triviální úkol, který lze vyřešit jedním tlačítkem. Zde nám přichází na pomoc správce úloh. Konverze kódu neprobíhá stisknutím tlačítka, vše probíhá online bez vaší účasti (samozřejmě pokud je vše správně nakonfigurováno).

Úkoly správce úloh samozřejmě dalece přesahují procesy spojené s převodem pre-procesorového kódu do čistého CSS. Tvůrce projektu se také zabývá minifikací, zřetězením, kontrolou chyb v kódu, sestavováním obrázků do sprite, optimalizací obrázků pro web atd. Jednoduše si ve svém projektu vytvoříte sadu logicky oddělených souborů, které se pak pohodlně shromáždí do jednoho adresáře, již zpracované a připravené k práci v prohlížeči. Ale o tom později a nyní začneme s přípravou.

Instalace Node.js

Pokud víte, jak nainstalovat node.js na váš systém a používat jej, klidně přeskočte na další nadpis.

Rád bych vás hned upozornil, že všechny popsané akce jsou relevantní pro Mac OS X ale obecně použitelné pro ostatní Unix systémy. Vývoj pomocí správce úloh a příkazového řádku Okna poněkud obtížnější a nebude zde popisován. Pokud však stále používáte systém Windows a nejste připraveni jej opustit, mohu navrhnout případ použití virtuální stroj se zavedeným Ubuntu, používám tuto možnost na svém domácím systému, což je celkově docela pohodlné.

Nejprve si tedy musíme stáhnout a nainstalovat balíček node.js do našeho systému, abychom mohli s uzlem pracovat prostřednictvím konzole. Přejděte na oficiální stránku node.js a stáhněte si nejnovější stabilní verzi pro váš systém. Po instalaci by měl být příkaz node dostupný na příkazovém řádku. Chcete-li zkontrolovat, zda váš uzel funguje, zadejte příkaz do příkazového řádku

jako odpověď by se měla objevit verze nainstalovaného node.js. Pokud je vše v pořádku, pokračujte.

Struktura adresářů projektu

V našich projektech budeme používat jednotnou verzi struktury:

Rozvíjet - vývojový kořenový adresář└─ začít - adresář projektu├─stavět - sestavení sestavené správcem úloh├─zdroj - všechny zdrojové soubory pro vývoj (.psd atd.)├─src - vývojový adresář│├─css - adresář vývoje stylu││├─obrázky - všechny statické obrázky││├─skřítci - obrázek shromážděný ve spritu││├─částečné - vlastní soubory styly│││├─mixins.styl - zakázkové mixy│││└─styly.styl - vlastní styly││├─prodejce - ostatní externí soubory styly││└─styly.styl - soubor hlavního stylu│├─písma - adresář písem│├─obr - katalog dynamické obrázky │├─js - Vývojový adresář JavaScriptu││├─ _ *. Js - postranní soubory js││├─_main.js - základní vlastní js││└─main.js - hlavní soubor js│├─.htaccess - konfigurace serveru│├─ * .html - soubory se značkami stránek│├─pages.html - soubor s odkazy na všechny stránky šablony│├─index.html - soubor značek indexové stránky│└─ patří - adresář zahrnutých značkovacích souborů│ └─ * .html - zahrnout značkovací soubory (header.html atd.)├─package.json - Konfigurace správce balíčků npm├─gulpfile.js - Konfigurace Gulp├─stylus.šablona.knír - maska ​​pro čtení skřítků├─TODO - list úkolů└─.gitignore - konfigurace pro Git

Instalace

V konzole pomocí příkazu cd přejděte do kořenového adresáře vývoje, vytvořte adresář pro náš startovací projekt mkdir a přejděte do něj.

Nastavíme naši strukturu projektu prostřednictvím konzole:

mkdir zdroj sestavení src src / css src / css / obrázky src / css / sprites src / css / částečný src / css / dodavatel src / js src / šablona src / šablona / zahrnout src / img src / fonty

Vytvořme počáteční soubory ve struktuře projektu:

touch gulpfile.js stylus.template.mustache .gitignore src / .htaccess src / TODO src / css / styles.styl src / css / částečné / styles.styl src / css / částečné / 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

Vytvoříme package.json

na všechny vyskakovací otázky lze kliknout pomocí Enter, uzel nastaví jejich výchozí hodnoty nebo vyplní navrhovaná pole.

.gitignore

Řekneme gitě, které adresáře má ignorovat a nenahrát do úložiště:

/ node_modules / / build / / resource /

Adresář node_modules se objeví později po instalaci pluginů a bude obsahovat všechny node pluginy projektu.

src / .htaccess

Nainstalujte další kompresi gzip a ukládání do mezipaměti pro server:

AddOutputFilterByType DEFLATE text / html text / prostý text / xml text / css text / javascriptová aplikace / javascript # Poskytujte komprimované CSS soubory gzip, pokud existují # a klient přijímá gzip. RewriteCond "% (HTTP: Accept-encoding)" "gzip" RewriteCond "% (REQUEST_FILENAME) \. Gz" -s RewriteRule "^ (. *) \. Css" "$ 1 \ .css \ .gz" # Poskytovat gzip komprimované soubory JS, pokud existují # a klient přijímá gzip. RewriteCond "% (HTTP: Accept-encoding)" "gzip" RewriteCond "% (REQUEST_FILENAME) \. Gz" -s RewriteRule "^ (. *) \. Js" "$ 1 \ .js \ .gz" # Podávat správně typy obsahu a zabraňte dvojitému gzip mod_deflát. RewriteRule "\ .css \ .gz $" "-" RewriteRule "\ .js \ .gz $" "-" # Poskytujte správný typ kódování. Header append Kódování obsahu gzip # Vynutit proxy ukládat do mezipaměti soubory gzip a # nezazipované css / js soubory samostatně. Připojit záhlaví Vary Accept-Encoding ExpiresActive na aplikaci ExpiresByType / javascript "přístup plus 1 měsíc" ExpiresByType obrázek / jpg "přístup plus 1 měsíc" ExpiresByType obrázek / jpeg "přístup plus 1 měsíc" ExpiresByType obrázek / gif "přístup plus 1 měsíc" ExpiresByType obrázek měsíc "ExpiresByType text / css" přístup plus 1 měsíce "

src / css / styles.styl

Pojďme zahrnout soubory vlastních stylů do hlavního souboru stylu:

@import "částečné / styly"

Všimněte si, že pro soubory .styl není přípona specifikována podle sémantiky kódu předprocesoru Stylus. Chcete-li zahrnout styly do jiného rozšíření, např. css, je vyžadováno druhé rozšíření.

DĚLAT

Tato stránka obsahuje vývojový list úkolů. Více o práci s tímto souborem si můžete přečíst na stránce pluginu PlainTasks pro Sublime Text.

Tím je instalace konstrukce dokončena.

Instalace pluginů přes správce balíčků npm

Node.js standardně obsahuje správce balíčků npm, který má ve svých úložištích spoustu pluginů, se kterými musíme pracovat.

Instalace pluginu Gulp

Nejprve musíte nainstalovat Gulp globálně (s přepínačem -g) na náš systém.

npm install gulp -g

Musíte to udělat jednou., není nutná další globální instalace.

Nyní musíte nainstalovat Gulp lokálně do adresáře vašeho projektu

npm install gulp --save-dev

Přepínač --save-dev říká, že informace o pluginu (název v úložišti a jeho verze) budou přidány do konfigurace package.json a budou si je pamatovat pro tento projekt. Vzhledem k tomu, že v gita neukládáme těžkou složku s pluginy node_modules, informace o nainstalovaných pluginech uložené v konfiguraci umožní pouze jeden příkaz npm i nasadit všechny potřebné pluginy v projektu.

U každého příkazu jsou zkratky, takže výše uvedený příkaz můžeme napsat v kratším formátu

V budoucnu budeme používat také zkrácený formát příkazů.

Stylus plugin pro Gulp

V našich projektech používáme pre-procesor Stylus, který funguje skvěle a kompiluje se na uzlu.

Nainstalujte:

npm i douškem -D

CSS pluginy

Automatická předpona- automaticky nahradí předpony -ms- -o- -moz- -webkit- v požadovaných vlastnostech:

npm i gulp-autoprefixer -D

Minifikaci CSS- plugin minimalizuje výstupní soubor CSS a eliminuje zbytečné mezery a tabulátory:

npm i gulp-minify-css -D

Pluginy pro zpracování obrazu

Spojování obrázků do skřítků- již nemusíte trávit hodiny drahocenného času kombinováním všech obrázků do skřítků a následným výpočtem jejich souřadnic, tento plugin to vše automaticky udělá za vás:

npm i doušek.spritesmith -D

Přidejte masku pro výpočet pozic ve spritech do dříve vytvořeného souboru stylus.template.muustache:

((#items)) $ ((název)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/ položek))

Pojďme přidat vlastní mixiny do mixins.styl:

SpriteWidth ($ sprite) šířka $ sprite spriteVýška ($ sprite) výška $ sprite spritePosition ($ sprite) pozice na pozadí $ sprite $ sprite spriteImage ($ sprite) url obrázku na pozadí ($ sprite) sprite ($ sprite) pokud! "hover", selector ()) &&! match ("active", selector ()) spriteImage ($ sprite) spritePosition ($ sprite) spriteWidth ($ sprite) spriteHeight ($ sprite)

Propojme mixiny a vygenerovaný soubor se souřadnicemi s hlavním stylem src / css / styles.styl:

@import "částečný / sprite" @import "částečný / smíšený"

Vezměte prosím na vědomí, že soubory sprite musí být zahrnuty před vlastními styly @import "částečné / styly"

Optimalizace obrázků pro web- plugin automaticky vyjme z vašich obrázků všechny nepotřebné informace a zkomprimuje je na optimální velikost, což v některých případech umožní snížit objem obrázků až o 90 %:

npm i gulp-imagemin -D

Pluginy pro zpracování JavaScriptu

Minifikaci JS- plugin co nejvíce minimalizuje váš kód JS a zkracuje dobu načítání:

npm i hlt-uglify -D

Sledování chyb JS- plugin důkladně zkontroluje váš kód JS, aby identifikoval všechny nesrovnalosti a zobrazí je v konzole:

npm i jshint doušek-jshint -D

Pluginy pro zpracování HTML

Zahrnout soubory- plugin umožňuje ukládat statické části webu, jako je záhlaví, zápatí, stranou atd., do samostatných souborů a zahrnout je do jakékoli části jiného souboru. Již není potřeba v případě drobných změn v záhlaví měnit desítky či dokonce stovky html stránek šablony:

npm i gulp-rigger -D

Plugin je také kompatibilní s JS.

Pojďme zahrnout vlastní JS do hlavního souboru JS src / js / main.js s konstrukcí:

// = _main.js

Zahrnout soubory header.html a footer.html do index.html

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

Jiné pluginy

LiveReload- plugin vám ušetří nutnost pokaždé znovu načítat stránku v prohlížeči, abyste viděli změny, nyní se to stane automaticky, když uložíte změněný soubor:

npm i gulp-connect -D

Zabránění pádu Gulpu- někdy se stává, že Gulp může vypadnout z režimu sledování v případě kritických chyb (hlavně kvůli JS). Tento plugin se snaží udržet procesy Gulp spuštěné, kdykoli je to možné:

npm i hlt-instalatér -D

Přejmenování souborů- nejběžnější práce s názvy souborů. Plugin umožňuje zcela přejmenovat soubory, změnit příponu, přidat předpony a postfixy, například přenést soubor jako style.styl do style.min.css:

npm i hlt-přejmenovat -D

Čistič- někdy je potřeba kompletně vyčistit adresář sestavení, zde nám přichází na pomoc plugin:

Zdrojová mapa- aby vaše soubory zůstaly čitelné prostřednictvím ladění prohlížečem po minifikaci, musíte k minifikovaným souborům přidat zdrojovou mapu:

npm i gulp-sourcemaps -D

Pokročilé funkce hodinek- plugin dělá hodinky chytrými, nyní nepřepisuje všechny soubory v sestavení, když se změní pouze jeden soubor, přepíše se konkrétní změněný soubor, což šetří čas a prostředky:

npm i hlt-sledovat -D

Zkontrolujte soubor package.json

Po všem nainstalované pluginy, podívejme se na soubor package.json. Mělo by to vypadat nějak takto:

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

Místo nejnovějších se ve vašem případě zaregistrují konkrétní verze nainstalovaných pluginů. Protože tvoříme náš startovací balíček, který bude použit v mnoha projektech, doporučuje se také nahradit hodnoty verzí nejnovějšími, aby se vždy nainstalovaly nejnovější verze pluginů v projektu.

Adresář node_modules by se měl také objevit ve složce projektu, která obsahuje všechny soubory zásuvných modulů uzlu. Všechny potřebné pluginy jsou nainstalovány, můžete přejít do nastavení konfigurace Gulp.

Nastavení gulpfile.js

gulpfile.js- toto je hlavní konfigurační soubor našeho správce úloh, v něm budeme ukládat všechna nastavení a příkazy.

Veškerá práce Gulpu se scvrkává na úkol ( Angličtinaúkol). Úloha je samostatná, samostatná funkce pojmenovaná. Každý úkol lze volat samostatně.

Režim souladu s moderními standardy

Nejprve na začátku souboru připojte režim kompatibility pouze podle moderních standardů:

"použít přísné";

Více o této směrnici si můžete přečíst.

Inicializace pluginu

Pluginy jsou inicializovány s následující konstrukcí:

var initPlugin = vyžadovat ("název-pluginu");

V souladu s touto konstrukcí inicializujeme všechny naše pluginy:

Var gulp = vyžadovat ("gulp"), // hlavní plugin gulp stylus = vyžadovat ("gulp-stylus"), // prefixer preprocesoru stylusu = vyžadovat ("gulp-autoprefixer"), // přidání automatických předpon cssmin = vyžadovat (" gulp-minify-css "), // minify css uglify = vyžadovat (" gulp-uglify "), // minify js jshint = vyžadovat (" gulp-jshint "), // sledovat chyby v js rigger = vyžadovat ( " gulp -rigger "), // práce s inkluzemi v html a js imagemin = vyžadovat (" gulp-imagemin "), // minimalizace obrázků spritesmith = vyžadovat (" gulp.spritesmith "), // kombinování obrázků do skřítků rimraf = vyžadovat ( "rimraf"), // vyčištění sourcemaps = vyžadovat ("gulp-sourcemaps"), // přejmenovat zdrojové mapy = vyžadovat ("gulp-rename"), // přejmenovat soubory instalatér = vyžadovat ("gulp-plumber"), // ochrana pro zastavení galp watch = require ("gulp-watch"), // rozšíření možností watch connect = require ("gulp-connect"); // zatížení jater

Konstanty dráhy

Pro usnadnění okamžitě definujeme všechny cesty a masky:

Var path = (build: (// Zde uvádíme, kam umístit soubory připravené po sestavení html: "build /", js: "build / js /", css: "build / css /", img: "build / css / images / ", fonts:" build / fonts / ", htaccess:" build / ", contentImg:" build / img / ", sprites:" src / css / images / ", spritesCss:" src / css / částečné / "), src: (// Odkud získat zdroje html: "src / template / *. html", // Syntaxe src / template / *. html říká gulp, že chceme vzít všechny soubory s příponou . html rozšíření js: "src / js / [^ _] *. js ", // Ve stylech a skriptech potřebujeme pouze hlavní soubory jshint:" src / js / *. js ", css:" src / css / styles.styl ", cssVendor:" src /css/vendor/*.* ", // Pokud chceme soubory knihovny uložit samostatně, odkomentujte řádek img:" src / css / images /**/*.* ", // Syntaxe img /**/*.* znamená - vzít všechny soubory všech přípon ze složky a z podadresářů fonts: "src / fonts /**/*.*", contentImg: "src / img / **/*.*", sprites: "src / css / sprites / *. png ", htaccess:" src / .htaccess "), sledujte: (// Zde uvedeme po změně které soubory chceme sledovat html: "src / template / ** / *. html", js: "src / js / ** / *. js", css: "src / css /**/*.* ", img: "src / css / obrázky /**/*.*", contentImg: "src / img /**/*.*", fonty: "src / fonts /**/*.*", htaccess : " src / .htaccess ", sprites:" src / css / sprites / *. png "), clean:" ./build ", // adresáře, které lze vyčistit outputDir:" ./build "// počáteční kořenový adresář pro spuštění miniserveru);

Všimněte si, že můžeme použít masky jmen:

• * .js- všechny soubory s příponou js
• [^ _] *. js- všechny soubory s příponou js, kromě těch, které začínají podtržítkem
• *.* - všechny soubory s libovolnou příponou v aktuálním adresáři
• /**/*.html- všechny soubory s příponou .html v aktuálním adresáři a všechny podřízené adresáře

Úkol

Nyní, když jsou všechny konstanty napsány, můžete začít psát úkoly. Všechny úkoly mají následující strukturu:

Gulp.task ("název úkolu", funkce () (// některé funkce));

Mini Server a LiveReload

Nejprve nakonfigurujeme práci místního serveru a LiveReload:

// Místní server pro vývoj gulp.task ("připojit", funkce () (připojit.server ((// nastavit server configs root:, // kořenový adresář serveru start port: 9999, // jaký port použijeme livereload: true / / inicializovat práci LiveReload));));

S největší pravděpodobností budete často muset pracovat současně na několika projektech najednou. Server vám umožňuje provozovat mnoho serverů současně, stačí zaregistrovat váš port pro různé projekty.

sestavení HTML

// task for html building gulp.task ("html: build", function () (gulp.src (path.src.html) // Vyberte soubory v požadované cestě. pipe (rigger ()) // Run through rigger .pipe (gulp.dest (cesta.build.html)) // nahrajte je do složky sestavení .pipe (connect.reload ()) // A znovu načtěte náš server pro aktualizace));

Sestavení JS

// zkontroluje chyby js a vypíše je do konzole gulp.task ("jshint: build", funkce () (vrátí gulp.src (path.src.jshint) // vybere soubory v požadované cestě.pipe (jshint ( )) // proběhnutí jshint .pipe (jshint.reporter ("jshint-stylish")); // styl chybového výstupu do konzole)); // vytváření javascriptu gulp.task ("js: build", funkce () (gulp.src (cesta.src.js) // Najděte náš hlavní soubor.pipe (rigger ()) // Spusťte jej přes rigger .pipe ( sourcemaps .init ()) // Inicializace sourcemap .pipe (uglify ()) // Komprimujte naše js .pipe (sourcemaps.write ()) // Přidejte maps.pipe (přejmenujte ((přípona: ".min")))) // přidat příponu .min do výstupního souboru .pipe (gulp.dest (path.build.js)) // uvolnit připravený soubor v build .pipe (connect.reload ()) // A restartujte server));

Stavba sprite

Všechny obrázky pro sloučení do sprajtů jsou přidány do adresáře src / css / sprite / a po průchodu Gulpem se stanou jediným obrázkem sprite. Do skřítků byste neměli vkládat loga a pozadí bez jasných rozměrů.

// sestavení sprajtů gulp.task ("sprites: build", funkce () (var spriteData = gulp.src (cesta.src.sprites) // vyberte, kde chcete získat obrázky ke spojení do sprite. roura (spritesmith ((imgName : " sprite.png ", // název obrázku sprite cssName:" sprite.styl ", // název stylu, do kterého ukládáme pozice obrázků ve spritu imgPath:" images / sprite.png ", / / cesta, kde se sprite nachází cssFormat:" stylus ", // formát, ve kterém zpracováváme pozice cssTemplate: "stylus.template.muustache", // soubor masky cssVarMap: function (sprite) (sprite.name = "s-" + sprite.name // jméno každého spritu se bude skládat z názvu souboru a konstrukce "s-" na začátku jména)))); spriteData.img.pipe (gulp.dest (path.build.sprites)) ; // cesta, kam ukládáme obrázek spriteData.css.pipe (gulp.dest (cesta .build.spritesCss)); // cesta, kam ukládáme styly));

Chcete-li zobrazit sprite, stačí použít mixin. Například pro soubor lorem.png bude ukázka ze spritu vypadat takto:

Lorem sprite ($ s-lorem)

Nyní objekt s třídou .lorem převezme rozměry obrázku a samotného obrázku jako pozadí.

Vytvářejte statické obrázky

Statické obrázky jsou obrázky použité v šabloně rozvržení.

// sestavení statických obrázků gulp.task ("image: build", funkce () (gulp.src (path.src.img) // Vyberte naše obrázky.pipe (imagemin ((// Compress them progressive: true, // komprese.jpg svgoPluginy: [(removeViewBox: false)], // komprese.svg prokládaný: true, // komprese.gif optimalizaceÚroveň: 3 // kompresní poměr od 0 do 7))) .pipe (gulp.dest (cesta. build.img)) // upload do buildu .pipe (connect.reload ()) // restart serveru));

Vytváření dynamických obrázků

Dynamické obrázky jsou obrázky obsahu, které se na webu změní a jsou připojeny na úrovni šablony pouze pro ukázku. Mohou to být například obrázky pro zprávy atd.

// vytváření dynamických obrázků gulp.task ("imagescontent: build", funkce () (gulp.src (path.src.contentImg) .pipe (imagemin ((// Compress them progressive: true, // compress.jpg svgoPlugins: [(removeViewBox: false)], // komprese.svg prokládaný: true, // komprese.gif optimalizaceÚroveň: 3 // kompresní poměr od 0 do 7))) .pipe (gulp.dest (path.build.contentImg)) // upload to build .pipe (connect.reload ()) // restart server));

Sestavte CSS

// vytvoření vlastního css gulp.task ("cssOwn: build", funkce () (gulp.src (cesta.src.css) // Vyberte náš hlavní stylový list.pipe (sourcemaps.init ()) // inicializujte soucemap. pipe (stylus ((compress: true, "include css": true))) // Kompilace stylusu .pipe (prefixer ((prohlížeč: ["poslední 3 verze", "> 1%", "ie 8", "ie 7) "]))) // Přidání předpon dodavatele .pipe (cssmin ()) // Compress.pipe (sourcemaps.write ()) // zápis sourcemap .pipe (přejmenování ((přípona:" .min "))) / / přidejte příponu .min k výstupnímu souboru name.pipe (gulp.dest (cesta.build.css)) // nahrajte do sestavení .pipe (connect.reload ()) // restartujte server));

Samostatný úkol pro externí styly:

// dodavatele stavby css gulp.task ("cssVendor: build", funkce () (gulp.src (cesta.src.cssVendor) // Vezměte složku dodavatele .pipe (sourcemaps.init ()) // inicializujte soucemap .pipe ( cssmin ()) // Compress.pipe (sourcemaps.write ()) // zápis sourcemap .pipe (gulp.dest (path.build.css)) // nahrání do sestavení .pipe (connect.reload ()) / / restartujte server));

Přidejme také běžný úkol sestavení CSS:

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

Pokud potřebujete zpracovat externí styly odděleně od domácích stylů a vyložit je samostatné soubory musíte odkomentovat řádek "cssVendor: build"

Sestavení písma

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

Sestavení Htaccess

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

Obecná konstrukce

Abychom nemuseli stavět každou část zvlášť, napíšeme si úkol pro obecné sestavení:

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

Čištění stavby

Někdy je nutné zcela vyprázdnit adresář sestavení. Zde nám pomůže následující úkol:

// vyčistí složku sestavení gulp.task ("clean", funkce (cb) (rimraf (path.clean, cb);));

Sledujte nebo sledujte změny v reálném čase

Jedním z nejdůležitějších a užitečné funkce Gulp je funkce sledování, která vám umožňuje v reálném čase sledovat všechny změny vytvářených souborů a v závislosti na tom provádět konkrétní akce:

// watch gulp.task ("watch", function () (// sestavení html v případě změny watch (, function (event, cb) (gulp.start ("html: build");)); // build skřítci v případě změny sledujte (, funkce (událost, cb) (gulp.start ("sprites: build");)); // sestavení kontextových obrázků v případě změny sledujte (, funkce (událost, cb) (gulp. start (" imagescontent: build ");)); // sestavení css v případě změny watch (, function (event, cb) (gulp.start (" css: build ");)); // kontrola js v případě of change watch (, ["jshint"]); // sestavení js v případě změny watch (, funkce (událost, cb) (gulp.start ("js: build");)); // sestavení statických obrázků v case of change watch (, function (event, cb) (gulp.start ("image: build");)); // sestavení písem v případě změny watch (, function (event, cb) (gulp.start (" fonts: build");)) ; // sestavení htaccess v případě změny watch (, function (event, cb) (gulp.start ("htaccess: build");));));

Výchozí akce

Výchozí akce jsou úkoly, které správce úloh provede, když do konzoly zadáte příkaz gulp:

// výchozí akce gulp.task ("default", ["build", "watch", "connect"]);

V našem případě dokončíme náš projekt, povolíme režim sledování a spustíme server.

Příkazy příkazového řádku

Všechny příkazy galpu pro příkazový řádek se skládají ze dvou částí, to je samo o sobě příkaz hlt a mezerou oddělenou názvem úkolu. Zde je seznam příkazů použitelných pro naši konfiguraci:

• gulp - hlavní příkaz, spouští výchozí úlohu
• hlt stavět - stavět všechno
• gulp watch - start watch
• gulp clean - vyčištění adresáře sestavení
• gulp connect - spusťte server
• gulp html: build - build HTML
• gulp jshint: build - zkontrolujte chyby v JS
• gulp js: build - build JS
• hlt skřítci: stavět - stavět skřítka
• gulp image: build - sestavení statických obrázků
• doušek imagecontent: build – sestavení dynamických obrázků
• gulp cssOwn: build - sestavení vlastního CSS
• gulp cssVendor: build - sestavení externího CSS
• gulp css: build - obecné sestavení CSS
• gulp fonts: build - build fonts
• gulp htaccess: build - build htaccess

V tomto okamžiku je nastavení gulpfile.js dokončeno.

Zkopírování startovacího balíčku do projektu

Nejprve projděte konzoli ve složce, kde vyvíjíme, například cd develop / example a zkopírujte vše z adresáře start package do našeho projektu cp -a ~ / develop / start /. ~ / vývoj / příklad /

Tento způsob kopírování je nejpohodlnější, protože zkopíruje vše přesně, včetně skrytých souborů .gitignore atd.

Závěr

Použitím tento manuál Připravili jsme startovací balíček pro použití Gulpu v našich front-end vývojových projektech.

Tento balíček je také dostupný na GitHubu.

Dodatek

Tento článek není konečný a bude aktualizován na základě změn a vylepšení.