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.

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