Gulp de description v ruštině. Instalace a používání Gulp

Instalace Gulpu je docela jednoduchá. Nejprve globálně nainstalujte balíček Gulp:

npm install -g gulp

Poté jej nainstalujte do svého projektu:

npm install --save-dev gulp

Pomocí Gulpu

Vytvořme úlohu Gulp pro minifikaci jednoho z našich souborů JavaScript. Vytvořte soubor s názvem gulpfile.js. Definuje vaše úlohy, které se spouštějí pomocí příkazu gulp.

Přidejte do svého souboru gulpfile.js následující příkazy:

Var gulp = vyžadovat("gulp"), uglify = vyžadovat("gulp-uglify"); gulp.task("minify", funkce () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))));

Nainstalujte gulp-uglify přes npm spuštěním npm install --save-dev gulp-uglify a poté spusťte úlohu pomocí gulp minify . Řekněme, že máte ve složce js soubor s názvem app.js, ve složce sestavení se vytvoří nový soubor app.js, který bude obsahovat komprimovanou verzi js/app.js.

co se tu vlastně děje?

V našem souboru gulpfile.js děláme několik věcí. Nejprve načteme moduly gulp a gulp-uglify:

Var gulp = vyžadovat("gulp"), uglify = vyžadovat("gulp-uglify");

Poté definujeme úlohu s názvem miniify, která při spuštění zavolá funkci zadanou jako druhý argument:

Gulp.task("minify", funkce () ( ));

Nakonec, a to je nejtěžší část, definujeme, co by náš úkol měl dělat:

Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))

Pokud se ve vláknech nevyznáte a většina front-endových vývojářů ne, pak vám výše uvedený kód nic neřekne.

proudy

Proudy umožňují, aby některá data procházela řadou obvykle malých funkcí, které upravují data a poté je předávají další funkci.

Ve výše uvedeném příkladu funkce gulp.src() vezme řetězec, který odpovídá souboru nebo sadě souborů, a vytvoří proud objektů představujících tyto soubory. Poté přejdou (nebo přejdou) do funkce uglify(), která převezme objekty souboru a vrátí nové objekty souboru s minimalizovaným zdrojem. Tento výsledek se poté přenese do funkce gulp.dest(), která uloží změněné soubory.

Zde je to, co se děje ve formě diagramu:

Pokud existuje pouze jeden úkol, funkce nedělá nic. Zvažte však následující kód:

Gulp.task("js", funkce () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("výchozí")) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("build")); ));

Chcete-li to spustit sami, nainstalujte gulp, gulp-jshint, gulp-uglify a gulp-concat.

