Marco Rho: Magento theme development workflow con Grunt

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

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

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

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)

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

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
}

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

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

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

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’],
},
}

Altre funzionalità utili:
1. beforeconcat – afterconcat
2. Ignore specific warning
3. Options in file esterno

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

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

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

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');

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

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

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

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

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

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

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

LiveReload integrazione con modulo

Marco Rho: Magento theme development workflow con Grunt

More Related Content

Similar to Marco Rho: Magento theme development workflow con Grunt (20)

More from Meet Magento Italy (20)

Marco Rho: Magento theme development workflow con Grunt