Download to read offline
![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](https://image.slidesharecdn.com/grunt-prezentacja-131215102115-phpapp01/85/ZOSTAN-NINJA-JOOMLA-DEVELOPEREM-Automatyzacja-zadan-w-procesie-tworzenia-szablonow-i-rozszerzen-dla-Joomla-10-320.jpg)
Uploaded byPiotr Nalepa
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
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.
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
- 1. ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacjazadań 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 TOSAMO • “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 npminstall -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 kompresowaniekodu JS/CSS po dokonaniu zmian w plikach. Piotr Nalepa - blog.piotrnalepa.pl 11
- 12. PRZYSPIESZENIE PROCESÓW • Automatyczne przetwarzaniekodu 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ębnienietylko 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ĘŚLIWYKLIENT Piotr Nalepa - blog.piotrnalepa.pl 16
- 17. PRZYDATNE LINKI Grunt.js http://gruntjs.com/ Node.jshttp://nodejs.org/ Mój blog http://blog.piotrnalepa.pl/ Piotr Nalepa - blog.piotrnalepa.pl 17
- 18. Piotr Nalepa -blog.piotrnalepa.pl 18
Editor's Notes
- #2 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.
- #3 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).
- #4 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.
- #5 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.
- #6 Ale trzebapowiedziećsobie “STOP!” I zadaćpytanie: Czynie ma lepszegorozwiazaniaabyulepszyć ten procestak, abymniemusiał w kółkowykonywaćtychsamych, ważnych ale żmudnychczynności?
- #7 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.
- #8 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.
- #10 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.
- #11 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.
- #12 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.
- #13 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.
- #14 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.
- #15 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!
- #16 Wspominałemrównież o tym, żeGrunt.jspotrafiprzygotowaćfinalnykodnadającysię do wysłanianaserwerhostingowygdziedocelowo ma sięznajdowaćstronalubprzygotowaćpaczkęinstalacyjną z najnowsząwersjąwaszegorozszerzeniadlaJoomla!Genialnasprawa!
- #17 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ń.
- #18 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.
- #19 Dziekujęwszystkimzauwagę. Czysąjakieśpytania?Jeślinie ma pytań, to życzęwszystkimWesołychŚwiąt!