Tato úloha převezme všechny soubory odpovídající js/*.js (jinými slovy, všechny soubory JavaScript ze složky js), spustí na nich JSHint, vytvoří výstup, minifikuje každý soubor a poté je zřetězí a uloží do build/app.js. Ve formě diagramu:

Pokud znáte Grunt, všimnete si, že se to dost liší od toho, jak Grunt funguje. Grunt nepoužívá vlákna. Místo toho vezme soubory, spustí jednu úlohu pro každý soubor a uloží do nových souborů, přičemž celý proces opakuje pro každou úlohu. V důsledku mnoha přístupů k souborovému systému je Grunt pomalejší než Gulp.

Pro lepší pochopení streamů si přečtěte Příručku pro streamování.

gulp.src()

Funkce gulp.src() vezme jeden nebo více souborů nebo pole a vrátí proud, který lze předat pluginům.

Další dva pluginy jsou přehlednější: funkce uglify() minimalizuje kód a funkce concat("app.js") spojí všechny soubory do jednoho pojmenovaného app.js.

gulp-load-plugin

Modul, který považuji za docela užitečný, se nazývá gulp-load-plugins, který automaticky načte všechny pluginy Gulp ze souboru package.json a připojí je k objektu. Hlavní aplikace je následující:

Var gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins();

Vše můžete napsat na jeden řádek ( var plugins = require("gulp-load-plugins")();), ale nejsem velkým fanouškem požadavků na jeden řádek.

Po spuštění tohoto kódu bude objekt plugins obsahovat vaše pluginy s názvy ve stylu CamelCase (například gulp-ruby-sass se načte jako plugins.rubySass ). Můžete je používat běžným způsobem. Například naše úloha js by byla zkrácena takto:

Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js", funkce () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("výchozí")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));

V příloze je soubor package.json, který obsahuje něco podobného:

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

Tento příklad ve skutečnosti není o moc kratší. U velkých a složitých souborů Gulp to však sníží blok nahrávání souboru na jeden nebo dva řádky.

Verze 0.4.0 zásuvných modulů gulp-load-plugins vydaná začátkem března přidala líné načítání zásuvného modulu, což zlepšuje výkon. Zásuvné moduly se nenačtou, dokud nejsou zavolány, což znamená, že se nemusíte obávat, že by nepoužívané zásuvné moduly v package.json ovlivňovaly výkon (ačkoli by měly být pravděpodobně stejně odstraněny). Jinými slovy, pokud spustíte úlohu, která vyžaduje pouze dva pluginy, nenačtou se všechny pluginy, které ostatní úlohy vyžadují.

Sledování souborů

Gulp má schopnost sledovat změny v souborech a při zjištění změn provést úlohu nebo úkoly. Tato funkce je úžasně užitečná (pro mě pravděpodobně jedna z nejužitečnějších v Gulpu). Můžete uložit soubor Less a Gulp jej změní na CSS a aktualizuje prohlížeč bez jakékoli akce z vaší strany.

Chcete-li sledovat soubor nebo soubory, použijte funkci gulp.watch() , která přebírá vzor souborů nebo jejich pole (například gulp.src() ) nebo pole úloh k jejich spuštění nebo provedení zpětného volání. funkce.

Řekněme, že máme úlohu sestavení, která převede naše soubory šablon do HTML, a chceme definovat úlohu sledování, která sleduje změny šablon a spouští úlohu k jejich převodu do HTML. Funkci hodinek můžeme použít takto:

Gulp.task("watch", funkce () ( gulp.watch("templates/*.tmpl.html", ["build"]); ));

Nyní, když se změní soubor šablony, bude spuštěna úloha sestavení, která vygeneruje HTML.

Místo řady úkolů můžete také vrátit zpětné volání pro hodinky. V tomto případě funkce obdrží objekt události obsahující informace o události, která funkci volala:

Gulp.watch("templates/*.tmpl.html", funkce (událost) ( console.log("Typ události: " + event.type); // přidáno, změněno nebo odebráno console.log("Cesta události: " + event.path); // cesta k souboru ));

Další charakteristický rys gulp.watch() znamená, že vrací watcher . Použijte jej k poslechu dalších událostí nebo k přidání souborů ke sledování. Chcete-li například spustit seznam úloh a současně volat funkci, můžete do události změny přidat posluchače, když se pozorovatel vrátí:

Var watcher = gulp.watch("templates/*.tmpl.html", ["build"]); watcher.on("change", function (event) ( console.log("Typ události: " + event.type); // přidáno, změněno nebo odebráno console.log("Cesta k události: " + event.path) ; // cesta k souboru ));

Kromě události změn si můžete poslechnout řadu dalších událostí:

konec
Spustí se, když hlídač skončí (to znamená, že úkoly a zpětná volání již nebudou volány při změně souborů).
chyba
Spustí se, když dojde k chybě.
připraven
Spustí se, když byly nalezeny soubory a jsou připraveny ke sledování.
žádná shoda
Spustí se, když požadavku neodpovídají žádné soubory.

Objekt watcher také obsahuje některé metody, které lze volat:

watcher.end()
Zastaví pozorovatele (nebudou volány žádné další úkoly ani zpětná volání).
watcher.files()
Vrátí seznam souborů sledovaných pozorovatelem.
watcher.add(glob)
Přidá do watcheru soubory, které odpovídají zadanému vzoru glob (také přijímá volitelnou funkci zpětného volání jako druhý argument).
watcher.remove(cesta k souboru)
Odebere zadaný soubor ze sledování.

Ahoj. Pokud jste nějakým způsobem spojeni s JS, pravděpodobně jste slyšeli o aplikaci jako gulp . A možná i použitý. Z vlastní zkušenosti mohu říci, že může být obtížné „proniknout“ do toho, jak s ním pracovat, i když klíč k porozumění leží na povrchu. Proto zveřejňuji tento materiál v naději, že bude užitečný.

Také na základě tohoto materiálu bylo natočeno video, takže si můžete vybrat, jakou formou budete konzumovat.

Pokud porovnáte gulp s jinými oblíbenými sestavovacími systémy, pak je to jako srovnávat hotovou kvadrokoptéru typu „kup a leť“ a sadu pro vlastní montáž trubec. Ano, vzlétnete až druhý den, ale máte v rukou větší flexibilitu a kontrolu, zvláště pokud máte nestandardní úkol.

Ve skutečnosti po překonání vstupního prahu nevypadá hlt tak složitě a chvílemi i srozumitelně a logicky. Ale bez řádné přípravy může být obtížné do takového stavu dojít. Pojďme se do toho ponořit a podívat se, na jakých principech je gulp postaven.

Pojďme z dálky. V ekosystému nodejs existuje něco jako potoky nebo potok. Kvůli složitosti překladu se vlákna nazývají také vlákna vícevláknového programu. V našem případě je stream objekt představující streamovaná data a je to úplně jiný koncept.

Tyto streamy tedy nabízejí uživatelsky přívětivé rozhraní pro asynchronní práci s daty. Celý proces čtení/zápisu je řešen uzlovým jádrem a my máme pouze odpovídající zpětná volání, když se objevil nový kus dat, když došlo k chybě, když skončil stream atd. Tímto způsobem je dosaženo efektivity I/O s minimálním úsilím ze strany programátora.

Const fs = vyžadovat("fs"); const input = fs.createReadStream("myfile"); input.on("data", (chunk) => ( console.log(chunk); )); input.on("konec", () => ( console.log("soubor je načten"); ));
Streamy v nodejs mohou být téměř cokoli, od souborů nebo řetězců až po zásuvky. Například ve slavném rámci Express HTTP požadavek a odezvou nejsou nic jiného než streamy. Proudy mohou být pouze pro čtení, pouze pro zápis nebo obojí.

Streamy mají jeden užitečná funkce: lze je skládat dohromady v řetězci zvaném trubka. Můžeme tedy vzájemně kombinovat několik vláken a spravovat je jako jedno. Výstup jednoho proudu se převádí do dalšího a tak dále až do konce. Jak můžete odhadnout z překladu slova potrubí, je to velmi podobné potrubí.

To vám umožní určit požadovaný datový tok (opět složitost překladu. Zde máme na mysli tok neboli tok) právě tady a teď bez čekání, až budou data dostupná.

Takto můžeme například určit, co chceme dát jako výsledek, a samotný motor je již zapojen do „jak“ dát.

Const fs = vyžadovat("fs"); const express = require("express"); var app = express(); app.get("/", funkce (req, res) ( fs.createReadStream("myfile") .pipe(res); )); app.listen(3000);
Všimněte si, že obsluha požadavku se dokončí ještě před otevřením souboru - o zbytek se postará jádro uzlu.

Gulp je postaven na podobném přístupu. To je jeho výhoda, ale zároveň i nevýhoda. Přinejmenším nevýhoda může být označena kvůli výslednému zmatku, protože gulp používá jiné, podobné, ale nekompatibilní toky. Gulp úzce spolupracuje s souborový systém, proto používá proudy, které nepředstavují ani tak proud dat, jako individuální virtuální soubory, každý má svůj vlastní obsah.

Pokud jste někdy slyšeli o vinylu, toto je přesně implementace streamů, které gulp používá. Pokud vezmeme standardní úkol pro galp a podíváme se, co je uvnitř, zjistíme, že pro každé volání události data nám přijde objekt souboru, který obsahuje všechny potřebné informace: název souboru, cestu k souboru, pracovní adresář a samozřejmě její obsah.

Const hlt = vyžadovat("hlt"); gulp.task("výchozí", function() ( gulp.src("./*.js") .on("data", function(file) ( console.log("data callback"); console.log( file.inspect()); /* Výstup: * zpětné volání dat * > * zpětné datové volání * > */ )) .pipe(gulp.dest("dist/")); ));
Obsah může být prezentován ve dvou formátech: jako již přečtená vyrovnávací paměť nebo jako nativní proud uzlu. Každá fáze Galpovova potrubí bere takové soubory jako vstup, provádí určitý druh transformace a přenáší je na výstup dalšího řetězce. Poslední řetězec je většinou jen uloží na disk.

