Creare un workflow per lo sviluppo di un tema in Magento, automatizzando processi e integrando framework e preprocessori, è fondamentale non solo per velocizzare i tempi di sviluppo, ma anche perché aiuta il riuso del codice e mantiene facile la manutenzione del progetto. Grunt è un task runner formidabile che permette di realizzare operazioni ripetitive e di eseguirle in cascata in maniera automatica. In questa presentazione Marco Rho ci mostrerà come creare un workflow per ottimizzare lo sviluppo di un tema di Magento. In particolare, configurerà Grunt in modo da pre-processare file scritti in sass, controllare la sintassi del codice, ottimizzare i tempi di caricamento del sito (minificando i file e ottimizzando in automatico le immagini), ed eseguire il reload automatico della pagina contemporaneamente su diversi device e browser per il testing.

2. Magento theme development con Grunt
02 Integrazione
Dove applicarlo
Come applicarlo
Sviluppi possibili
01 Grunt
Workflow
Perchè Grunt
Come funziona

3. Workflow – vantaggi e prosettive
Workflow
Standard condivisi
Metodologia di sviluppo
condivisa nel gruppo di lavoro
Riuso del codice
Facilità di riutilizzo di parte del
codice su diversi progetti
Velocizzare processi
Automazione e centralizzazione
delle task
Portabilità
Possibilità di creare il
develepment flow facilmente su
diversi progetti

4. Grunt – cosa e perchè
02 Modulare
... adatto per task
semplici e complesse
01 Semplice
… facile da apprendere
e gestire
The javascript Task runner
03 Community
..attualmente vanta più
di 4000 plugin

5. Grunt – installazione
Componenti
Grunt Command Line Interface
Grunt modulo, legato al progetto
Dipendenze
Node js -> installabile dal Node Package Manager
Versione legata a progetto
$ npm install -g grunt-cli // installa a livello globale Grunl CLI
$ npm init // Crea il package.json
$ npm install --save-dev grunt // Installa grunt (cartella di progetto)

6. Package.json
{
"name": "my-project-name", // Informazione sul progetto
"version": "0.1.0",
"devDependencies": { // Dipendenze
"grunt": "~0.4.5", ~ MINOR release - 0.4.x
"grunt-contrib-jshint": “^0.10.0", ^ MAJOR release – 0.x.x
"grunt-contrib-nodeunit": "^0.4.1",
"grunt-contrib-uglify": "^0.5.0"
}
}
$ npm install // Installa tutti i moduli richiesti

7. Gruntfile.js
module.exports = function (grunt) { // Grunt wrapper
grunt.loadNpmTasks('grunt-contrib-uglify'); // Carica plugin
grunt.initConfig ({ // Definizione della funzione
uglify: {
my_target: {
files: {
'src/js/script.min.js' : ['component/js/*.js']
}
}
},
})
grunt.registerTask('default', 'uglify') // Definizione funzione default
}

8. +

9. Premessa

10. Automazioni possibili
Per i preprocessori css Sass, Less e Stylus
Di file css e javascript
Riduzione del peso, ridimensionamento
immagini per diverse risoluzioni
Controllo sintassi
Compilazione CSS
Minificazione e concatenazione
Ottimizzazione immagini
Validazione del codice javascript JSHint

