Front-End alati (pregled)

Package manager

Uvod

frontend

Današnji web development se zasniva na skupu različitih tehnologija koje se istovremeno koriste na jednom projektu, kao što je: Typescript (jezik), Sass (CSS ekstenzija), JSCS (code style linter and formater), JSHint ili TSLint (alat za detekciju grešaka i potencijalnih problema), BrowserSync (alat za sihronizaciju promena u kodu i u browser-u – Live reload )… Za jedan projekat je potrebna instalacija svakog od navedenih programa ali i svih programa (dependencies) od kojih zavise isti a prethode njihovoj instalaciji.
Package manager eliminiše potrebu za ručnim instaliranjem softvera sa svim neophodnim pratećim softverom (dependencies) kao i za ažuriranje svih tih komponenti. Package manager je skup alata zaduženih da automatizuju procesa instaliranja, konfigurisanja i uklanjanja programa. Package manageri rade sa packages tj. sa softwerom ili podacima koji se nalaze u arhivnim fajlovima. Package sadrže meta-data koji opisuju dati softver kao što je naziv softvera, verzija i lista svih dependencies (drugi softver neophodan za rad datog sofvera). Najpoznatiji package menadžeri su:

  • npm
  • bower
  • JSPM (JavaScript Package Manager)
  • Yarn

Continue reading…


Grunt

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:

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:

Svaki zadatak koji želimo da dodamo mora prvo da prethodno da bude instaliran kao dependences u package.json-u.

Svojstva grunt objekta

  1. InitConfig

    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

  2. LoadNpmTasks

    Ovo svojstvo se koristi za učitavanje plugina:

  3. 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:

    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”

    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:

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:

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.


Instalacija alata za web development

Uvod

alati

Ovaj članak služi kao podsetnik jednom web programeru pri instaliranju svih neophodnih alata za rad na novom ili reinstaliranom kompjuteru. Taksativno je opisana instalacija alata koje lično koristim kao i neka njihova osnovna setovanja. Web development pokriva veliki broj različitih tehnologija i programskih jezika stoga je spisak potrebnih aplikacija takodje veliki.

Continue reading…