Pipe(gulp.dest("dist/"));
Uvědomění si, že vlákna v doušku jsou různá, vede k osvícení a porozumění, protože to vysvětluje většinu problémů a chyb.

Zvážit skutečný příklad. Chcete použít browserify ke spojení souborů JS. Jdete a najdete plugin gulp-browserify. Ale vidíte postscript, který říká, že plugin je zastaralý, tzn. Zastaralé.

Jako vzdělaný programátor tuto možnost zavrhnete a jdete hledat, jaké řešení není zastaralé. Najděte oficiální recepty na gulp a uvidíte, že browserify funguje přímo s gulp. No, jako přímo, přes mezivrstvu, která jen převádí proud nativních uzlů do vinylového proudu, kterému hlt rozumí. Bez toho by nic nefungovalo, protože to jsou jiná vlákna.

Pokud chcete napsat vlastní transformaci, můžete použít tuto šablonu.
Jak vidíte, vše je zde jednoduché: pro každý soubor bude zavolán náš handler, který provede úpravy. Můžeme dělat, co chceme: změnit obsah souboru, přejmenovat soubor, odstranit soubor nebo přidat do streamu několik nových souborů.

Jak si pamatujeme, obsah souboru ve vinylovém streamu může být reprezentován jako vyrovnávací paměť nebo jako datový proud. Není však nutné podporovat obojí. Balíček můžete použít vždy

