Devstac­ky: In­spi­rač­ní ka­ta­log nástrojových zá­kla­den

Cílem je poskytnout méně zkušeným inspiraci pro práci na vlastním devstacku. Proto kladu důraz na česky zdokumentované zástupce, ale pro pořádek uvádím i známé světové balíčky.

Vycházím z toho, co jste mi poslali na Twitteru a Facebooku a doplňuji to komentářem, aby bylo jasné, co je obsahem.

Gulp

Nejdříve ze všeho vrhneme na nástrojářské základny postavené na nejrozšířenějším nástroji pro automatizaci.

DS Gulp

Jednoduchý ukázkový devstack od Dana Střelce, který pokrývá: Browsersync, CSS s Autoprefixerem a CSSnano, JS s Uglify a základní optimalizaci obrázků s ImageMin a hlídání změn v souborech. danielstrelec/ds-gulp

Polaroid example

Můj ještě jednodušší ukázkový devstack pro začátečníky, který jsem lidem ukazoval na školeních webové kodéřiny. Podívejte se hlavně do gulpfile.js. machal/polaroid-example

Actum devstack

Moc hezky zdokumentovaný a už vcelku pokročilejší stack od lidí z Actum. Pokrývá HTML (Nunjucks, Prettify), CSS (Sass, Stylelint, PostCSS), JavaScript (Babel, ESLint atd.), ale i SVG, obrázky a dokonce i favikony a tahání ukázkových dat z API. actum/gulp-dev-stack

HTML5 Boilerplate

Asi nejznámější základna pro vznik nových projektů. Na mě sice až moc robustní a vše pokrývajících, ale nic proti gustu jiných. Ostatně hezký příklad zneužití označení „boilerplate". h5bp/html5-boilerplate

DS Boilerplate

Opět Dan Střelec. Zde jde ale o komplexnější řešení, které využívá pro práci na klientských webech. Kromě už uvedeného pokrývá automatické úpravy CSS pomocí CSScomb, lintování se Stylelint, spojování a lintování JavaScriptu, optimalizaci obrázků, práci s SVG ikonami, jejich převod do sprajtů a další legrace. danielstrelec/ds-boilerplate/

Další sady:

• yeoman/generator-webapp – Robustní Gulp workflow podle vašeho nastavení generované nástrojem Yeoman. Možné dále upravovat pomocí receptů.
• vigetlabs/blendid – Známý devstack postavený na Gulpu včetně „static site builder“, generátoru statických stránek.
• johnjarosczech/boilerplate – NPM, Gulp, ale samotný build proces je definovaný v JS.
• eduardstula/frontend-devstack – stack v Gulpu navazující na Bootstrap.
• querycz/dev-stack – Gulp v kombinaci s WordPressem od studia Query.

NPM skripty

Automatizace pomocí skriptů volaných přímo z package.json, konfiguračního souboru Node Package Managera, je poměrně nová. Ale popularita strmě roste, takže další odkazy věřím najdou své fanoušky:

Polaroid example

Opět onen můj jednoduchoučký ukázkový devstack pro začátečníky. Pokrývá jen CSS: preprocesor LESS, Autoprefixer, a Browsersync. Viz dotčené řádky v package.json. github.com/machal/polaroid-example

DS-NPM

Danův stack zde pokrývá totéž jako v případě Gulpu a opět je hezky česky zdokumentovaný. danielstrelec/ds-npm

DevStack Vojty Bulanta

Není zdokumentovaný, zase ale velmi jednoduchý a přímočarý. Pokrývá HTML (Pug), CSS (PostCSS), JS (Parcel), SVG (SVGO). — gist.github.com/vbulant

Grunt

Mrkněme se i na několik předpřipravených stacků vyrobených v nejstarším automatizačním nástroji, Gruntu.

Polaroid example

Jen základy. Preprocesor LESS, Autoprefixer, a Browsersync. Viz dotčené řádky v Gruntfile.js. machal/polaroid-example

• danielstrelec/ds-grunt – Danův stack zde pokrývá totéž jako v případě Gulpu a opět je hezky česky zdokumentovaný.
• htmlfactorycz/grunt-frontend-starter – hezky zdokumentovaný pokročilý devstack od Vitalije Petráše.

Webpack

Webpack je nepostradatelný pro svět javascriptových aplikací, ale je na něm také možné stavět moc hezké devstacky i pro statické weby.

• zmrhaljiri/superdevstack – Běží na Reactu, ale používá statické šablony. Využitelné pro server side rendering pomocí Gatsby, Create React App nebo Next.js.
• PilulkaDistribuce/webpack-boilerplate-es6-sass – Webpack 4, SASS, fonty, SVG a obrázky, ES moduly.
• trainit/2018-03-nette-webpack – Zakladní Webpack nakonfirugovaný pro použití s Nette a JS knihovnou Naja.
• laravel-mix.com – Webpack atd. Složitější a anglicky, ale důsledně zdokumentováno.

Další možnosti

• ondras/es6-boilerplate – základní sada Ondřeje Žáry, která využívá Make pro buildování, Rollup pro bundlování, Babel pro JS, LESS pro CSS.
• facebook/create-react-app – základna pro tvorbu React aplikací, jako příklad komplexnější základny, spíše na úrovni Starter Kitu.

Grunt, Gulp nebo NPM skripty?

Jak jste si asi všimli, Dan Střelec připravil skvělou sadu devstacků, díky kterým si můžete porovnat nejčastější automatizační nástroje:

• danielstrelec/ds-grunt
• danielstrelec/ds-gulp
• danielstrelec/ds-npm

Pokud tedy váháte, který vybrat, Daniel vám to vcelku dost usnadnil. Takže díky!

Máte vlastní? A mohli bychom ho vidět?

Tahle stránka je samozřejmě „under construction" a velmi uvítám každý nový příspěvek. Zajímám se hlavně o ty, které k věci přistupují jinak než už uvedení zástupci. A pak o ty používanější ze světové scény.