Automação de build para frontendvanessa me tonini

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

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)

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.

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.

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.

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

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...

Ferramentas

task runner tools

GRUNT JS

npm + Node.js

GRUNT JS: instalação

sudo npm install -g grunt-cli

GRUNT JS: preparando seu projeto

package.json

Gruntfile.js

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"

}

}

GRUNT JS: Gruntfile.jsmodule.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']);

};

exemplos

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/

@vanessametonini

obrigada!