Uvod
Grunt je alat napisan u Node.js, stoga je pre instaliranja Grunt-a potrebno instalirati Node.js i njegov package manager npm. Ukoliko su već instalirani potrebno je proveriti da li su ažurne verzije i ako je potrebno uraditi njihov update. Pošto je jedano od čestih zadataka Grunt-a kompajliranje SASS-a u CSS, potrebno je imati instaliran SASS. Sve ove instalacije su objašnjene u članku Install tools for web development
Npm i početni package.json
Package.json se koristi od strane npm-a jer čuva meta podatke vezane za module koje instalira npm u okviru projekta. Unutar fajla se nalazi lista i mapa sa zavisnostima projekta (dependecies ili devDependecies) koji mogu da se downloaduju. Ovime olakšavamo nekome ko će da koristi naš projekat da ih downloaduje samo ako mu trebaju.
Za lokalnu instalaciju je potrebno da namestimo putanju u komonadnoj liniji na lokalni izabrani folder gde ćemo praviti grunt projekat. Zatim izdajemo naredbu koja pravi osnovni package.json fajl:
npm init
Nakon startovanja naredbe u command prompt-u aplikacija traži da se popune pitanja koja su potrebna za pravljenje package.json fajla, kao što su :
- name
- version
- description
- keywords
- ….
Više o popunjavanju pogledajte ovde
Grunt instalacija
Globalna instalacija Grunt-a
Instalacija grunta se vrši iz komandne linije sa naredbom:
npm update -g grunt
Instalacija interfejsa
Zadatak interfejsa je da učitava lokalnu instalaciju Grunt biblioteke i da primenjuje konfiguraciju iz lokalnog Gruntfile-a da bi izvršio zadatke koji su od njega zatraženi
Instaliranje command line interfejsa tzv. grunt-CLI naredbom:
npm install -g grunt-cli
Lokalna instalacija Grunt-a
npm install grunt –save-dev
Instalacija Grunt plugina
Gruntu se najčešće dodaju već pripremljene funkcionalnosti preko plugin-a. Pri instaliranju plugina postoje dve mogućnosti za čuvanje zavisnosti kao:
- dependeces
su zavisnosti koje se uvek downloaduju sa vašim modulom
- devDependeces
su zavisnosti koje se koriste samo pri razvoju. Kada stavimo neku zavisnost u devDependeces onda možemo da sprečimo da krajnji korisnik ne downloaduje i ove zavisnosti koje se koriste samo pri razvoju modula. Ukoliko želimo plugin bude kao razvojni depenseces onda pri instalaciji uz naredbu dodajemo nastavak “-dev” deo.
Pri instaliranju plugina u package.json fajl se automatski dodaje odogovarajući zapis. U zavisnosti da li smo koristili nastavak “-dev” ili ne zapis će biti sačuvan ili u “dependeces” ili “devDependencies” sekciji.
Spisak i pretragu svih dostupnih grunt plugin-ova možete potražiti na oficijelnom sajtu. ili izlistati jednostavnom naredbom:
npm search grunt
Najčeće korišćeni plugini za grunt su:
Naredbe sa nastavkom ” -dev ” označavaju da će se dependences koristiti pri razvoju projekta (tj. development-u) i pojaviće se u package.json fajlu pod “devDependencies”!
Primer
Pri instalacija lokalnih dev-dependences preko pluginova automatski se unutar package.json fajla popunjava i njegov kod koji po završetku instaliranja može da izgleda ovako:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
{ "name": "my-project", "version": "0.0.1", "description": "My project" "devDependencies": { "grunt": "^0.4.5", "grunt-concurrent": "^1.0.0", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-imagemin": "^0.8.1", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-uglify": "^0.6.0", "grunt-contrib-watch": "^0.6.1", "grunt-sass": "^0.16.1", "load-grunt-config": "^0.13.1" }, "dependencies": { "jshint-stylish": "^1.0.0", "time-grunt": "^1.0.0" } } |
Definisanje karakteristika Grunta (gruntfile.js)
Kada u package.json fajlu definišemo zavisnosti onda ćemo moći da ih pozovemo u okviru Gruntfile-a jednostavnim komandama. Pravljenje Gruntfile.js počinje kreiranjem samog fajla u root-u našeg projekta i ubacivanjem početnog koda:
|
module.exports = function(grunt) { // ovde se stavljaju naredbe // koje aktiviraju dependeces registrovane u package.json }; |
Svaki zadatak koji želimo da dodamo mora prvo da prethodno da bude instaliran kao dependences u package.json-u.
Svojstva grunt objekta
-
InitConfig
|
grunt.initConfig({ // Ovde ide kod za definisanje svojstava svakog plugin-a }); |
Ovo svojstvo se koristi za konfigurisanje svojstava plugina. Objašnjenje kako se definišu svojstva vezana za primenu svakog plugina je najčešće objašnjeno kroz primere na oficijelnim stranicama plugin-ova:
Primer
|
grunt.initConfig({ uglify: { options: { mangle:true, compress:true, sourceMap:"dest/aplication.map" banner:"/* Moj Ružni kod */\n }, target : { src:"src/aplication.js" dest: "dist/aplication.min.js" } }); |
-
LoadNpmTasks
Ovo svojstvo se koristi za učitavanje plugina:
|
grunt.loadNpmTasks('grunt-contrib-uglify'); |
-
RegisterTask
Ovo svojstvo definiše alias naredbe koje objedinjuju više zadataka u odredjenom redosledu.
Primer
Ovo svojstvo će biti bolje objašnjena na sledećem primeru:
|
task.registerTask('dist', ['concat:dist', 'uglify:dist']); |
Naredba pod aliasom “dist” iz prethodnog primera će izvršiti dve operacije (concat i uglify) a pokrenuće se u CMD-u sa samo jednom naredbom:
grunt dist
Ukoliko za prvi parametar fukcije stavimo default tada će se koristi default-na naredba za alias “grunt”
|
grunt.registerTask('default', ['build','watch']); |
Defaultni alias se pokreće sa naredbom:
grunt
Pogledajte više o ovome ovde
NAPOMENA:
Pri korišćenju naredbe grunt.registerTask zadatak “watch” mora da uvek bude poslednja stavka jer ovaj zadatka traje sve dok ga user ne prekine, što znači da se ne bi nikada startovao zadatak posle njega!
Primer
Na sledećem primeru je prikazan mogući krajnji izgled gruntFile.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
|
module.exports = function(grunt) { //Definisanje svojstava plugina: //--------------------------------------------------------------------------------------------- grunt.initConfig({ //********* .SCSS to .CSS *************** compass: { compile: { options: { sassDir: "assets/scss", //može i druga opcija: specify: "sass/bootstrap.scss", cssDir: "assets/stylesheets", outputStyle: "nested" //može i druga opcija: outputStyle: "compressed" }//options }//dev }, //compass //********* PostCSS tj. AUTOPREFIXER *************** postcss: { options: { map: true, // inline sourcemaps processors: [ require('pixrem')(), // add fallbacks for rem units require('autoprefixer')({browsers: 'last 2 versions'}) , // add vendor prefixes require('cssnano')() // minify the result ] }, dist: { src: 'css/*.css' } }, //********* watch *************** watch: { grunt: { files: ['Gruntfile.js'] }, sass: { files: 'scss/**/*.scss', tasks: ['sass'], }, postcss: { files: 'css/*.css', tasks: ['postcss'] } } }); // Učitavanje plugina: //--------------------------------------------------------------------------------------------- grunt.loadNpmTasks('grunt-postcss'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); //Alias naredbe //--------------------------------------------------------------------------------------------- grunt.registerTask('default', ['watch']); grunt.registerTask('full', ['compass', 'postcss', 'string-replace']); }; |
Kreiranje Grunt projekta koristeći template
Template Grunt projekata se koristi za rapid programming jer omogućava korišćenje već gotovih template-a. Template možete praviti sami ili koristiti neke sa github-a. O korišćenju template-a pročitajte na oficijelnoj stranici ovde.
Instalacija gotovih template
Pre korišćenja pripremljenih template-a, moramo prvo da instaliramo svaki template koji ćemo koristiti na naš komjuter. Da bi instalirali template moramo prvo da imamo globalno instaliran noseći sistem za template (grunt-init), ukoliko ga nemamo instaliranog onda ga instaliramo naredbom:
npm install -g grunt-init
Nakon ovoga nam je dostupna naredba grunt-init i sa njom možemo da instaliramo template.
Pluginovi za template se pri instalaciji smeštaju u folder .grunt-init, pa zbog toga pri instaliranju path u komandnoj linij treba da bude namešten na:
C:\Users\ImeUsera\.grunt-init
U folderu .grunt-init možemo proveriti da li su neki template-ovi već instalirani, mada isto možemo da uradimo i sa naredbom:
grunt-init –help
Svaki template se instalira prema uputstvu na njegovoj oficijelnoj stranici, mada je najčešće ponudjeno da se klonira projekat.
Windows korisnici moraju da obrate pažnju na link sa koga se klonira jer moraju da naprave malu promenu tako što iz linka za kloniranje obrišu ~/
Primer
U ovome primeru je korišćena naredba za kloniranje iz template-a grunt-init-jquery
C:\Users\ImeUsera\.grunt-init>git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
A da bi se koristio i na windows-u moramo ga prepraviti tako što ćemo obrisati “~/”
C:\Users\ImeUsera\.grunt-init>git clone https://github.com/gruntjs/grunt-init-jquery.git .grunt-init/jquery
Neki od često korišćenih template-a su:
Kreiranje Grunt projekta
Napravimo folder gde ćemo da stavimo naš novi grunt projekat, zatim u komandnoj liniji dok smo unutar projektnog foldera napravimo grunt projekat prema template-u koji smo već prethodno instalirali globalno, koristeći naredbu:
|
grunt-init željeniTemplate |
zatim je neophodno da downloadujemo (instaliramo) sve dependeces koje su navedene u package.json sa naredbom:
npm install
Dependeces će biti smešteni u folderu node_modules.
Postoji mogućnost da napravimo naše custom templates ali to je advance tema, više o custom template ovde.