K cemu je dobry Grunt + Bower (+ Yeoman)

(pro nedockave)

Sandbox s podporou composer + bower + grunt + par vychytavek

Kdo by chtel vyzkouset jak se da pohrat s build konfiguraci v praxi, se muze mrknout a nebo rovnout zkusit si pohrat s cvicnym sandboxem https://github.com/…/nplayground, ve kterem si hraju s formulari, atp.

// -1. mit nainstalovat podporu npm a node.js na ubuntu napr
$ sudo apt-get install npm

// 0. jednou globalne nainstalovat bower a grunt
$ npm install -g bower
$ npm install -g grunt-cli

// 1. pokud jiz mate nainstalovane vsechny nastroje, staci jen
$ composer create-project leonardoca/nplayground my-app
$ cd my-app
$ npm install
$ grunt

jiz je vyreseno:

• instalace bower komponent
• autowiring (ne uplne univerzalne), tj automaticke vlozeni pridanych js/css zavislosti primo do sablon
• dokopirovani toho co je treba kam je treba
• jak „hacknout“ kdyz nejaky balicek nema bower.json kompletni (a nebo ho nema vubec)
• snadny, temer automaticky release verzi
• automaticka tvorba changelogu na zaklade commitu (filtrovanych)

nedoslo jeste na:

• kompilaci less
• automaticke pridani verze souboru na urovni gruntu (obdoba main.js?v0.0.3)
• clean (obcas to chce zamest)
• lepsi struktura spousteni tasku
• testovani php i js
• watch

diky za link

Pokud jde o less, chci si pridat do sandboxu reseni, abych si mohl editovat vlastni bootstrap template, pridavat vlastni mixiny, ja se designu moc nevenuju, a zatim jsem si css vzdycky nejak dobastlil, chci to uz zacit delat spravne, ale to se musim nejdrive doucit less a nadefinovat si jaka struktura mi bude vyhovovat.

Pokud jde o verze souboru, tak to uz trochu podobne resim, pro production verzi. Ale uvazuju jestli nebude zajimavejsi to nechat na starosti nejakemu grunt pluginu, ktery dokaze pridavat verze souboru do nazvu souboru, pri kazde uprave a to nejen u js, css, ale treba i obrazku …, pak o tom v kodu template nemusi byt ani zminka … a bude to fungovat automaticky (akorat s tim bude trosku vic prace to nakonfigurovat)

drzim palce s tim Yomanem, chystam se k tomu uz dlouho, ale skoncil jsem s tim ze jsem si stahnul angular generator a symfony generator a dal nebyl cas … nebo spise bylo vzdy neco dulezitejsiho nez toto …

co se tyce struktury css tak jelikoz chces pouzivat bower tak on ti ji nadefinuje a nema cenu to nikterak resit …

Vzhledem k tomu, že ekosystém okolo obou projektů pokrývá 99 % potřeb webového vývoje, je to imo opravdu jen volba podle toho, co ti připadá přehlednější a příjemnější na používání. Hlavní rozdíly vidím dva:

• Gulp používá streamy, takže nemusíš řešit nějaké přechodné soubory, když provádíš řetězy akcí jako např. coffee -> concat -> uglify -> sourcemaps. Prostě všechno zřetězíš za sebe a občas nějaké streamy pospojuješ. Gulp si pak všechno udělá v paměti a zapíše až úplný výsledek.
• Code vs configuration. Právě tady se láme chleba. Mi se třeba lépe čte i píše Gulpfile než Gruntfile (a to i tehdy, když mě coffeescript ušetří psaní závorek a dalších blbostí). Ale to je dost subjektivní, takže alespoň jedno objektivní měřítko: Gulpfile se stejnou funkcionalitou je obvykle i výrazně kratší.

Diky za tema kluci. Meli byste ke gruntu nejake uzitecne zdoje (2–3) pro zacatek?
Už spravuju závislosti pomocí boweru, grunt čerstvě nainstalován.

Editoval Tomáš Votruba (21. 1. 2015 13:51)

Mi se mezitim podarilo rozchodit konfiguraci vcetne podpory pro grunt/bower/redis/mysql, takze mi cely build aplikace probehne i na Travis CI a snazim se o kompletni CI, vcetne deploymentu, to se mi podarilo rozbehnout pro novy Pagoda box, ale tam build bezi zase pres Boxfile

Jeste to neni uplne komplet podle mych predstav, takze az doladim napisu trochu vic.

Editoval LeonardoCA (21. 1. 2015 18:56)

@chemix Díky. Zmíněné odkazy už jsem proklikal.

@DavidĎurika Díky. Zkusím.

@LeonardoCA Díky za konkrétní kód!

Upřesním: lépe zdroje zahraniční a za poslední půlrok.

Editoval Tomáš Votruba (22. 1. 2015 14:05)

Rozdělujete assets per modul?

├── app
│   └── modules
│       ├── admin
│       └── front
└── www
    └── assets
        ├── admin
        └── front

@iguana007 a nechtěl by ses podělit o svůj gulpfile.js? :)

Editoval o5 (20. 2. 2015 11:49)

@LeonardoCA Díky za pěkné shrnutí, dneska jsem byl na školení u Rikiho Fridricha a konečně jsem pořádně pochopil k čemu to celé je (Grunt/Bower/Yeoman), Gulp se mi nelíbí.

