Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automatizar Tarefas deve ser sua Primeira Tarefa @GuilhermeDiego

B2519015997dff04abe2568ebb2cf729?s=47 Opensanca
February 02, 2016

Automatizar Tarefas deve ser sua Primeira Tarefa @GuilhermeDiego

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

B2519015997dff04abe2568ebb2cf729?s=128

Opensanca

February 02, 2016
Tweet

More Decks by Opensanca

Other Decks in Programming

Transcript

  1. Automatizar Tarefas deve ser sua Primeira Tarefa!

  2. None
  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”)}
  10. None
  11. None
  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 () {...})
  14. None
  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)
  19. None
  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.
  21. None
  22. None
  23. None
  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 ?!