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

Piotr Nalepa - blog.piotrnalepa.pl

2
MÓJ BLOG

Piotr Nalepa - blog.piotrnalepa.pl

3
W KÓŁKO TO SAMO
• “Manualne” sprawdzenie poprawności
kodu JS/CSS,
• “Manualna” kompresja obrazków,
• “Manualna” kompresja ...
NIGDY WIĘCEJ!

Piotr Nalepa - blog.piotrnalepa.pl

5
GRUNT.JS

Piotr Nalepa - blog.piotrnalepa.pl

6
GRUNT.JS - INSTALACJA

1.
2.
3.
4.

Node.js
npm install -g grunt-cli
npm install grunt --save-dev
grunt

Piotr Nalepa - bl...
GRUNT.JS - INICJALIZACJA

1. Gruntfile.js
2. Package.json

Piotr Nalepa - blog.piotrnalepa.pl

8
PACKAGE.JSON
{

"name": "joomla-projekt",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch...
GRUNTFILE.JS
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
opt...
MINIFIKACJA KODU

Automatyczne kompresowanie kodu
JS/CSS po dokonaniu zmian w plikach.

Piotr Nalepa - blog.piotrnalepa.pl...
PRZYSPIESZENIE
PROCESÓW
• Automatyczne przetwarzanie kodu
napisanego w LESS lub SASS do CSS,
• Automatyczna kompresja obra...
PODGLĄD ZMIAN NA ŻYWO

Piotr Nalepa - blog.piotrnalepa.pl

13
WALIDACJA KODU

• JSLint/JSHint
• CSSLint

Piotr Nalepa - blog.piotrnalepa.pl

14
KOD PRODUKCYJNY
• Wyodrębnienie tylko najważniejszych plików
projektu,
• Kompresja obrazków,
• Kompresja kodu JS/CSS,
• Łą...
SZCZĘŚLIWY DEVELOPER =
SZCZĘŚLIWY KLIENT

Piotr Nalepa - blog.piotrnalepa.pl

16
PRZYDATNE LINKI

Grunt.js http://gruntjs.com/
Node.js http://nodejs.org/
Mój blog http://blog.piotrnalepa.pl/

Piotr Nalep...
Piotr Nalepa - blog.piotrnalepa.pl

18
Upcoming SlideShare
Loading in...5
×

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

656

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 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
656
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

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 of "ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!"

    1. 1. ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
    2. 2. KIM JESTEM? Piotr Nalepa - blog.piotrnalepa.pl 2
    3. 3. MÓJ BLOG Piotr Nalepa - blog.piotrnalepa.pl 3
    4. 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. 5. NIGDY WIĘCEJ! Piotr Nalepa - blog.piotrnalepa.pl 5
    6. 6. GRUNT.JS Piotr Nalepa - blog.piotrnalepa.pl 6
    7. 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. 8. GRUNT.JS - INICJALIZACJA 1. Gruntfile.js 2. Package.json Piotr Nalepa - blog.piotrnalepa.pl 8
    9. 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. 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. 11. MINIFIKACJA KODU Automatyczne kompresowanie kodu JS/CSS po dokonaniu zmian w plikach. Piotr Nalepa - blog.piotrnalepa.pl 11
    12. 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. 13. PODGLĄD ZMIAN NA ŻYWO Piotr Nalepa - blog.piotrnalepa.pl 13
    14. 14. WALIDACJA KODU • JSLint/JSHint • CSSLint Piotr Nalepa - blog.piotrnalepa.pl 14
    15. 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. 16. SZCZĘŚLIWY DEVELOPER = SZCZĘŚLIWY KLIENT Piotr Nalepa - blog.piotrnalepa.pl 16
    17. 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. 18. Piotr Nalepa - blog.piotrnalepa.pl 18
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×