Task-uri utile Grunt

@Work Tools of Trade
1

Grunt este unul din build-tools ce au prins foarte bine în ultimii doi ani. Sigur, după el au mai apărut câteva (Gulp și încă vreo două al căror nume în scapă), dar a avut avantajul că timp de un an s-au dezvoltat plugin-uri doar pentru el.

Configurarea este rezonabil de ușoară iar task-uri sunt pentru… orice. De la minify până la deploy.

Acestea fiind spuse, ce plugin-uri folosiți constant?

Eu am așa:

  • JSHint
  • Stylish (pentru jshint)
  • Uglify
  • Sass
  • Spritesmith
  • Clean (pentru a șterge fișiere ce nu mai sunt necesare)
  • Copy (pentru copierea fișierelor ce nu sunt procesate în vreun fel, e.g. fonts)

Pe lângă astea, mai am câteva plugin-uri ce nu se văd în rezultatul final:

  • time (arată statistici cu timpul petrecut la fiecare task)
  • watch
  • load-grunt-tasks (pentru a nu încărca manual fiecare plugin)
  • jit (pentru a încărca un plugin doar când este neveie de el)

Bonus

2 Likes
2

Cu ce iti pui js (si/sau css) in ordinea dorita intr-un fisier concatenat?

3

Pentru ce il folosesti?

4

@danstefancu: De regulă încerc să scriu JS independent unul de altul, astfel încât ordinea să nu conteze. Sau dacă există dependențe, se face inițializarea la sfârșit.

Dar dacă este musai nevoie de o anume ordine, pot specifica în assets.json:

"javascripts" : {
  "in_ordine" : {
    "src" : [
      "src/javascripts/ordonate/1.js",
      "src/javascripts/ordonate/2.js"
    ]
  },

  "in_dezordine" : {
    "src" : [
      "src/javascripts/dezordonate/*.js",
      "src/javascripts/dezordonate/**/*.js"
    ]
  }
}

Asta îmi va genera un in_ordine.min.js și in_ordine.dev.js respectiv in_dezordine.min.js și in_dezordine.dev.js.

@Catalin_Banu: pentru generarea de sprites. Pentru că nu tot timpul pot folosi svg sau font-icons. :poop: Partea bună este că îl folosesc destul de rar (cam unul din trei-patru proiecte are nevoie de sprites).

5

Am ajustat un pic Gruntfile și modul în care sunt folosite chestiile:

  1. Am spart fișierul în mai multe module ce-mi generează config pentru fiecare task în parte
  • am adăuagt test runnere pentru jasmine și karma+jasmine (config-ul de karma funcționează independent de grunt dar și din grunt)
  • într-un fel sau altul am reușit să scad timpii de execuție (nu sunt foarte sigur însă cum). Dacă la un proiect măricel dura ~9 secunde până se executau toate task-urile, am reușit să scad acest timp la sub 3 secunde. Watch a scăzut și el de la ~3 secunde la mai puțin de o secundă. Satisfăcător, zic eu :smile:

(toată povestea asta e gândită să fie folosită în combinație cu grunt-init ntz-wp, de aceea apar ciudățenii de genul {%= name %})