Grunt

Ismerkedés a Grunt-tal

A Grunt-ról szóló cikksorozat első részében megismerkedünk ezzel a hasznos eszközzel. Feltelepítjük, majd egy rövid példán keresztül megnézzük működés közben.

Miért érdemes használni?

A kulcsszó az automatizálás. Számtalan kisebb-nagyobb feladat előfordul webfejlesztés közben, melyeket gyakran kell ismételnünk. Ezek a feladatok lehetnek CSS illteve JavaScript fájlok tisztítása, összenyomása, összefűzése, képek optimalizálása, ellenőrző eszközök futtatása, különböző előfordítók használata. A Grunt segítségével ezeket a feladatokat tudjuk könnyedén automatizálni.

Ahogy a felsorolt listából is látszódik, a Grunt nem csak a JavaScript fejlesztőknek, hanem a sitebuildereknek is hasznos segédeszköze lehet! Véleményem szerint JavaScript fejlesztők eszköztárából meg egyszerűen nem is hiányozhat ez a remek program!

Telepítés

Első lépésként a NodeJS-t kell feltelepíteni a gépünkre, amennyiben nem rendelkeznénk vele. Windows esetén ez rendkívül egyszerűen megoldható, látogass el a nodejs.org oldalra, majd kattints az Install gombra, a letöltött .msi fájlt indítsd el, és néhány kattintás után már készen is vagyunk. (A többi operációs rendszer esetén sem sokkal összetettebb a telepítés.)

A parancssorba adjuk ki a következő utasítást, megnézve, hogy lássuk valóban sikerült-e a telepítés?

node -v

Ezután a NodeJS csomagkezelőjére lesz szükségünk, ezzel telepítjük fel a Grunt-ot.

npm install -g grunt-cli
Ellenőrzésképpen most is nézzük meg, hogy valóban sikeres volt a telepítés? 
grunt --version

Ha ezzel megvagyunk, akkor készítsünk egy teszt projektet, ahol megismerkedünk a Grunt-tal és néhány Grunt modullal.

Kiegészítő modulok telepítése: package.json

Először létre kell hozni a projekt mappájában egy package.json nevű fájlt, amelyben megadjuk, hogy a npm még milyen csomagokat telepítsen.

{
    "name": "MyProject",
    "version": "0.0.0",
    "author": "Gabor Turi",
    "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-jshint": "*",
        "grunt-contrib-uglify": "*",
        "grunt-contrib-sass": "*",
        "grunt-contrib-watch": "*"
    }
}

A devDependencies -ben találhatóak a függőségek felsorolása, azaz azok a modulok, amelyekre szükségünk lesz majd. Megadhatjuk, hogy mely verzióra van szükségünk, de * -gal jelezhetjük, ha a legújabb verziót szeretnénk használni. A ~ jelentése, hogy az adott verzióra van szükségünk vagy annál újabbra, amely legfeljebb a harmadik számban tér el. (Ekkor, ha a szemantikus verziózás szabályait a modul készítői betartották, akkor csak lefelé kompatibilis változásokkal egészítették ki a programot.)

Mentsük el a fájlt, majd indítsuk el a telepítést. Az adott mappában adjuk ki a következő utasítást.

npm install

Ez eltarthat egy ideig, ekkor az összes szükséges program letöltésre és telepítésre kerül.

Feladatok létrehozása: Gruntfile.js

Következő lépésben elkészítjük a Gruntfile.js nevű fájlunkat, amelyben megadjuk, hogy milyen feladatokat szeretnénk elvégeztetni a Grunt-tal. Ezt a fájlt is ugyanúgy a projekt mappájában kell létrehozni.

var grunt = require('grunt');

grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.initConfig({
    jshint: {
        files: ['js/*.js'],
        options: {
            ignores: ['js/*.min.js']
        }
    },
    uglify: {
        my_target: {
            files: {
                'js/site.min.js': ['js/site.js']
            }
        }
    }
});

grunt.registerTask('default', ['jshint', 'uglify']);

