Pon un task runner na túa vida para

automatizar o teufluxo de traballo

● Transcompilar Sass/Less -> CSS

● Automatizar a publicación

● Eliminar ficheiros

● Concatenar JS, CSS

● Minificar JS, CSS

● Optimizar imaxes

● Copiar arquivos

Module bundler

Task runner

• Automatización• Produtividade• Consistencia

Beneficios

● Automatización de tarefas repetitivas● Curva de aprendizaxe pequena● Funcionalidade baseada en plugins● Ecosistema enorme: 6500 plugins● JSON e JavaScript● Baseado en Node.js

Grunt

Instalación

$ npm install -g grunt-cli

Instalación

$ npm init -y$ npm install grunt --save-dev

Inicialización

├── node_modules├── package.json└── package-lock.json

Inicialización

$ git clone

https://github.com/Automattic/_s.git

src

src

├── 404.php ├── archive.php ├── comments.php ├── footer.php ├── functions.php ├── header.php ├── index.php ├── LICENSE ├── page.php ├── phpcs.xml.dist

src

├── README.md

├── readme.txt

├── rtl.css

├── screenshot.png

├── search.php

├── sidebar.php

├── single.php

├── style.css

└── woocommerce.css

src ├── inc ├── js ├── languages ├── layouts ├── sass └── template-parts

Transcompilación

style.scss

buttons.scss

forms.scss

links.scss

menus.scss

style.css• • •

$ npm install grunt-contrib-sass

--save-dev

$ touch Gruntfile.js

Sass

$ grunt sass:dev

Sass

Vixiante

$ npm install grunt-contrib-watch

--save-dev

Vixiante

$ grunt watch:sass

Vixiante

Publicación

CSS para produción

ConcatenarJavaScript

Limpar odirectorio

«dist»

MinificarJavaScript

Optimizarimaxes

Copiarficheiros

Limpar

$ npm install grunt-contrib-clean --save-dev

Limpar

$ grunt clean:dist

Limpar

CSS para produción

$ grunt sass:dist

CSS para produción

Concatenar arquivos

$ npm install grunt-contrib-concat

--save-dev

Concatenar arquivos

$ grunt concat:js

Concatenar arquivos

MinificarJavaScript

$ npm install grunt-contrib-uglify

--save-dev

Minificar JavaScript

$ grunt uglify:dist

Minificar JavaScript

Optimizarimaxes

$ npm install grunt-contrib-imagemin

--save-dev

Optimizar imaxes

$ grunt imagemin:dist

Optimizar imaxes

Copiararquivos

$ npm install grunt-contrib-copy

--save-dev

Copiar arquivos

$ grunt copy:dist

Copiar arquivos

Todoxunto

$ grunt clean:dist sass:dist concat:js uglify:dist imagemin:dist copy:dist

Todo xunto

● Recarga automática do navegador● Análise estático (Lint): PHP e JavaScript● Execución de tests● Despregue automático ao servidor

Máis tarefas

jesus@jesusamieiro.com