Ahoj! V tomto článku vytvoříme náš projekt, inicializujeme soubor manifestu a nainstalujeme doušek lokálně.

Pro začátek je třeba říci, že cesta ke složce (včetně uživatelského jména počítače) musí být zapnutá anglický jazyk, jinak se při používání mohou objevit chyby doušek. Vytvořil jsem složku Projekty, ve kterém budu tvořit všechny své projekty. Pro příklad pojmenuji náš projekt první Projekt.

V minulém článku jsme tedy stanovili doušek globálně, nyní jej musíme nainstalovat lokálně. Nejprve provedeme inicializaci. Do terminálu napište následující příkaz:

cd cesta_k_vasemu_projektu (cd "user/projects/firstProject")
npm init

Tímto příkazem vytvoříme základní soubor manifestu pro náš projekt. V zásadě je tam vše jasné, takže nebudu vysvětlovat. Pokud se nechcete obtěžovat se všemi těmito nastaveními, pak stačí stisknout stále vstoupit, protože potřebujeme tento soubor pro další, počáteční nastavení není tak důležité.

Pokud jste vše udělali správně, měl by se ve složce projektu objevit soubor package.json. Pokud jej otevřete, uvidíte, že jsou tam uloženy všechny informace, které jste zadali (nebo nezadali) při inicializaci. V souboru jsou navíc uloženy informace o použitých balíčcích, a to je přesně to, co potřebujeme. Pokud neustále používáte např. knihovnu jQuery, pak jej můžete zapsat do tohoto souboru a bude automaticky stažen při spuštění nového projektu.

Nyní pojďme nainstalovat doušek lokálně do naší složky.

npm i doušek --save-dev

Vlajka --save-dev potřebné k objednávce balíčku doušek a jeho verze jsou automaticky zapsány do souboru package.json. Pokud tento soubor otevřete po úspěšné instalaci balíčku, uvidíte, že se tam objeví následující:

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

Myslím, že je jasné, že je zde napsán název balíčku a jeho verze. Šipka nahoru označuje, že tento balíček lze upgradovat. Máme také složku node_modules kde je nyní uložen doušek a všechny jeho závislosti. Zde budou instalovány nové moduly.

Tak, to je pro dnešek vše. Zvažovali jsme jak nainstalovat gulp lokálně do složky projektu a proč potřebujete manifest package.json.

Abychom urychlili proces vývoje front-endu, automatizujeme některé úkoly pomocí faucetu Gulp.
K tomu potřebujeme správce balíčků NPM. Ale abyste mohli nainstalovat NPM, musíte nejprve nainstalovat Node.js.

