�ݺ�ߣ

Editor's Notes

1. Witamnamojejdzisiejszejprezentacjidotyczącejautomatyzacjizadań w procesietworzeniaszablonów I rozszerzeńdlaJoomla!W porównaniu do poprzednichwykładów, temat ten będziesiębardziejskupiałnatechnicznychaspektachzwiązanych z tworzeniemstron WWW.
2. Ale zanimprzejdziemy do tematu, przedstawięsię.Nazywamsię Piotr Nalepa I z Joomla! mam styczność od 5 lat. Mniejwięcej od tegosamegoczasusięudzielamna forum Joomla! Gdziezawszesłużędobrąradą.Na początkuzaczynałem od tworzeniaprostychstron WWW, do czegoJoomla! sięidealnienadawała, a potemzacząłemzabawę z bardziejzaawansowanymirzeczamitakimijaktworzenieszablonówczyrozszerzeń.Obecniepracujęjakowebdeveloper w międzynarodowejfirmie, a w wolnychchwilachjestemwielkimfanempiłkinożnej (co nie jest zbytpopularnewśródprogramistów).
3. Odkilkulatprowadzęteżswojegoblogawebmasterskiego, gdziedzielęsię z ludźmiwiedządotyczącątworzeniastron WWW orazaplikacjiinternetowych.Przez ten czasuzbierałosiętrochęartykułówdotyczącychogólniepojętejwebmasterki, począwszy od efektówosiąganych z wykorzystaniemstylów CSS, poprzezróżnegorodzajuzastosowaniaJoomla! W codziennejpracy, a kończywszynapisaniudobregokodu JavaScript, czemupoświęcamostatnionajwiecejswojegoczasu.
4. Takjakwspomniałemwcześniej, tematemdzisiejszejprezentacji jest automatyzacjazadań w procesietworzeniaszablonów I rozszerzeńdlaJoomla!Kto z Was tworzystrony WWW lubaplikacjeinternetowe?Widzę, że jest kilkaosóbzajmującychsiętymnasaliinapewnomieliście “przyjemność” wykonywaniapowtarzalnychzadań, takichjak: kompresjaobrazków, np. Zapomocązewnętrznychstron WWW,Kompresjakodu CSS i/lub JS w celuzmniejszeniawagikońcowegopliku, a dziękitemuprzyspieszenieładowaniasięstrony,Sprawdzaniepoprawnościkodu, dziękitemułatwiejuniknąćniespodziewanychproblemówzwiązanych z wydajnością,Czyteż, przygotowaniekodugotowego do przekazaniaklientowilubwysłanianaWaszwłasny hosting.Bardzoczęsto, do tegowykorzystujesięwieluróżnychnarzędzi co wydłużaprocestworzeniastrony WWW.
5. Ale trzebapowiedziećsobie “STOP!” I zadaćpytanie: Czynie ma lepszegorozwiazaniaabyulepszyć ten procestak, abymniemusiał w kółkowykonywaćtychsamych, ważnych ale żmudnychczynności?
6. Owszem jest takisposób. NazywasięGrunt.js. Jest to modułdlaserweraJavascript – node.js, którymożemysobiezainstalowaćnawszystkichwiodącychplatformachsystemowych, takichjak Windows, Linux czyteż Mac OSX.Tymsamymsprawićabynaszapracabyłaznacznieprzyjemniejsza.
7. Abyzacząćkorzystać z Grunta, należymiećzainstalowanyserwernode.js, którypóźniejobsługujemyzapomocąliniikomend. Mam nadzieję, żehasło “liniakomend” niewprawiła Was w przerażenie,. Jest to fantastycznerozwiązanie, chociażproste w swojejpostaci.Po zainstalowaniuserweranode.jsmusimyodpalićdrugąkomendęnaliście, tj. ….. – dziękiczemumamyzainstalowanąobsługękomendmodułuGrunt.jsNastępnekomendy, instalująjużmodułGrunt.js w folderzeprojektu, a ostatnikomendaodpala go I dziejesięmagia. Potemna co dzieńjużbędziecieużywaćgłownietejostatniejkomendy.
8. Zanimjednakodpalimy 2 ostatniekomendywymienionenapoprzednimslajdzie, należyprzygotować 2 pliki: package.json I Gruntfile.js.Package.json jest to plik z danymi o projekcie, zwykłykod w formacie JSON – Javascript Object Notation.Możemy go wygenerować z automatuzapomocą komendynpminit.
9. Drugi z plików, Gruntfile.js jest plikiem w którymdefiniujemysposóbzachowaniasięmodułuGrunt.jsTo w nimokreślamyczychcemyabynamkompresowałplikiczyteżoptymalizowałobrazki, a możeaktualizowałautomatyczniestronę.Na slajdziewidaćprzykładowąkonfiguracjędlarozszerzeniauglify, któregozadaniem jest kompresjaplikówJavascript.
10. ZapomocąGrunt.jsmożemykompresowaćkodJavascript I kod CSS, dziękiczemuznaczącozmniejszymywagęplików, co przełożysięnaszybszeładowaniestrony WWW.Co zdecydowaniebędziezaletąjeślichcemyabynaszastronastworzona w Joomla! Szybkosięładowała w przeglądarkachdesktopowychjak I mobilnych.
11. DziękiGrunt.jsprzyspieszymyrównieżprocesyzwiązane z konwertowaniemkoduzapisanego w preprocesorachstylów LESS I SASS do kodu CSS. LESS I SASS są to programistycznesposobypisaniakoduodpowiedzialnegozawyglądstrony I pozwalająmiędzyinnyminawykorzystywaniezmiennychczyteżfunkcji. Ale to już jest tematnazupełnieinnąprezentację.Ponadto, możemyoptymalizowaćobrazki, którewykorzystujemy w szabloniedlaJoomla! Jest to ważne, ponieważ plikigraficzne (zdjęcia, tła) wygenerowaneprzezedytorygraficznetakiejak Adobe Photoshop niesączęstoodpowiedniozoptymalizowane I możnajeszczebardziejzmniejszyćichwagębezutratyjakości.Możemyrównież z takichobrazkówwygenerowaćsprite’yczylizestawobrazkówpołączonych w jedenplik I obsługiwanyprzezkod CSS. Bardzoprzydatnarzecz, jeślichodzi o optymalizacjęszybkościładowaniasięstron WWW.
12. Jedną z najciekawszychmożliwościGrunt.jsdlakażdegowebmastera jest automatyczneprzeładowywaniestronyzarazpozapisaniuzmian. JeślidodatkowoskonfigurujemysobieprocesdlaGrunt.jstakaby od razuwykonywałkompresjęplików CSS, JS orazobrazków to od razubędzieciemoglizobaczyćfinalnyefektWaszychpracprawietakjakby to widziałużytkownikWaszejstrony.Jest to jedna z najfajniejszychmożliwościGrunta I korzystam z niejna co dzień, bobardzoułatwiażycie.
13. Równieważna, przynajmniej z mojegopunktuwidzenia jest walidacjakoduzarówno JS jak I CSS. Dziękitemumożnauniknąćproblemówzwiązanych z niewłaściwymużyciemstylów CSS lub z nieprawidłowymsposobempisaniakoduJavascript.Takiepodejściezmniejszaryzykowystąpieniabłędu w wersjifinalnejwaszejstronylubrozszerzeniadlaJoomla!
14. Wspominałemrównież o tym, żeGrunt.jspotrafiprzygotowaćfinalnykodnadającysię do wysłanianaserwerhostingowygdziedocelowo ma sięznajdowaćstronalubprzygotowaćpaczkęinstalacyjną z najnowsząwersjąwaszegorozszerzeniadlaJoomla!Genialnasprawa!
15. A wszystko to po to, abyś Ty jakoprogramistabyłzadowolonyzeswojejpracy I jejwydajności, a przez to Twójklient, szeflubużytkownikTwojejstronyteżbędziezadowolony.Bo dziękiniemumożeciedostaćlepszykodfinalny,wktórymistniejemniejszeryzykowystąpieniabłędów I którypozwalaTwojejstroniesięładowaćznacznieszybciejniżgdybyśniekorzystał z tegotypurozwiązań.
16. Mam nadzieję,żeudało mi się Was przekonać do tegoabyusprawnićWasześrodowiskopracy z Joomla! ZapomocąmodułuGrunt.jsJeślichcielibyściepoczytaćwięcejnatemattegomodułyczyteżserweranode.jszapraszam do skorzystania z linkówktóresąterazwidocznenaslajdzie.Zapraszamrównieżnamojegobloga, gdziedzisiajlubjutrobędziemogliznaleźćwięcejinformacjiodnośniewykorzystaniamodułuGrunt.js w codziennejpracywebmastera.
17. Dziekujęwszystkimzauwagę. Czysąjakieśpytania?Jeślinie ma pytań, to życzęwszystkimWesołychŚwiąt!