Gulp.js - Gulp.js
![]() | Tento článek má několik problémů. Prosím pomozte vylepši to nebo diskutovat o těchto problémech na internetu diskusní stránka. (Zjistěte, jak a kdy tyto zprávy ze šablony odebrat) (Zjistěte, jak a kdy odstranit tuto zprávu šablony)
|
![]() | |
Vývojáři | Eric Schoffstall |
---|---|
První vydání | 26. září 2013[1] |
Stabilní uvolnění | 4.0.2 / 6. května 2019[2] |
Úložiště | ![]() |
Plošina | Cross-platform |
K dispozici v | JavaScript |
Typ | Sada nástrojů |
Licence | Licence MIT[3] |
webová stránka | gulpjs![]() |
doušek je open-source JavaScript sada nástrojů vytvořená Ericem Schoffstallem[4] používá se jako streamování vybudovat systém (obdoba více zaměřeného na balíček Udělat ) v front-end vývoj webových aplikací.
Je to běžec úloh postavený na Node.js a npm, který se používá k automatizaci časově náročných a opakujících se úkolů při vývoji webu, jako je minifikace, zřetězení, prolomení mezipaměti, testování jednotky, podšívka, optimalizace atd.[5]
gulp používá k definování svých úkolů přístup přes konfiguraci a při provádění se spoléhá na své malé, jednoúčelové doplňky. Ekosystém gulp obsahuje více než 3 500 takových pluginů.[6]
Přehled
doušek[7] je nástroj pro sestavení v JavaScriptu proudy uzlů. Tyto proudy usnadňují připojení operací se soubory prostřednictvím potrubí.[8] gulp čte souborový systém a přenáší data po ruce z jednoho jednoúčelového pluginu do druhého přes .trubka()
operátor, provádějící jeden úkol najednou. Původní soubory nebudou ovlivněny, dokud nebudou zpracovány všechny doplňky. Lze jej nakonfigurovat buď k úpravě původních souborů, nebo k vytvoření nových. Tím je zajištěna schopnost provádět složité úkoly propojením jejích četných pluginů. Uživatelé mohou také psát své vlastní pluginy a definovat své vlastní úkoly.[9] Na rozdíl od jiných běžců úloh, kteří spouští úkoly podle konfigurace, vyžaduje gulp pro definování svých úkolů znalost JavaScriptu a kódování. gulp je systém sestavení, což znamená, že kromě spouštění úloh je také schopen kopírovat soubory z jednoho umístění do druhého, kompilace, nasazení, vytváření oznámení, testování jednotek, liniové atd.[4]
Potřeba běžce úkolů
Úkolové jako doušek a Grunt jsou postaveny spíše na Node.js než npm, protože základní skripty NPM jsou neefektivní při provádění více úkolů, i když někteří vývojáři dávají přednost npm skripty, protože mohou být jednoduché a snadno implementovatelné, existuje mnoho způsobů, jak se zdá, že gulp a Grunt mají oproti sobě výhodu a výchozí skripty.[10] Grunt spouští úkoly transformací souborů a ukládá je jako nové do dočasných složek a výstup jednoho úkolu se bere jako vstup pro další atd., Dokud se výstup nedostane do cílové složky. To zahrnuje mnoho I / O volání a vytvoření mnoha dočasných souborů. Zatímco gulp proudí souborovým systémem a nevyžaduje žádné z těchto dočasných umístění, čímž se snižuje počet I / O volání a zlepšuje se výkon.[11] Grunt používá konfigurační soubory k provádění úkolů, zatímco gulp vyžaduje kódování jeho souboru sestavení. V programu Grunt musí být každý plugin nakonfigurován tak, aby jeho vstupní umístění odpovídalo výstupu předchozího pluginu. V gulp jsou pluginy automaticky lemovány potrubím.[8]
Úkon
Gulpové úlohy jsou spouštěny z a rozhraní příkazového řádku (CLI)[10] shell a vyžadují dva soubory, balíček.json
, který slouží k výpisu různých doplňků pro gulp, a gulpfile.js
(nebo jednoduše gulpfile
), Tyto se podle konvence nástroje pro sestavení často nacházejí v kořenovém adresáři zdrojového kódu balíčku. Gulpfile obsahuje většinu logiky, kterou gulp potřebuje ke spuštění svých sestavovacích úloh. Nejprve se načtou všechny potřebné moduly a poté se v gulpfile definují úkoly. Všechny potřebné doplňky uvedené v souboru gulpfile jsou uvedeny v části devDependencies[12] Výchozí úkol je spuštěn $ doušek
. Jednotlivé úkoly lze definovat pomocí gulp.task a jsou spuštěny doušek <úkol>
.[13] Složité úkoly jsou definovány zřetězením pluginů pomocí .trubka()
operátor.[14]
Anatomie souboru gulpfile
gulpfile je místo, kde jsou všechny operace definovány v gulp. Základní anatomie souboru gulpfile se skládá z požadovaných pluginů zahrnutých v horní části, definice úkolů a výchozí úlohy na konci.[15]
Pluginy
Jakýkoli nainstalovaný plugin, který je vyžadován k provedení úkolu, se přidá na začátek souboru gulpfile jako závislost v následujícím formátu.[13][14]
// Přidání závislostívar doušek = vyžadovat ('doušek');
Úkoly
Úkoly lze poté vytvořit. Gulp úkol je definován gulp.task a vezme název úkolu jako první parametr a funkci jako druhý parametr.
Následující příklad ukazuje vytvoření úkolů hltání. První parametr taskName je povinné a určuje název, pod kterým lze úlohu v shellu provést.[16]
doušek.úkol('taskName', funkce () { //dělej něco});
Alternativně lze vytvořit úlohu, která provádí několik předdefinovaných funkcí. Tyto funkce se předávají jako druhý parametr ve formě pole.
funkce fn1 () { // dělej něco}funkce fn2 () { // dělej něco}// Úkol s řadou názvů funkcídoušek.úkol('taskName', doušek.paralelní(fn1, fn2));
Výchozí úkol
Výchozí úkol je třeba definovat na konci souboru gulpfile. Může být spuštěn doušek
příkaz v prostředí. V níže uvedeném případě výchozí úloha nedělá nic.[14]
// Gulp výchozí úkoldoušek.úkol('výchozí', fn);
Výchozí úloha se v programu gulp používá k automatickému spuštění libovolného počtu závislých dílčích úkolů definovaných výše v postupném pořadí. gulp může také sledovat zdrojové soubory a spustit příslušnou úlohu, když se v souborech provedou změny. Dílčí úkoly je třeba zmínit jako prvky pole ve druhém parametru. Proces lze spustit pouhým spuštěním výchozí úlohy pomocí doušek
příkaz.[15]
Ukázkové úkoly
Obrazový úkol
Definice modulu může být na začátku roku Gulpfile.js
jako tak:
var imagemin = vyžadovat(‚hlt-představit si ');
Následující obrazová úloha optimalizuje obrázky. gulp.src ()
načte všechny obrázky s příponou .png, .gif nebo .jpg v adresáři 'images-orig / '.
.pipe (imagemin ())
kanály nalezené obrázky, prostřednictvím procesu optimalizace a pomocí .pipe (gulp.dest ())
optimalizované obrázky se uloží dosložka images / '. Bez gulp.dest ()
obrázky by byly skutečně optimalizovány, ale nejsou uloženy.[17] Protože jsou optimalizované obrázky uloženy do jiné složky, původní obrázky zůstanou nezměněny.[14]
// Úkol obrázkůdoušek.úkol('snímky', funkce () { vrátit se doušek.src('images / *. {png, gif, jpg}') .trubka(imagemin()) .trubka(doušek.dest('dist / images /'));});
Úkol skriptů
V následujícím příkladu všechny soubory JavaScript z adresáře skripty / jsou optimalizovány pomocí .pipe (uglify ())
a gulp.dest ('skripty /')
přepíše původní soubory výstupem.[18] K tomu je třeba se nejprve vrátit k požadovanému plugin gulp-uglify[19] na npm instalační balíček a na začátku gulpfile, modul by měl být definován.
// Úkol skriptudoušek.úkol('skripty', funkce () { vrátit se doušek.src('skripty / *. js') .trubka(zohyzdit()) .trubka(doušek.dest('skripty /'));});
Sledujte úkol
Úkol Watch slouží k reakci na změny v souborech. V následujícím příkladu úkoly s názvy skripty a snímky jsou volány, když se v zadaných adresářích změní některý ze souborů nebo obrázků JavaScriptu.[20]
// Znovu spusťte úlohu, když se soubor změnídoušek.úkol('hodinky', funkce (cb) { doušek.hodinky('skripty / js / **', skripty); doušek.hodinky('snímky/**', snímky); cb();});
Dále je možné provést aktualizaci obsahu prohlížeče pomocí Watch-tasks.[21] K tomu existuje řada možností a pluginů.
Reference
- ^ https://libraries.io/npm/gulp
- ^ "deník změn". Citováno 2019-05-06.
- ^ „Licence to github.com“. Citováno 2016-05-30.
- ^ A b Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Vývoj hrany doušku (1. vyd.). Krvácející hrana Stiskněte. ISBN 978-1-939902-14-6.
- ^ „Building With Gulp - Smashing Magazine“. Smashingmagazine.com. Citováno 2016-12-14.
- ^ "registr pluginu gulp.js". Gulpjs.com. Citováno 2016-12-14.
- ^ „gulpjs / gulp“. GitHub. Citováno 2016-09-22.
- ^ A b "Příručka k dílčímu balíčku / streamu: jak psát programy uzlů pomocí streamů". GitHub. Citováno 2016-12-14.
- ^ „gulpjs / gulp“. GitHub. Citováno 2016-09-22.
- ^ A b „gulpjs / gulp“. GitHub. Citováno 2016-09-23.
- ^ „Gulp pro začátečníky“. Triky CSS. 01.09.2015. Citováno 2016-12-14.
- ^ "instalace | Dokumentace NPM". docs.npmjs.com. Citováno 2016-09-22.
- ^ A b „gulpjs / gulp“. GitHub. Citováno 2016-09-23.
- ^ A b C d Maynard, Travis (2015). Začínáme s Gulp. Packt Publishing Ltd. ISBN 9781784393472.
- ^ A b „An Introduction to Gulp.js - SitePoint“. 2014-02-10. Citováno 2016-09-23.
- ^ „gulp / API.md at 4.0 · gulpjs / gulp · GitHub“. GitHub. 2016-05-12. Citováno 2016-12-14.
- ^ „Durchstarten mit Gulp.js - optimalizované webové stránky, Arbeitsabläufe automatisieren“. Magazin.phlow.de. 2014-05-25. Citováno 2016-12-14.
- ^ „Front-end Workflow mit Gulp - Liechtenecker“. Liechtenecker.at. 2015-05-29. Citováno 2016-12-14.
- ^ „doušek-uglify“. Npmjs.com. Citováno 2016-12-14.
- ^ "hlt hodinky". Npmjs.com. Citováno 2016-09-23.
- ^ „Browsersync + Gulp.js“. Browsersync.io. Citováno 2016-12-14.
Literatura
- Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Vývoj hrany doušku (1. vyd.). Krvácející hrana Stiskněte. ISBN 978-1-939902-14-6.
- Den Odell (2014). "Vytváření nástrojů a automatizace". Kódování, schopnosti a nástroje pro vývoj JavaScriptu. Apress. ISBN 978-1-4302-6268-8.
- Maynard, Travis (2015). Začínáme s Gulp. Packt Publishing Ltd. ISBN 9781784393472.