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