O documento discute a automação de builds para frontend, introduzindo as ferramentas Grunt.js para automatizar tarefas como testes, pré-processamento de CSS, minificação de arquivos e validação de código. A autora explica como configurar o Grunt.js para um projeto, definindo tasks no Gruntfile.js para compilar e otimizar o código durante o build.

1. Automação de build para
frontend
vanessa me tonini

2. eu sou...
● Desenvolvedora Web desde 2007
● Tecnóloga em sistemas para Internet pela UNIVALI
● Especialista em desenvolvimento Web pela UTFPR
● Hoje trabalho em projetos de fomento a
acessibilidade Web e Open Web no W3C Brasil

3. automação
Automação é a aplicação de técnicas
computadorizadas ou mecânicas para diminuir
o uso de mão-de-obra em qualquer processo,
especialmente o uso de robôs nas linhas de
produção. Lacombe (2004)

4. automação
para o desenvolvimento de softwares
É o processo de escrita de um programa
de computador para executar uma série
de tarefas automaticamente.
Estas tarefas servem desde para garantia
do funcionamento como para
perfomance de um software.

5. performance para frontend
Desde o surgimento do HTML5, construir
aplicações Web ficou mais complexo.
A complexidade não está só nas linguagens,
que evoluiram muito nos últimos anos.
Mas também na diversidade de dispositivos
para acessar a Internet, que aumentaram
rapidamente.

6. build de frontend
O build é a versão final compilada de um
software.
No caso do frontend é o pacote de código
fonte já testado e otimizado.

7. Tasks para construção do build
● Testes de JS (unit & e2e)
● CSS pré processado
● Gerenciamento de Sprites (imagens do CSS)
● Concatenação e minização dos arquivos JS e
CSS

8. Tasks para construção do build
● Output de template engines
● Minimização de imagens
● Minimização de html
● Validação de código (w3c, lint …)
entre outras...

9. Ferramentas
task runner tools

10. GRUNT JS
npm + Node.js

11. GRUNT JS: instalação
sudo npm install -g grunt-cli

12. GRUNT JS: preparando seu projeto
package.json
Gruntfile.js

13. GRUNT JS: package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
}
}

14. GRUNT JS: Gruntfile.js
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") %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};

15. exemplos

16. referências
● http://www.targettrust.com.br/blog/o-que-e-automacao-de-teste-de-
software/
● http://pt.wikipedia.org/wiki/Automa%C3%A7%C3%A3o
● http://pt.wikipedia.org/wiki/Build
● http://www.infoq.com/br/presentationt-end-ops
● http://www.voltsdigital.com.br/labs/gruntjs-por-onde-comecar/
● http://www.nomensa.com/blog/2014/an-introduction-to-automating-
front-end-build-processes-using-grunt/
● http://gruntjs.com/

17. @vanessametonini
obrigada!