pon un task runner na túa vida para automatizar o teu ...€¦ · pon un task runner na túa vida...
TRANSCRIPT
![Page 1: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/1.jpg)
Pon un task runner na túa vida para
automatizar o teufluxo de traballo
![Page 2: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/2.jpg)
![Page 3: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/3.jpg)
![Page 4: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/4.jpg)
● Transcompilar Sass/Less -> CSS
● Automatizar a publicación
● Eliminar ficheiros
● Concatenar JS, CSS
● Minificar JS, CSS
● Optimizar imaxes
● Copiar arquivos
![Page 5: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/5.jpg)
Module bundler
![Page 6: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/6.jpg)
Task runner
![Page 7: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/7.jpg)
• Automatización• Produtividade• Consistencia
Beneficios
![Page 8: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/8.jpg)
● 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
![Page 9: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/9.jpg)
Instalación
![Page 10: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/10.jpg)
$ npm install -g grunt-cli
Instalación
![Page 11: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/11.jpg)
$ npm init -y$ npm install grunt --save-dev
Inicialización
![Page 12: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/12.jpg)
├── node_modules├── package.json└── package-lock.json
Inicialización
![Page 13: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/13.jpg)
![Page 14: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/14.jpg)
![Page 15: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/15.jpg)
$ git clone
https://github.com/Automattic/_s.git
src
![Page 16: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/16.jpg)
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
![Page 17: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/17.jpg)
src ├── inc ├── js ├── languages ├── layouts ├── sass └── template-parts
![Page 18: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/18.jpg)
Transcompilación
![Page 19: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/19.jpg)
style.scss
buttons.scss
forms.scss
links.scss
menus.scss
style.css• • •
![Page 20: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/20.jpg)
![Page 21: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/21.jpg)
$ npm install grunt-contrib-sass
--save-dev
$ touch Gruntfile.js
Sass
![Page 22: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/22.jpg)
![Page 23: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/23.jpg)
$ grunt sass:dev
Sass
![Page 24: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/24.jpg)
Vixiante
![Page 25: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/25.jpg)
$ npm install grunt-contrib-watch
--save-dev
Vixiante
![Page 26: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/26.jpg)
![Page 27: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/27.jpg)
$ grunt watch:sass
Vixiante
![Page 28: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/28.jpg)
Publicación
![Page 29: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/29.jpg)
CSS para produción
ConcatenarJavaScript
Limpar odirectorio
«dist»
MinificarJavaScript
Optimizarimaxes
Copiarficheiros
![Page 30: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/30.jpg)
Limpar
![Page 31: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/31.jpg)
$ npm install grunt-contrib-clean --save-dev
Limpar
![Page 32: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/32.jpg)
![Page 33: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/33.jpg)
$ grunt clean:dist
Limpar
![Page 34: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/34.jpg)
CSS para produción
![Page 35: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/35.jpg)
![Page 36: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/36.jpg)
$ grunt sass:dist
CSS para produción
![Page 37: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/37.jpg)
Concatenar arquivos
![Page 38: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/38.jpg)
$ npm install grunt-contrib-concat
--save-dev
Concatenar arquivos
![Page 39: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/39.jpg)
![Page 40: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/40.jpg)
$ grunt concat:js
Concatenar arquivos
![Page 41: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/41.jpg)
MinificarJavaScript
![Page 42: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/42.jpg)
$ npm install grunt-contrib-uglify
--save-dev
Minificar JavaScript
![Page 43: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/43.jpg)
![Page 44: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/44.jpg)
$ grunt uglify:dist
Minificar JavaScript
![Page 45: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/45.jpg)
Optimizarimaxes
![Page 46: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/46.jpg)
$ npm install grunt-contrib-imagemin
--save-dev
Optimizar imaxes
![Page 47: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/47.jpg)
![Page 48: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/48.jpg)
$ grunt imagemin:dist
Optimizar imaxes
![Page 49: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/49.jpg)
Copiararquivos
![Page 50: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/50.jpg)
$ npm install grunt-contrib-copy
--save-dev
Copiar arquivos
![Page 51: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/51.jpg)
![Page 52: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/52.jpg)
$ grunt copy:dist
Copiar arquivos
![Page 53: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/53.jpg)
Todoxunto
![Page 54: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/54.jpg)
$ grunt clean:dist sass:dist concat:js uglify:dist imagemin:dist copy:dist
Todo xunto
![Page 55: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/55.jpg)
![Page 56: Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida para automatizar o teu fluxo de traballo Transcompilar Sass/Less -> CSS](https://reader034.vdocuments.site/reader034/viewer/2022042417/5f335541f0e3807c4d008a88/html5/thumbnails/56.jpg)
● 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