Automatizar Tarefas deve ser sua Primeira Tarefa @GuilhermeDiego

Palestra sobre automação de tarefas com Gulp, rolou no #2 OpenTalks.

Transcript

1. Automatizar Tarefas deve ser sua Primeira Tarefa!
3. O que é o Automatizar uma task? Imagine você trabalhando com Angular e tendo que adicionar uma tag script para cada controller, service ou whatever Imagine toda vez que voce mudar algum arquivo less, ter que refazer o comando para compilar. Imagine qualquer coisa que tê dê problemas e seja repetititva! “I got 99 problems but a task ain`t one”
4. O que é o Gulp? O Gulp é um automatizador de tarefas (a.k.a. TaskRunner), criado com Javascript em cima do “Orchestrator”, outro modulo Javascript. Por que o Gulp? Friendly Syntax Facil de Debuggar Facil de extender funções e tarefas Pipe System
5. npm install
6. Global VS Local npm install -g gulp npm install --save-dev gulp Truque de mestre Se você optar por não instalar o módulo local, você pode executar o gulp pelo módulo local através do comando ./node_module/gulp/bin/gulp.js <minha_task>
7. Hello World!
8. Entry Point O Gulp necessita de um arquivo chamado gulpfile.js para que possa ser executado. O comando gulp, seja ele global ou invocado localmente, tem que ser rodado no path onde se encontra o arquivo. Todas as tarefas cadastradas estarão disponiveis para serem usadas :D
9. Friendly Syntax gulp, cadastre uma task chamada hello que nãão tenha tasks dependentes e que depois execute o bloco de cóódigo: { console.log(“Hello OpenSanca”) } gulp, cadastre uma task chamada hello que nãão tenha tasks dependentes e que depois execute o bloco de código : {console.log(“Hello OpenSanca”)}
12. PRÉ - COMPILANDO LESS
13. Exercicio Basico! gulp, cadastre uma task chamada less que não tem tasks dependentes e que depois faça o seguinte {...} gulp cadastre uma task chamada less que não tem tasks dependentes e que depois faça o seguinte {...} gulp.task(‘less’, [], function () {...})
15. IT`S TIME O que nossa task vai fazer? Pegar files, Copilar Less, Minificar o CSS, Renomear e mover ele para alguma pasta! Nossa sequência de tasks será: get source -> less -> minify -> rename -> move to destination O que nosso gulp sabe fazer? get source e move to destination
16. Get Source AND Move to Destination Quando executamos: gulp get the source (ou seja, gulp, pegue o código), gulp. src(), ele pode receber uma string ou array com paths e algumas opções (não entraremos nelas nessa talk) Já quando usamos o : gulp move to destination (gulp, mova para um destino), gulp.dest(), aqui passamos o path para onde estamos mandando os nossos arquivos. Mas e o Less? Minify? Rename? Como faz?
17. Plugins O gulp tem um trilhão (na verdade um pouco mais de 10k) de plugins no NPM, basta procurar normalmente por ‘gulp oquetuprecisa’ e shazam
18. O que precisamos? Precisamos de um plugin para compilar less, um plugin para minificar e um para renomear! Já que sou um cara firmeza, tá na mão : gulp-less (https://www.npmjs.com/package/gulp-less) gulp-cssnano (https://www.npmjs.com/package/gulp-cssnano) gulp-rename (https://www.npmjs.com/package/gulp-rename)
20. Pipe System Em resumo, um pipe é você redirecionar a saida de algo para uma outra função, ou seja, uma sequência. Isso facilita na hora de construir uma task, sempre usando o methodo .pipe() para encadear funções que modificaram um conjunto de arquivos.
24. HANDLES
25. You can use but not abuse Uma das vantagens do pipe system é que podemos usar HANDLES! Podemos executar um .on(‘state’, callback) depois de qualquer pipe ou action do gulp! Com isso, podemos fazer algumas marcações importantes, porém, ao mesmo tempo, podemos poluir todo código amigável que temos...
26. task task_start task_stop task_error pipe end error Actions -> Handles
27. NODE & NPM <3
28. Tudo tranquilo e favorável! O gulp roda em cima do Node Env! Com isso em mente, podemos utilizar todos os recursos do Node ao nosso favor, como por exemplo os handles, que são originados do stream do Node :D Stream Doc : https://nodejs.org/api/stream.html Outro exemplo é a variavel ‘process’ que esta global (e o proprio global em si). Alem disso temos o NPM pra gerenciar e cadastrar scripts de rapido acesso para nós
29. Chegou a hora de elevar o Cosmo! Já sabemos o que podemos fazer/como fazer a automatizaçãção com o gulp, porém, como aplicar corretamente no meu projeto? Como fazer isso de maneira organizada, elegante e seguindo boas prááticas? Existem 4 etapas báásicas para arquiteturar a automatizaçãção:
30. 1 - Preparando o ENV Crie a pasta ou clone um projeto no qual queira implementar a automatização Depois vamos dar um npm init na raiz do projeto e preencher com os dados da nossa aplicaçãção! Por fim, vamos criar um gulpfile.js
31. 2 - Tasks! Chegou a hora de definir nossas tasks! Então vamos lá: - Processar Javascript (bundle, minificar e etc) - Processar Less (o mesmo que fizemos, mas com autoprefixer) - Mover Imagens / Fonts - Processar Handlebars - Clean (deletar a build) - Build (faz tudo isso) - Watch -> Build
32. 3 - Write! Essa é a parte onde achamos plugins e escrevemos nossas tasks dentro do gulpfile.js! Lembrem-se de algumas boas práticas: - Menos é mais - Nomes diretos e auto explicativos - Formatar os pipes de maneira correta - Tomar cuidado com parametros a serem passados para plugins - Sempre se atentar a ordem Variáveis / Tasks / Funções Auxiliares
33. 4 - Dividir, Modularizar e Refazer! Uma vez que temos as nossas tarefas funcionando, temos que avaliar se vale a pena deixá-las em um único gulpfile.js! As vezes fica ílegivel e/ou temos que aumentar as tarefas e não conseguimos por causa de todo o tumulto. Nesse momento nós vamos para o próximo passo : gulp modular!
34. SEMPRE DA PRA MELHORAR http://www.infoq.com/br/presentations/automatizando-grandes-aplicacoes-com-gulp
35. CI + GULP <3 Github + Travis
36. Perguntas ?!