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

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

on

  • 725 views

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

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.

Statistics

Views

Total Views
725
Views on SlideShare
603
Embed Views
122

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 122

http://blog.piotrnalepa.pl 122

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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!

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! Presentation Transcript

  • 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 kodu CSS/JS, • “Manualne” przygotowywanie paczki z szablonem lub rozszerzeniem Joomla! Piotr Nalepa - blog.piotrnalepa.pl 4
  • 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 - blog.piotrnalepa.pl 7
  • 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": "~0.5.3", "grunt-contrib-uglify": "~0.2.7" } } Piotr Nalepa - blog.piotrnalepa.pl 9
  • 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
  • MINIFIKACJA KODU Automatyczne kompresowanie kodu JS/CSS po dokonaniu zmian w plikach. Piotr Nalepa - blog.piotrnalepa.pl 11
  • 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
  • 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, • Łączenie wielu plików w jeden główny, • Przygotowanie paczki instalacyjnej dla Joomla! Piotr Nalepa - blog.piotrnalepa.pl 15
  • 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 Nalepa - blog.piotrnalepa.pl 17
  • Piotr Nalepa - blog.piotrnalepa.pl 18