Task automation with grunt

TASK AUTOMATION
WITH GRUNT.JS
Luca Tumedei
luca@theAverageDev.com
@lucatume
http://theaveragedev.com

MOI
Sviluppatore freelance WP da 2.5 anni
Freelance @ Modern Tribe
C, C#, Java ed altri infimi linguaggi
Se 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)

ALTERNATIVE
Gulp (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

INSTALLAZIONE
1. 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 BASE
Tasks
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 come
facevate prima
Usate git, vero?

FATTO CON GRUNT
Questa presentazione e' fatta con Reveal.js
compilata con Yeoman
servita in live da Grunt
Molto meta. Non sono io che sono bravo. E' Grunt.

GRUNT CONFIG
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.

CSS
Minificare (grunt-contrib-css-min)
Concatenare (grunt-concat-css)
Auto-prefixer (grunt-autoprefixer)
Usate auto-prefixer, vero?

SASS, LESS, STYLUS
Compilare SASS (grunt-contrib-sass)
Compilare Less (grunt-contrib-less)
Compilare Stylus (grunt-contrib-stylus)

JAVASCRIPT
Uglify (grunt-contrib-uglify)
Concatenare (grunt-contrib-concat)
Lint (grunt-jslint)
Ed ogni altro tipo di depravazione con JavaScript

PHP
Linting (grunt-phplint)
Code Sniffer (grunt-phpcs)
Tests (grunt-phpunit)
Fail early, fail fast.

FILE TEMPLATES
Scaffold (grunt-init)
Move, delete, copy (grunt-contrib-copye grunt-
contrib-delete)
Compress (grunt-zip)

GIT
Pull and Push (grunt-git)
Force add (grunt-git)
Clean repositories (grunt-contrib-delete)

TEXT FILES
Changelog everything (grunt-changeloge 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 procedures
Watch (grunt-contrib-watch)

CHI LO USA?
Automattic
WP-CLI
Chi 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 GRUNT
Abbiamo 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.);

Task automation with grunt

More Related Content

What's hot (7)

Similar to Task automation with grunt (12)

Task automation with grunt