Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida...
Transcript of Pon un task runner na túa vida para automatizar o teu ...€¦ · Pon un task runner na túa vida...
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