11. Struttura del tema
grunt.loadNpmTasks('grunt-contrib-uglify');
var skinDir = 'skin/frontend/rwd/default/';
var appDir = 'app/design/frontend/rwd/default/';
grunt.initConfig ({
uglify: {
my_target: {
files: {
skinDir + ‘js/script.min.js' : [skinDir + 'component/js/*.js']
}
}
},
})
APP
Xml – tmpl
Skin
JS – CSS – Font – images
Src
Js – sass – images

12. Validazione del codice javascript
$ npm install --save-dev grunt-contrib-jshint
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-jshint');// Carica plugin
grunt.initConfig ({
jshint: { // Definisco funzione
all: [skinDir + 'js/*.js'] // Target
}
});
grunt.registerTask('default', 'uglify')
}
http://jshint.com/ - testing e documentazione

13. Validazione del codice javascript
Opzioni defaults, override e ignore
jshint: {
options: {
curly: true,
globals: {
jQuery: true
},
},
src: [skinDir + 'js/*.js'],
}
uses_defaults: [’src/js/*.js'],
with_overrides: {
options: {
curly: false,
ignores: [’lib/jquery.js']
},
files: {
src: [lib/**/*.js’],
},
}

14. Validazione del codice javascript
Altre funzionalità utili:
1. beforeconcat – afterconcat
2. Ignore specific warning
3. Options in file esterno

15. Compilazione css – SASS/Compass
$ npm install --save-dev grunt-contrib-compass
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig ({
compass: {
dev: {
options: {
config: sourceDir + 'scss/config.rb’,
}
}
}
});
!!! Configurare ambiente – ruby, sass e compass
http_path = "/skin/frontend/rwd/default/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
fonts_dir= "fonts"
javascripts_dir = "js"
relative_assets = true
require 'susy'
output_style = :expanded
environment = :development
Config.rb

16. Minificazione file css e javascript
$ npm install --save-dev grunt-contrib-uglify
$ npm install --save-dev grunt-contrib-cssmin
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify: {
my_target: {
files: [{
expand: true,
cwd: sourceDir + ‘js/*.js',
src: '**/*.js',
dest: skinDir + 'js/*.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
cssmin: {
target: {
files: [{
expand: true,
cwd: skinDir + 'css',
src: ['*.css', '!*.min.css'],
dest: 'skinDir + 'css',
ext: '.min.css'
}]
}
}
});
CssminUglify

17. Concatenazione file css e javascript
$ npm install --save-dev grunt-contrib-concat
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.initConfig({
concat: {
basic_and_extras: {
files: {
skinDir +'js/main.js': [sourceDir +'js/main.js’,
sourceDir+'js/menu.js’, sourceDir+'js/carousel.js'], },
},
},
});
Uglify
Magento backend
Sistema>configurazione>sviluppa:
Javascript settings
Sistema>configurazione>sviluppa:
Css settings

18. Operazioni sulle immagini
$ npm install --save-dev grunt-contrib-imagemin
grunt.initConfig({
imagemin: {
files: [{
expand: true,
cwd: sourcesDir + 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: skinDir + 'images/'
}]
}
});
grunt.registerTask('default', ['newer:imagemin']);
Opzioni
Compressione
Plugin
Si raccomanda
Grunt-newer
npm install grunt-newer --save-dev
grunt.loadNpmTasks('grunt-newer');

19. Operazioni sulle immagini
$ npm install --save-dev grunt-responsive-images
responsive_images: {
icontask: {
options: {
sizes: [{
width: 32,
height: 32
},{
width: 64,
suffix: "_x2",
quality: 60
}]
},
files: [{
expand: true,
src: ['**/*.{jpg,gif,png}'],
cwd: sourceDir + 'images/icon',
dest: skinDir + 'images/icon'
}]
}
},
})
Opzioni
Size
Compression
Suffix
Name
Si raccomanda
Grunt-newer

20. Automazione: grunt watch
$ npm install --save-dev grunt-contrib-watch
grunt.initConfig({
watch: {
options: {
livereload: true
},
watchactivity: {
files: [
sourceDir + 'images/**/*.{png,jpg,gif}'
],
tasks: [
'imagemin'
]
}
},
})
File da monitorare
App/design/frontend/rwd/default/
XML – etc e layout
App/design/frontend/rwd/default/
Phtml – template
App/skin/frontend/rwd/default/
JS – src/js
Sass – src/sass
Image – sec/images

21. Ed ora LiveReload!
02 Esecuzione
... Grunt processa
relativi task
01 Modifiche
… grunt watch rileva le
modifiche dei file
03 Refresh
…come ultimo step
della catena

22. Ed ora LiveReload!
Concentrarsi sul codice mentre sul secondo
monitor si ha sempre la view aggiornata

23. Ed ora LiveReload!
Controllare il responsive web design su più device
risparmiando tempo

24. Configurazione del LiveReload!
01 Option del grunt-contrib-watch
02 Inserimento dello script nel template
options: {
livereload: true, // true: porta 35729 se no specificare
}
<reference name="head">
<block type="core/text" name=”grunt.livereload">
<action method="setText">
<text><![CDATA[
<script type="text/javascript"
src="http://shop.blumango.it:35729/livereload.js"></script>
]]></text>
</action>
</block>
Local.xml

25. LiveReload integrazione con modulo
01 Portabilità e sicurezza
02 Gestione dal backend
Attivazione
Configurazione
04 Abilitazione live reload con cookie o utente
Evitare il refresh a developer non interessati
Evitare di dover gestire le opzioni su diversi dispositivi
05 Gestione della porta per utente
Permette il refresh su Grunt multitask

26. LiveReload integrazione con modulo

27. LiveReload integrazione con modulo

28. Fine