Post on 15-Jul-2015
transcript
Magento theme development con Grunt
02 IntegrazioneDove applicarlo
Come applicarlo
Sviluppi possibili
01 GruntWorkflow
Perchè Grunt
Come funziona
Workflow – vantaggi e prosettive
Workflow
Standard condivisi Metodologia di sviluppo
condivisa nel gruppo di lavoro
Riuso del codiceFacilità di riutilizzo di parte del
codice su diversi progetti
Velocizzare processiAutomazione 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
ComponentiGrunt Command Line Interface
Grunt modulo, legato al progetto
DipendenzeNode 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
}
+
Premessa
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']}
}},
})
APPXml – tmpl
SkinJS – CSS – Font – images
SrcJs – 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
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’],
},
}
Validazione del codice javascript
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.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
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 backendSistema>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></reference>
Local.xml
LiveReload integrazione con modulo
01 Portabilità e sicurezza
02 Gestione dal backendAttivazione
Configurazione
04 Abilitazione live reload con cookie o utenteEvitare il refresh a developer non interessati
Evitare di dover gestire le opzioni su diversi dispositivi
05 Gestione della porta per utentePermette il refresh su Grunt multitask
LiveReload integrazione con modulo
LiveReload integrazione con modulo
Fine