Your SlideShare is downloading. ×
0
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!

630

Published on

Prezentacja na temat automatyzacji zadań w procesie tworzenia stron opartych na Joomla! W prezentacji zostały przedstaiwone sposoby automatyzacji w oparciu o Grunt.js oraz zostały pokrótce omówione …

Prezentacja na temat automatyzacji zadań w procesie tworzenia stron opartych na Joomla! W prezentacji zostały przedstaiwone sposoby automatyzacji w oparciu o Grunt.js oraz zostały pokrótce omówione możliwości tego rozszerzenia. Prezentacja była przedstawiana na JUG Silesia w dniu 14-go grudnia 2013, w Katowicach.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
630
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • 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).
  • 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.
  • 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.
  • Ale trzebapowiedziećsobie “STOP!” I zadaćpytanie: Czynie ma lepszegorozwiazaniaabyulepszyć ten procestak, abymniemusiał w kółkowykonywaćtychsamych, ważnych ale żmudnychczynności?
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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!
  • Wspominałemrównież o tym, żeGrunt.jspotrafiprzygotowaćfinalnykodnadającysię do wysłanianaserwerhostingowygdziedocelowo ma sięznajdowaćstronalubprzygotowaćpaczkęinstalacyjną z najnowsząwersjąwaszegorozszerzeniadlaJoomla!Genialnasprawa!
  • 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ń.
  • 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.
  • Dziekujęwszystkimzauwagę. Czysąjakieśpytania?Jeślinie ma pytań, to życzęwszystkimWesołychŚwiąt!
  • Transcript

    • 1. ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
    • 2. KIM JESTEM? Piotr Nalepa - blog.piotrnalepa.pl 2
    • 3. MÓJ BLOG Piotr Nalepa - blog.piotrnalepa.pl 3
    • 4. W KÓŁKO TO SAMO • “Manualne” sprawdzenie poprawności kodu JS/CSS, • “Manualna” kompresja obrazków, • “Manualna” kompresja kodu CSS/JS, • “Manualne” przygotowywanie paczki z szablonem lub rozszerzeniem Joomla! Piotr Nalepa - blog.piotrnalepa.pl 4
    • 5. NIGDY WIĘCEJ! Piotr Nalepa - blog.piotrnalepa.pl 5
    • 6. GRUNT.JS Piotr Nalepa - blog.piotrnalepa.pl 6
    • 7. GRUNT.JS - INSTALACJA 1. 2. 3. 4. Node.js npm install -g grunt-cli npm install grunt --save-dev grunt Piotr Nalepa - blog.piotrnalepa.pl 7
    • 8. GRUNT.JS - INICJALIZACJA 1. Gruntfile.js 2. Package.json Piotr Nalepa - blog.piotrnalepa.pl 8
    • 9. PACKAGE.JSON { "name": "joomla-projekt", "version": "1.0.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-uglify": "~0.2.7" } } Piotr Nalepa - blog.piotrnalepa.pl 9
    • 10. GRUNTFILE.JS module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { src : ['**/*.js', '!*.min.js'], cwd : 'dev/js/', dest : 'prod/js/', expand : true, } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); }; Piotr Nalepa - blog.piotrnalepa.pl 10
    • 11. MINIFIKACJA KODU Automatyczne kompresowanie kodu JS/CSS po dokonaniu zmian w plikach. Piotr Nalepa - blog.piotrnalepa.pl 11
    • 12. PRZYSPIESZENIE PROCESÓW • Automatyczne przetwarzanie kodu napisanego w LESS lub SASS do CSS, • Automatyczna kompresja obrazków, • Automatyczne generowanie sprite’ów. Piotr Nalepa - blog.piotrnalepa.pl 12
    • 13. PODGLĄD ZMIAN NA ŻYWO Piotr Nalepa - blog.piotrnalepa.pl 13
    • 14. WALIDACJA KODU • JSLint/JSHint • CSSLint Piotr Nalepa - blog.piotrnalepa.pl 14
    • 15. KOD PRODUKCYJNY • Wyodrębnienie tylko najważniejszych plików projektu, • Kompresja obrazków, • Kompresja kodu JS/CSS, • Łączenie wielu plików w jeden główny, • Przygotowanie paczki instalacyjnej dla Joomla! Piotr Nalepa - blog.piotrnalepa.pl 15
    • 16. SZCZĘŚLIWY DEVELOPER = SZCZĘŚLIWY KLIENT Piotr Nalepa - blog.piotrnalepa.pl 16
    • 17. PRZYDATNE LINKI Grunt.js http://gruntjs.com/ Node.js http://nodejs.org/ Mój blog http://blog.piotrnalepa.pl/ Piotr Nalepa - blog.piotrnalepa.pl 17
    • 18. Piotr Nalepa - blog.piotrnalepa.pl 18

    ×