GruntJS

Uma breve introdução à ferramenta {que é boa uma barbaridade}

O que é o GruntJS afinal?

• Ferramenta escrita em NodeJS que gerencia procedimentos do work-flow de desenvolvimento
• Escrita por Ben Alman - @cowboy

• Lançada na BrazilJS de 2012 ,aqui em POA mesmo
• Nasceu de uma necessidade de build no time desenvolvimento do jQuery
• É extensível através de plug-ins, que estão todos disponíveis no NPM

Alguém deve ter se perguntado...

...escrita em NodeJS?

NodeJS não é uma técnologia de servidor?

NodeJS é muito popular por rodar no servidor. Porém ele possui outras aplicações, como programas CLI. Assim sendo, ele é instalado apenas na máquina de desenvolvimento.

Facilidade de distribuição do GruntJS

Apenas dois arquivos precisam estar no repositório de versionamento.

package.json e Gruntfile.js

Para começar, instalamos a ferramenta

Após instalarmos o NodeJS:

$ sudo npm install -g grunt-cli

package.json

Responsável pelo gerenciamento das dependências (plugins)

Após isso

$ sudo npm install

Para instalar as dependências descritas no package.json

Gruntfile.js

Responsável pela configuração de todos os plugins e tarefas

Principais plugins

Front-end:

• CoffeeScript, LESS, SASS, Stylus
• Jasmine, Qunit, Mocha

...

• jsHint, jsLint, CoffeeLint, JSONLint, LESSLint, CSSLint
• Uglify, CSSmin, HTMLmin, imagemin

Principais plugins

Back-end (PHP):

• PHPLint, PHP analyzer
• PHPSpecs, PHPUnit
• PHP Documentator

Repositório de plugins disponíveis

gruntjs.com/plugins

Muito bonitinho isso tudo funcionando mas...

...isso não parece prático de ser usado no meu trabalho

Plugin matador

grunt-contrib-watch

Esse sim trabalhará por você ;)

Até aqui a ferramenta pareceu buenacha mas ela ainda vai muito além

Vou citar um case

O LESS é uma ferramenta muito interessante

Mas quem já tentou fazer um desenvolvimento modular com ela certamente ficou muito frustrado...

...ela tem escopo de arquivo para suas variáveis e mixins.

E isso não é ruim. É MUITO ruim.

:(

Mas o grunt está aí para nos salvar

E com um único plugin!

grunt-contrib-concat

Bastou concatenar os arquivos antes do parse para CSS e o problema foi resolvido de forma simples

Uma simples combinação de plugins pode fazer coisas MUITO legais

Basta usarmos a cabeça para esquematizar a fórmula

Essa foi a introdução ao GruntJS :)

Obrigado

Perguntas?

@vini_monstro

Bom apetite :)

Os códigos e links serão disponibilizados junto com a apresentação no GitHub.

Essa apresentação foi feita com os web components da ninjaPresentation.