Krok 1Instalujte Node
Jdeme na oficiální stránku https://nodejs.org a stáhneme doporučenou verzi.

Spusťte instalační program s právy správce.
Po instalaci se objeví 2 ikony: Node.js a Node.js coomand prompt. Nebudou pro nás užitečné, protože nepoužíváme Node.js a pro spuštění konzole existují pohodlnější možnosti:
1. Použijte příkazovou konzoli TotalCommander (Příkazy - Otevřít konzolu příkazů).
2. Podržte Shift a kliknutím pravým tlačítkem otevřete kontextová nabídka. Zobrazí se položka "Otevřít příkazové okno".
Příkazový řádek je lepší spustit z adresáře projektu, který potřebujete, konzole okamžitě zobrazí cestu k požadovanému adresáři, tím odpadá nutnost zadávat cestu ručně.

Chcete-li zkontrolovat verze uzlů a npm, zadejte
node -v a stiskněte Enter
pak npm -v

Verze NPM se obvykle aktualizují častěji než verze uzlů, aby se nainstalovala nejnovější verze:
instalace npm [e-mail chráněný]-G

npm příkazy, které potřebujeme :
seznam npm- seznam všech nainstalované balíčky
npm -g ls --hloubka=0- seznam globálně nainstalovaných balíčků
npm zveřejněno zkontrolujte, zda balíčky nejsou zastaralé
npm aktualizace hlt- aktualizace verzí pluginu
npm init- vytvořit package.json
npm instalační název_balíčku- nainstalovat balíček (package_name - název požadovaného balíčku)
npm install název_balíčku --save-dev- nainstalujte balíček a udělejte o něm záznam v package.json v sekci devDependencies
odinstalace npm název_balíčku- odstranění balíku
instalace npm- nainstalujte všechny balíčky uvedené v package.json
Před zahájením výroby npm smršťovací fólie- opravte verze balíčků, nyní je npm install nainstaluje a budete mít jistotu, že vše bude fungovat jak má

Zkratky
-v: --verze
-g: --globální
-S: --uložit
-D: --save-dev
-y: --ano
-n: --ano nepravda

Krok 2 Instalace gulp
První hlt je třeba nainstalovat globálně.

Spustíme příkazovou konzoli.
Někdy je na některých zdrojích například znak dolaru před příkazem
$ npm install --global gulp-cli

Nekopírujte znak dolaru, vložte pouze samotný příkaz
npm install --global gulp-cli

Vodítko: pro vložení zkopírovaného textu příkazový řádek, otevřete příkazový řádek, stiskněte ALT + MEZERNÍK -> Výchozí hodnoty, zaškrtněte políčko Vybrat myší. Nyní můžete vybrat text pomocí myši, kopírovat, v com. klikněte pravým tlačítkem na řádek - text se vloží automaticky.

Krok 3. Práce s douškem v konkrétním projektu

3.1 Nejprve vytvořte závislostní balíček package.json
Soubor package.json obsahuje informace, které zadáme do terminálu a seznam všech balíčků, které v projektu používáme.

Při instalaci balíčku s klíčem --save-dev se balíček automaticky přidá do package.json. Abychom neinstalovali všechny balíčky ručně do každého nového projektu, použijeme hotový package.json s moduly a závislostmi, které potřebujeme, a umístíme jej do kořenového adresáře našeho projektu.

package.json se generuje pomocí příkazu npm init, který vytiskne několik otázek do konzole a vytvoří soubor.
Položka name standardně zobrazuje název vašeho projektového adresáře.

Vodítko:
Tento soubor můžete vygenerovat rychleji a snadněji pomocí možnosti --yes (automaticky odpovědět ano na všechny otázky):
npm init --ano

Dobré vědět:
Můžete nastavit výchozí hodnoty, které se použijí při každém spuštění npm init, což vám ušetří čas. Po instalaci jsou uloženy v souborech .npmrc.
Například:
npm konfigurační sada init.author.name "Valentina Vladova"
npm konfigurační sada init.author.email" [e-mail chráněný]"
npm konfigurační sada init.author.url "http://simpalmarket.com/"
npm set init-licence MIT
npm set init-verze 0.0.0
Poté spusťte npm init, všechny zadané hodnoty budou nataženy do odpovídajících proměnných.