Az első utasítással létrehozzuk a grunt változót, majd a következő kettővel betöltjük a két megadott modult, a negyedik utasítással beállítjuk a konkrét feladatokat. Végül, az utolsó utasítással megadjuk, hogy az alapértelmezett feladat a megadott két feladat egymás utáni végrehajtása legyen. Későbbiekben a modulok betöltését másként fogjuk megvalósítani, de első körben tisztább ez a megoldás.

Két taszkot adtunk meg, az első a remélem sokak által ismert és használt JSHint, amivel különféle ellenőrzéseket tudunk futatni a JavaScript kódon, míg a második segítségével a JavaScript fájlokat tudjuk összenyomni a megadott új fájlban. Sajnos azt látni kell, hogy a két modulnál különböző a paraméterezés. Elsőre ez talán zavaró lehet, ám hamar meg lehet szokni.

Készítsünk el egy tetszőleges js/site.js fájlt, hogy legyen min végrehajtani a feladatokat!

Ezután ha beírjuk a konzolba a grunt utasítást, akkor az alábbihoz hasonló eredményt kell kapnunk.

Ezután a site.js fájl mellett megjelent a site.min.js fájlunk.

Ennél részletesebb kimenetet kaphatunk a grunt --verbose utasítás megadásával.

Ha csak az egyik feladatot akarjuk futtatni, akkor arra is van lehetőség. Például a grunt jshint utasításra csak az ellenőrző feladat futna le.

Következő lépésben egészítsük ki a projektünket egy tetszőleges Sass fájllal is, majd módosítsuk a Gruntfile.js -t a lentiek alapján.

// ...
grunt.loadNpmTasks('grunt-contrib-sass');
//...
grunt.initConfig({
    // ...
    sass: {
        build: {
            files: {
                'stylesheets/style.css': 'sass/style.scss'
            }
        },
        options: {
            style: 'compressed'
        }
    }
// ...
grunt.registerTask('default', ['jshint', 'sass', 'uglify']);

A kiegészítő modulok telepítésekor mi csak egy Sass wrappert telepítettünk, ha a gépen nincs fent a Sass program, akkor hibaüzenetet kapunk. A következő linken található egy leírás a Sass telepítéséről és működéséről. Telepítés után már gond nélkül tudjuk futtatni ezt a feladatot is.

Amennyiben szeretnénk, hogy a Sass fájl módosításakor automatikusan lefusson az átalakítás, akkor a következő taszk hozzáadására lesz szükség.

// ...
grunt.loadNpmTasks('grunt-contrib-watch');
// ...
grunt.initConfig({
    // ...
    watch: {
        css: {
            files: 'sass/*.scss',
            tasks: ['sass']
        }
    }
});
// ...

Most az alapértelmezett feladatlistát nem módosítottuk, így a sima grunt utasítás esetén nem változik semmi, ám ha kiadjuk a grunt watch utasítást, akkor a program folyamatosan figyelni fogja a megadott fájlok változását, változás esetén lefuttatja a megadott taszkot. Kilépni a Ctrl + C -vel lehet.

A watch taszknak több beállítási lehetősége is van, megadható, hogy a böngésző automatikusan frissítsen, ha változás történik, ehhez először be kell állítani a livereload paramétert igazra.

// ...
    watch: {
        css: {
            files: 'sass/*.scss',
            tasks: ['sass'],
            options: {
                livereload: true
            }
        }
    }
// ...

Továbbá az oldal forráskódjához hozzá kell adni a következő kódot.

<script src="//localhost:35729/livereload.js"></script>

Ekkor változás esetén automatikusan frissül az oldal.

A leírásban megpróbáltam a legnépszerűbb modulok közül kiválasztani néhányat, ám érdemes átnézni a Grunt-hoz készült modulok listáját, több ezer plugint készítettek már hozzá. Mivel valóban egyszerűen lehet saját modult készíteni, így várhatóan ez a szám tovább fog növekedni.

Zárszó

Ezzel a cikkel egy rövid betekintést szerettem volna nyújtani ennek a kiváló programnak a hasznosságába. A Grunt egyik erőssége a hatalmas plugin készlete, a következő részekben majd néhánnyal részletesebben is megismerkedünk, illetve további praktikákról is lesz szó, amelyek kényelmesebbé, egyszerűbbé teszik az eszköz használatát.

Folytatás

További linkek