The State of Grunt - August 2014

Eu tot sper la o magie ce va reduce timpul necesar unei compilări de sass și lint+minify JS sub 0.5s.

http://cowboy.github.io/state-of-grunt-fe-summit-2014-talk/

1 Like

Nu inteleg

  1. ,de ce nu iti face sub 0.5s De ce ai nevoie de 0.5s?
  2. de ce ai neveoi de de minify in dev
  1. Pentru că este extrem de frustrant să salvezi și să nu poți face refresh în browser imediat.
  • mai nou nu mai fac minify în dev, dar chiar și concat durează un pic. De ce concat în dev? În grunt specific /**/*.js ca sursă. M-aș complica prea mult să ajung la rezultatul ăsta în php.
1 Like
  1. LiveReload :slight_smile: Intr-adevar o sa fie cam ciudat pana te inveti sa nu mai dai ctrl+f5. La mine dureaza cam cam 30 de secunde un proiect complicat cu vreo 10 sprite-uri. Nu mai tin minte dar fara spriteuri dura foarte putin (cateva secunde)
  2. Ok. Eu in dev nu le tin nici minify nici concat. Le vad in varianta pura.

Toate task-urile se se execută în aproximativ zece secunde (din care trei sunt testele, două sunt uglify și alte două sunt sprites; testele durează atât de mult pentru că pornește Karma mai greu).

Cum incluzi toate JS-urile dacă urmează un pattern ca mai sus? (sau poate chiar ceva mai avansat, de forma [ "**/*.js", "!**/foo*.js" ]?

Pentru grunt am folosit patternul respectiv. Folosesc de putin timp si inca nu m-am uitat in detaliu cum ar trebui sa fac corect. In mod normal intr-o aplicatie am mai multe fisiere generate (minificate). Una generala pentru toata aplicatia, si unele pentru pagini mai speciale.

In php definesc in functie de env fisierele corect. Ex.

if(APP_ENV=='dev'){
$addJs[]='galerie.foto.js'
$addJs[]='plugin.de.galerie.foto.js';
}else{
$addJs[] = 'galerie.min.js'
}

Aha!

Eu tocmai peste asta vreau să trec când folosesc grunt în dev: specificarea fișierelor ce trebuiesc a fi incluse!

Sunt doi pași extra:, în loc de „new file” trebuie să fac „new file, editez fișierul ce include js, adaug noul fișier”. La ștergere este la fel: în loc să șterg un fișier și gata, trebuie să mai editez încă o dată fișierul ce include JS și să șterg linia corespunzătoare.

La proiecte mici și foarte mici e ok (sau dacă nu prea scrii JS), că ai trei fișiere și e greu să greșești undeva. Eu însă prefer să sparg totul în fișiere distincte; știu ce este în common/polyfills/RAF.js sau app/navigation.js fără a deschide respectivele fișiere.

Am configurat Grunt să îmi citească fișierele dintr-un fișier JSON. Următorul pas este să fac un helper ce parsează acest JSON și include fișierele ce sunt definite aici (folosind glob).

Poti face un folder pentru fiecare target. Bininteles ca sunt fan impartirea pe fisiere (cu cat mai multe cu atat mai bine).

Daca te deranjeaza ca la fisier sa il scrii in grunt specs (asta ar fi munca de deploy) atunci ai putea face un folder pentru fiecare target…astfel ce ai in all//*.js se duce in all.min.js articol//*.js in articol.min.js

├── js/
│   ├── all
│   │   ├── dir1
│   │   │   ├── file1.js
│   │   │   ├── file2.js
│   │   ├── dir2
│   │   │   ├── file1.js
│   │   │   ├── file2.js
│   ├── articol
│   │   ├── dirA
│   │   │   ├── fileA.js
│   │   │   ├── file2.js
│   │   ├── dirB
│   │   │   ├── file1.js
│   │   │   ├── file2.js

Eu unul nu am facut asta pentru ca mai am dependinte din folderul vendor (generat de bower) si inca nu am cautat/gasit o solutie (probabil ca ar trebui sa o fac cu require, nu am avut timp sa ma gandesc).

Nu inteleg totusi de ce te scriptul tau compileaza si scss-ul si js-ul (ma refer in varianta dev). Adica fie modifici scss-ul si atunci se compileaza scss-ul, fie modifici testele, si atunci pornesc testele sau minificare (daca lucrezi cu minificarea si in dev)

1 Like

Păi rulează ce se modifică :slight_smile: La SASS se execută task-ul SASS, la JS se execută lint & co șamd. Dar chiar și așa, nu m-ar deranja o înjumătățire a timpului de execuție :wink:

Nu stiu daca vorbim de acelasi lucru. Nu se ruleaza in acelasi timp. Tu daca ai facut o modificare in IDE in fisierul de scss watch-ul va vedea singur modificarea si va porni. In plus daca ai codul impartit pe fisiere va compila doar bucatica fisierele din path-ul schimbat.

E clar ca orice injumatatire e buna, insa cred ca watch-ul si live reload-ul ajuta mult in ameliorarea impactului.

Intr-adevar simt ca nu mi-am pus la punct tot sistemul si am ramas cu solutii hibride , combinand solutiile din ultimii ani ce erau la dispozitie. //TODO

Probabil tu faci mai mult … orice altceva (e.g. PHP) și mai puțin js/css și nu deranjează foarte mult dacă aștepți câteodată 2-3 secunde să facă reload.

Dar când scrii JS fără (prea multe) teste sau când deja faci teste de integrare cu un API extern și ai nevoie să ajustezi, să încerci să una-alta (adică situația în care sunt fix acum), ajungi să pierzi 10 minute/oră doar așteptând browserul să facă livereload.

Și să zicem că cele 2-3 secunde/refresh nu-s mare brânză ca unitate de timp, dar sunt suficiente pentru a te scoate din flow.