Když npm init požádá o git repo, napište krátce user/repo - npm je dostatečně chytrý, aby rozšířil řádek na https://github.com/user/repo. npm také vygeneruje pole úložiště, chyb a domovské stránky ve správném formátu.

Přejděte tedy do kořenové složky projektu, zavolejte příkazovou konzoli a zadejte
npm init --ano

V kořenovém adresáři projektu se objeví soubor package.json s něčím takovým

3.2 Nainstalujte gulp lokálně
Do složky projektu v konzole zadejte:
npm install --save-dev gulp

nebo zkrácené
npm i doušek --save-dev

Seznam bude Varovat - ignorovat.

Chcete-li zkontrolovat verzi, použijte příkaz
doušek --verze

Složka node_modules se objevila v kořenovém adresáři projektu. Automaticky se do něj načtou všechny moduly a závislosti, které do projektu nainstalujeme. Složek se závislostmi může být mnoho, i když samotných balíčků není nainstalováno tolik. To je způsobeno tím, že kromě hlavních balíčků jsou nainstalovány programy nezbytné pro správnou činnost hlavního balíčku. Nemusíte nic čistit ani mazat ze složky node_modules.

Do souboru package.json bude přidán záznam
"devDependencies" :(
"gulp": "^3.9.1"
}

Nyní si můžete nainstalovat různé pluginy pro gulp.
http://gulpjs.com/plugins/
Do vyhledávacího pole zadejte název pluginu, o který máte zájem.

Pluginy lze instalovat jeden po druhém, například:
npm install --save-dev gulp-plumber
stejně jako seznam oddělený mezerou, například:
npm nainstalovat gulp-sass gulp-instalatér gulp-autoprefixer gulp-minify-css --save-dev
Pluginy pro instalaci a pluginy pro sestavení se nejlépe instalují pomocí samostatných příkazů

npm init

Budete potřebovat:

Zadejte název projektu
Verze projektu
Popis projektu
Vstupní bod
tým
Git úložiště
Klíčová slova
Jméno autora
Licence

npm i –g doušek

Název úkolu

test hltem

Úkol je funkční.

doušek sloužit

npm i gulp-sass --save-dev

Kompilace sass do css
Přidávání předpon
Uložení souboru do src/css

Vytvoření úkolu v doušcích

Závěr.

https://gulpjs.com/plugins/

Otevřete terminál a přejděte do složky s projektem. První věc, kterou musíme udělat, je inicializovat npm, abychom to udělali, spusťte příkaz:

npm init

Budete potřebovat:

Zadejte název projektu
Verze projektu
Popis projektu
Vstupní bod
tým
Git úložiště
Klíčová slova
Jméno autora
Licence

Vše lze ve výchozím nastavení ponechat (pokud nechcete projekt nahrávat do obecný přístup)

Poté potvrdíme zadané údaje.

Pokuta. NPM inicializováno. Nyní se v rootu objevil soubor packages.json – konfigurační soubor správce balíčků.

Nyní můžeme nainstalovat gulp. Nejprve jej musíte nainstalovat globálně a poté pro projekt. Chcete-li nainstalovat globálně, spusťte následující příkaz:

npm i –g doušek

Nyní nainstalujme gulp pro projekt:

npm install --save-dev gulp

Všechny doušky pro projekt jsou nainstalovány.

Pojďme zkontrolovat. Vytvoříme soubor gulpfile.js a vytvoříme v něm jednu testovací úlohu, která v konzoli zobrazí „Pracuji“.

var gulp = vyžadovat("hlt"); gulp.task("test", function() ( console.log("Pracuji"); ));

Za prvé zahrneme gulp a za druhé zavoláme funkci gulp's task, která má dva parametry:

Název úkolu
anonymní funkce který popisuje náš úkol

Nyní v konzole spusťte následující příkaz

test hltem

Úkol je funkční.

Nyní pojďme nainstalovat a povolit balíčky, které pomáhají s rozložením.

Browsersync, balíček, který umožňuje automaticky aktualizovat stránku při změně souborů

Chcete-li nainstalovat do konzoly, spusťte následující příkaz:

npm i synchronizace prohlížeče --save-dev

Nyní vytvoříme úlohu, která spustí synchronizaci prohlížeče a bude sledovat změny souborů.

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

Úkol se nazývá sloužit. A browser-sync automaticky aktualizuje stránku prohlížeče, pokud se změnily soubory css (umístěné ve složce src/css) a soubory html (umístěné ve složce src).

Chcete-li spustit tuto úlohu, spusťte příkaz

doušek sloužit

Pro rozložení používám sass. Proto pro kompilaci ze sass do css používám balíček gulp-sass.

Instalace a konfigurace gulp-sass

Chcete-li nainstalovat gulp-sass do konzoly, spusťte příkaz:

npm i gulp-sass --save-dev

Nyní vytvoříme úlohu sass, která zkompiluje sass do css. A změňte úlohu obsluhy tak, aby místo toho naslouchala naše synchronizace prohlížeče css soubor sass.

var gulp = vyžadovat("hlt"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("změnit", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(gulp. dest("src/css")) .pipe(browserSync.stream()); ));

Nyní, když spustíte úlohu obsluhy, spustí se úloha sass.

Instalace a konfigurace gulp-autoprefixer

Chcete-li nainstalovat gulp-autoprefixer, spusťte příkaz:

npm i gulp-autoprefixer --save-dev

A přidejte předponu k sass tasku.

var gulp = vyžadovat("hlt"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("změnit", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( prohlížeče: ["poslední 2 verze"], kaskáda: false ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); ));

Nyní při spuštění úlohy sass bude mít c:

Kompilace sass do css
Přidávání předpon
Uložení souboru do src/css

Následující balíček kombinuje všechny soubory css do jednoho.

Instalace a konfigurace contactCss

Chcete-li nainstalovat contactCss, použijte následující příkaz:

npm i gulp-concat-css --save-dev

A přidejte provedení tohoto balíčku k úloze sass. (Všechny css soubory spojíme ve style.css)

var gulp = vyžadovat("hlt"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("změnit", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( prohlížeče: ["poslední 2 verze"], kaskáda: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ));));

Pokuta. Nyní přidáme balíček, který přejmenovává soubory. (Budeme to potřebovat, kód budeme minimalizovat soubory css a js)

Instalace a konfigurace gulp-rename

Chcete-li nainstalovat gulp-rename, spusťte následující příkaz:

npm i gulp-rename --save-dev

Prozatím nebudeme tento balíček přidávat k žádným úkolům.

Instalace a konfigurace balíčku pro minifikaci souborů CSS - clean-css

Chcete-li nainstalovat clean-css, spusťte následující příkaz:

npm i gulp-clean-css --save-dev

Nyní vytvoříme mincss úlohu, která přidá příponu ".min" k názvu souboru, minifikuje soubor css a uloží jej do app/css

var gulp = vyžadovat("hlt"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("změnit", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( prohlížeče: ["poslední 2 verze"], kaskáda: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ));)); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((přípona: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); ))

Skvělé, nainstalujme si balíček gulp, který minifikuje soubory js.

Instalace a konfigurace balíčku gulp pro minimalizaci souborů js --gulp-uglify

Chcete-li nainstalovat gulp-uglify, spusťte následující příkaz:

npm i gulp-uglify --save-dev

Nyní vytvoříme úlohu, která do souboru přidá příponu „.min“, minifikuje soubor js a uloží jej do app/js

var gulp = vyžadovat("hlt"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = vyžadovat("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("změnit", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( prohlížeče: ["poslední 2 verze"], kaskáda: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ));)); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((přípona: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((přípona) : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); ))

Vytvořili jsme hlavní úkoly. Poslední dva je ale nutné provést při uvedení projektu do výroby. A musí být provedeny společně. Vytvořme úlohu, která provede úlohu mincss a poté minjs

Vytvoření úkolu v doušcích

Vytvořme min task, který bude spouštět mincss a minjs úkoly

var gulp = vyžadovat("hlt"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = vyžadovat("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("změnit", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( prohlížeče: ["poslední 2 verze"], kaskáda: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ));)); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((přípona: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((přípona) : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); )) gulp.task("min",["mincss", "minjs"]) ;

Všechno. Nastavíme také výchozí úlohu.