ZOSTAŃ NINJA JOOMLA! DEVELOPEREM

Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla

Joomla!

Piotr Nalepa - blog.piotrnalepa.pl 2

KIM JESTEM?

Piotr Nalepa - blog.piotrnalepa.pl 3

MÓJ BLOG

Piotr Nalepa - blog.piotrnalepa.pl 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 5

NIGDY WIĘCEJ!

Piotr Nalepa - blog.piotrnalepa.pl 6

GRUNT.JS

Piotr Nalepa - blog.piotrnalepa.pl 7

GRUNT.JS - INSTALACJA

1. Node.js2. npm install -g grunt-cli3. npm install grunt --save-dev4. grunt

Piotr Nalepa - blog.piotrnalepa.pl 8

GRUNT.JS - INICJALIZACJA

1. Gruntfile.js2. Package.json

Piotr Nalepa - blog.piotrnalepa.pl 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 10

GRUNTFILE.JSmodule.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 11

MINIFIKACJA KODU

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

Piotr Nalepa - blog.piotrnalepa.pl 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 13

PODGLĄD ZMIAN NA ŻYWO

Piotr Nalepa - blog.piotrnalepa.pl 14

WALIDACJA KODU

• JSLint/JSHint• CSSLint

Piotr Nalepa - blog.piotrnalepa.pl 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 16

SZCZĘŚLIWY DEVELOPER = SZCZĘŚLIWY KLIENT

Piotr Nalepa - blog.piotrnalepa.pl 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 18