TASK AUTOMATIONWITH GRUNT.JS

Luca Tumedeiluca@theAverageDev.com

@lucatumehttp://theaveragedev.com

MOISviluppatore freelance WP da 2.5 anni

Freelance @ Modern Tribe

C, C#, Java ed altri infimi linguaggiSe passo piu' di 5 secondi su questa slide urlate

AH! GLI ESPERTI...typeof Luca !== 'grunt expert';

Quindi sono la persona perfetta per una introduzione

Ma perche'?

PERCHE' AUTOMATIZZARE?Risparmio di tempo

Evitare errori e dimenticanze

Procedure condivise (e versionabili)

ALTERNATIVEGulp (JS), ultima moda, molti tasks "portati"

Robo (PHP), la risposta PHP a Grunt, meno moduli, piu' DIY

Yeoman (JS principalmente), fa tutto ma meno accessibile

INSTALLAZIONE1. Installate npm (nodejs.org)

2. A terminale npm install -g grunt-cli

3. A terminale mkdir my-project && cd $_

4. A terminale touch Gruntfile.js

5. Editare il file Gruntfile.js

CONCETTI DI BASETasks

Sub-tasks

Configuration-heavy (task semplici, configuarazione ricca)

CHE COSA PUO' FARE?In breve: tutto

E' una di quelle cose che si capisce provando ad usarlo

E' come git: quando iniziate ad usarlo vi chiederete comefacevate prima

Usate git, vero?

FATTO CON GRUNTQuesta presentazione e' fatta con Reveal.js

compilata con Yeoman

servita in live da GruntMolto meta. Non sono io che sono bravo. E' Grunt.

GRUNT CONFIGmodule.exports = function(grunt) {

// Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });

// Load the plugin that provides the "uglify" task.

CSSMinificare (grunt-contrib-css-min)

Concatenare (grunt-concat-css)

Auto-prefixer (grunt-autoprefixer)Usate auto-prefixer, vero?

SASS, LESS, STYLUSCompilare SASS (grunt-contrib-sass)

Compilare Less (grunt-contrib-less)

Compilare Stylus (grunt-contrib-stylus)

JAVASCRIPTUglify (grunt-contrib-uglify)

Concatenare (grunt-contrib-concat)Lint (grunt-jslint)

Ed ogni altro tipo di depravazione con JavaScript

PHPLinting (grunt-phplint)

Code Sniffer (grunt-phpcs)Tests (grunt-phpunit)

Fail early, fail fast.

FILE TEMPLATESScaffold (grunt-init)

Move, delete, copy (grunt-contrib-copy e grunt-contrib-delete)

Compress (grunt-zip)

GITPull and Push (grunt-git)

Force add (grunt-git)Clean repositories (grunt-contrib-delete)

TEXT FILESChangelog everything (grunt-changelog e grunt-

contrib-rename)Search and replace (grunt-text-replace)

Markdown to HTML (grunt-markdown)

COME LO USO IO?WordPress plugins scaffold

(https://github.com/lucatume/grunt-wp-plugin)

Git web-hooks e deploy proceduresWatch (grunt-contrib-watch)

CHI LO USA?Automattic

WP-CLIChi non usa Gulp, Robo o Yeoman

MA IO NON FACCIO PLUGINS...Quanta parte dovuta a resistenza?

...dovrei aggiungere un plugin......dovrei creare un child theme...

Make it easy, make it happen.

GRAZIE GRUNTAbbiamo tolto/mosso/zippato/rinominato?Lui e' l'unico che sa come aggiornare il sito!var_dump('I love Ruby.'); e

console.log('It's 4AM. I wanna die.);