Těším se na víkend a na sandbox až se v něm trošku pohrabu a přiučím se.

@o5 Ahoj, díky za tipy. Já nemůžu po tak krátké době soudit, ale zatím se mi líbí víc líbí GRUNT, ze začátku jsem to vůbec nechápal, pak jsem si zkusil pár tasků a ta syntaxe a celkově mi přijde logičtější a přehlednější. Je možné, že po čase změním názor. Linky si uložím a projdu v dohledné době (kromě Sass Way ;-), tam jsem jak doma krom dokumentace k SASSu a Compassu).

Jsem, ale trošku divný, vybírám si pro někoho naoko složitější a robustnější řešení – např. všichni kolem mě používají LESS a o ten bych si neopřel ani kolo (taktéž kombinaci jako ty Sass/Compass, akorát mi začíná vadit dlouhé generování … středně velký projekt, přegenerování souborů ~ 4–8s, ještě mám v plánu mrknout na LibSass, kolega to začal používat a libuje si jak je to rychlé, bohužel v Compassu jsou jisté věci kterých se zbavit nechci.

Musím pomalu, s Gruntem jsem začal před 2 dny ;) a je fakt, že během školení kdy lektor povídal o Gulpu jsem si psal tasky v Gruntu a zkoušel co to umí a co ne, a když začal povídat o "pipes, streamech atd… tak jsem si řekl, co je to za sra*cku a už tomu moc pozornost nevěnoval, ale časem se k tomu vrátím).

@o5 je to moc no, člověk si asi dokáže představit když napíše 2 řádky CSS, vybuildí (já to mam v SublimeText2 na control + save) a pak si může jít uvařit kafe, než se to přegeneruje. Může za to můj starší PC a COMPASS (pěkný článek o tom napsal Hugo G.

Donedávna jsem generoval pomocí cmd a pušteného watch compassu, pak jsem objevil build do sublime a ted si to chci vyzkoušet přes GRUNT (a zkusit vyhodit compass a narvat tam LibSass).

Jsem na to zvědavej.

// PS kdybych ti poslal svůj SCSS, zkusil bys to vygenerovat? Docela by mě zajímal čas …

Editoval Kcko (26. 2. 2015 21:21)

@o5

no mám v plánu udělat test přes víkend (středně složitý projekt s compassem)

1. Pustit ho klasicky přes compass watch nebo build jak dělám nyní
2. Pustit ho přes Grunt
3. Pustit ho přes Gulp

ale zajímalo by mě srovnání z rychlejšího PC (jak jsem psal můj komp je už nic moc, a pořád hledám řešení rychlosti a možná bych to vyřešil silnějším NTB a pak bych třeba mohl zůstat u 1 nebo 2 …)

Proto jsem se ptal jestli bys to nezkusil ty pokud máš silnější PC než já (CoreDuo2, 4GB Ram, 320 GB – ne SSD)

Ahoj všem, nechtěl jsem zakládat novou diskusi a s výše uvedeným to vlastně souvisí.
Jsem v Nette začátečník a nevím, jestli dělám něco špatně. Používám Gulp + Browsersync s proxy (v gulpfile.js). Všechno funguje bez problémů, problém je jen ten, že když odešlu Nette formulář, tak sice všechno proběhne v pořádku, ale při redirectu mi z URL zmizí číslo portu. Zkoušel jsem si udělat klasický HTML formulář a ten je v pohodě. Nevíte, co s tím?

Díky moc za odpověď! Nicméně to asi není to pravé. Je pravda, že to vyřeší, že nezmizí z URL číslo portu, ale nedojde k redirectu. Mám ten formulář jako samostatnou komponentu a v ní i callback onSuccess[] (viz nasledující).

protected function createComponentRegistrationForm() {
        $form = new Form;
		/* jednotliva formularova pole */
		$form->addSubmit('send', 'Registrovat')
		$form->onSuccess[] = [$this, 'formSucceeded'];
        return $form;
    }

public function formSucceeded($form, $values) {
		/* zpracovani dat */
        $this->presenter->redirect('Registration:success');
    }

Takže pořád nevím :-(

Editoval snizemic (16. 2. 2016 17:09)

Aha, pardon za neúplnou informaci. Mám to normálně jako samostatnou komponentu:

class RegistrationForm extends Control {

protected function createComponentRegistrationForm() {
        $form = new Form;
        /* jednotliva formularova pole */
        $form->addSubmit('send', 'Registrovat')
        $form->onSuccess[] = [$this, 'formSucceeded'];
        return $form;
    }

public function formSucceeded($form, $values) {
        /* zpracovani dat */
        $this->presenter->redirect('Registration:success');
    }

}

V presenteru pak formulář vytvářím pomocí vygenerované továrny a předávám ho klasicky do šablony.

:) Nevím, jestli ti jde o něco konkrétního, ale dump vrátí RegistrationPresenter, tj. presenter, ve kterém tu komponentu vytvářím.

Používám Nette\Application\UI\Form, jak píšeš :) Zkoušel jsem to zpracování formuláře udělat až v presenteru, ale je to to stejné. Zajímavé…
Každopádně moc díky za snahu!