<p>Antes de explicar e demonstrar o poderoso automatizador de tarefas, <strong><a href="https://gulpjs.com/">Gulp</a></strong>, preciso explicar o que é um automatizador de tarefas.</p>
<h3 id="o-que-é-automatizadores-de-tarefas"><a href="#o-que-%C3%A9-automatizadores-de-tarefas" class="anchor">O que é Automatizadores de Tarefas?</a></h3>
<p>Existem alguns processos (tarefas) de desenvolvimento que se torna repetitivo e chato ter que fazer sempre, por exemplo, no <a href="http://stylus-lang.com/">Stylus</a>.
Caso não saiba eu espero você ler este meu artigo <a href="http://douglasporto.com.br/colocando-stylus-no-seu-site/">Colocando Stylus no seu site</a>.</p>
<p>Pronto? Leu? Legal, agora que viu e sabe sobre o <a href="http://stylus-lang.com/">Stylus</a>, imagina ter que rodar isso toda vez. Depois disso você quiser que todo esse <strong><em>CSS</em></strong> fique minificado.</p>
<p>Caso você tenha 10 tarefas como o pre-processador Stylus, vai ter que rodar 10 comados diferentes em seu terminal?</p>
<p>Se até agora fazia isso, pare agora.</p>
<h3 id="gulp"><a href="#gulp" class="anchor">GULP</a></h3>
<p>Temos diversos outros, como <a href="https://gruntjs.com/">GRUNT</a>, seu principal concorrente. Porém quero apenas falar e demonstrar o <strong><a href="https://gulpjs.com/">Gulp</a></strong>.</p>
<blockquote>
<p>gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something (<a href="https://gulpjs.com/">Doc Gulp</a>).</p>
</blockquote>
<h4 id="instalação"><a href="#instala%C3%A7%C3%A3o" class="anchor">Instalação</a></h4>
<p>O <strong><a href="https://gulpjs.com/">Gulp</a></strong> roda em <strong><a href="https://nodejs.org/en/">Nodejs</a></strong>, então sim, você terá que ter ele em sua maquina.</p>
<p>Para instalação do Gulp vamos rodar o famoso comando <strong>NPM</strong></p>
<pre><code class="language-bash">npm install -g gulp
</code></pre>
<p>Se já conhece um pouco de <strong><a href="https://nodejs.org/en/">Nodejs</a></strong>, perceberá que o rodamos com o <code>-g</code>, ou seja, instalamos o <strong><a href="https://gulpjs.com/">Gulp</a></strong> globalmente.</p>
<p>Rode o comando para ter certeza que o gulp foi instalado</p>
<pre><code class="language-bash">gulp -v
</code></pre>
<p>Caso não mostre a versão, significa que não intalou, então tente instalar com <code>sudo</code>.</p>
<h4 id="iniciando-nosso-projeto"><a href="#iniciando-nosso-projeto" class="anchor">Iniciando nosso projeto</a></h4>
<pre><code class="language-bash">|projeto/
|--src/
|----source.js
|--stylus/
|----main.styl
|--Gulpfile.js
</code></pre>
<p><strong>Agora vamos começar.</strong> Rode em seu terminal o comando <code>npm init</code>.</p>
<p>Será solicitado algumas informações, você pode inserir como preferir:</p>
<pre><code class="language-bash">package-name: gulp_learning
version: 1.0.0
description: To learning Gulp
entry point: index.js
test comand: _(enter)_
git repository: _(enter)_
keywords: gulp, es5, es6, stylus
Author: Douglas Porto
license: ISC
</code></pre>
<p>Agora temos um <code>package.json</code> assim:</p>
<pre><code class="language-javascript">{
  "name": "gulp_learning",
  "version": "1.0.0",
  "description": "To learning Gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &#x26;&#x26; exit 1"
  },
  "keywords": [
    "gulp",
    "es5",
    "es6",
    "stylus"
  ],
  "author": "Douglas Porto",
  "license": "ISC"
}
</code></pre>
<h4 id="instalando-plugins"><a href="#instalando-plugins" class="anchor">Instalando plugins</a></h4>
<p>Vamos utilizar o <strong>NPM</strong> mais uma vez rodando o comando:</p>
<pre><code class="language-bash">npm install @babel/core @babel/preset-env gulp-stylus --save-dev
</code></pre>
<p>Agora inclua o programa <code>.babelrc</code> e dentro dele faça:</p>
<pre><code class="language-js">{
  "presets": ["@babel/preset-env"]
}
</code></pre>
<h4 id="começando-a-brincadeira"><a href="#come%C3%A7ando-a-brincadeira" class="anchor">Começando a brincadeira</a></h4>
<p>Agora sim podemos começar a brincar com o <strong><a href="https://gulpjs.com/">Gulp</a></strong></p>
<p>Antes de tudo no arquivo <code>gulpfile.js</code> precisamos incluir o gulp.</p>
<pre><code class="language-javascript">var gulp = require("gulp")
</code></pre>
<p>A váriavel <code>gulp</code> comtém o objeto com as funções necessárias para podermos confirgurar nossas tarefas <em><strong>(task)</strong></em>.</p>
<p>Chamaremos então uma função que esta no objeto, chamada <strong>task</strong>.
Está função recebe 2 parametros, 1º o nome da tarefa, o 2º uma função.</p>
<pre><code class="language-javascript">var gulp = require("gulp")

gulp.task("teste", function() {
  console.log("Gulp Funcionando")
})
</code></pre>
<p>Rode em seu terminal <code>gulp teste</code>.</p>
<p>Você receberá 3 informações:</p>
<ul>
<li>[Hora] Starting 'teste' (Informação da hora e nome da task iniciada)</li>
<li>Gulp Funcionando (console.log da função)</li>
<li>[Hora] Finished 'teste' (Informação da hora e nome da task finalizada)</li>
</ul>
<h4 id="es6-para-es5"><a href="#es6-para-es5" class="anchor">ES6 para ES5</a></h4>
<p>Importe o <strong>babel</strong> para as configurações do <strong><a href="https://gulpjs.com/">Gulp</a></strong></p>
<pre><code class="language-javascript">var babel = require("gulp-babel")
</code></pre>
<p>Na função do nosso <strong>task</strong> <code>teste</code> vamos colocar a seguinte sintexe:</p>
<pre><code class="language-javascript">gulp.task("teste", function() {
  return gulp
    .src("./src/index.js") // Arquivo(s) que será lido
    .pipe(babel({ presets: ["@babel/preset-env"] })) //Plugin babel para a compilação do ES6
    .pipe(gulp.dest("dist")) // Destino para qual irá o arquivo após compilado
})
</code></pre>
<p><strong>Vamos testar se funciona.</strong></p>
<p>No arquivo <code>./src/index.js</code> vamos escrever uma arrow function do <em>ES6</em></p>
<pre><code class="language-javascript">var a = b => b
</code></pre>
<p>Rode o <code>gulp teste</code> e veja a mágica acontecer rs.</p>
<pre><code class="language-javascript">var a = function(b) {
  return b
}
</code></pre>
<p>Agora só para organizarmos melhor nosso projeto, vamos trocar o nome da task <code>teste</code> para <code>es5</code></p>
<h4 id="copilando-css-com-stylus"><a href="#copilando-css-com-stylus" class="anchor">Copilando CSS com Stylus</a></h4>
<p>Vamos criar uma nova task com nome de <em>stylus</em>.
Assim como na <em><strong>task</strong></em> anterior, devemos passar o caminho que deve obeservar, a função que deve executar e por fim o caminho destino.</p>
<pre><code class="language-javascript">gulp.task("stylus", function() {
  return gulp
    .src("./css/style.styl")
    .pipe(stylus())
    .pipe(gulp.dest("./dist/css/"))
})
</code></pre>
<p>No nosso <code>./css/style.styl</code> vamos deixar desta forma para teste.</p>
<pre><code class="language-css">.container {
  .row {
    div {
      background: black;
    }
  }
}
</code></pre>
<p>Agora rodamos o <code>gulp stylus</code> e temos:</p>
<pre><code class="language-css">.container .row div {
  background: #000;
}
</code></pre>
<h4 id="watch-e-default"><a href="#watch-e-default" class="anchor">Watch e Default</a></h4>
<p>Imagina que saco ter que digitar no terminal toda vez <code>gulp es5</code> depois <code>gulp stylus</code>. Que automatizador de tarefas é esse?</p>
<p>Para isso que existe o default, veja:</p>
<pre><code class="language-javascript">gulp.task("default", ["es5", "stylus"])
</code></pre>
<p>Rode apenas <code>gulp</code> e <em>voilà</em>.</p>
<p>Porém, toda alteração que executar no seus códigos terá que rodar <code>gulp</code>?</p>
<p>O <strong>watch</strong> fica observando os programas e assim que salva-los, ele executará a tarefa definida, veja:</p>
<pre><code class="language-javascript">gulp.task("watch", function() {
  gulp.watch("./src/index.js", ["es5"])
  gulp.watch("./css/style.styl", ["stylus"])
})
</code></pre>
<p>Rode <code>gulp watch</code> e teste.</p>
<p><strong><em>Incrível</em></strong> não? Agora junte o <strong>Default</strong> com o <strong>Watch</strong> e pronto.</p>
<pre><code class="language-javascript">gulp.task("default", ["es5", "stylus", "watch"])
</code></pre>
<p>Agora ao rodar <code>gulp</code> ele fará o es5, depois o stylus e começará a observar com o watch.</p>
<p>Bom, é isso ai galera. Este foi um exemplo muito simples de como funciona o <strong><a href="https://gulpjs.com/">Gulp</a></strong>.</p>



**Faaaala deeev!!!**

Com toda certeza você já deve ter escutado esta introdução em algum video no youtube. Estamos falando de [Diego Fernandes](https://twitter.com/dieegosfhttps://twitter.com/dieegosf) CTO da [Rocketseat](https://rocketseat.com.br/).

Caso você não saiba do que estou falando (acho dificil), deixarei aqui o [Canal do Rocketseat](https://www.youtube.com/channel/UCSfwM5u0Kce6Cce8_S72olghttps://www.youtube.com/channel/UCSfwM5u0Kce6Cce8_S72olg) (confira pois tem muuuuuito conteúdo de graça).

Se você esta lendo este post na semana que ele foi escrito (12 a 19 de janeiro de 2020), esta acontecendo a semana omnistack 10. Todos os dias serão disponibilizados videos com conteúdo sobre fullstack com **JavaScript** totalmente gratuido. Você aprenderá [nodejs](https://nodejs.org/en/https://nodejs.org/en/) \[Backend], [React](https://reactjs.org/https://reactjs.org/) \[Frontend] e [React-native](https://facebook.github.io/react-native/https://facebook.github.io/react-native/) \[Mobile].

Após essa semana será aberto a inscrição para o [Bootcamp](https://rocketseat.com.br/bootcamp).

### Mas fala logo, vale a pena?

Fui e ainda sou (plano vitalício) aluno da turma 7.0 \[Setembro de 2019]. Mas antes de falar se vale a pena, vou contar minhas experiência.

#### Comunidade Discord

Assim que você se inscreve, já pode entrar na comunidade do discord dos alunos. Por incrivel que parece é uma comunidade muito grande e altamente engajada. Sério, precisei colocar no mute pois não consigo acompanhar hehehe.

O melhor desta comunidade é que os canais são muito bem divididos e um ajuda o outro com as dúvidas. Além dos alunos, existem os **Instrutores** (que não são poucos) atentos as dúvidas, atentos mesmo! Por exemplo, um dia coloquei uma dúvida as 4 da manhã, meu objetivo era perguntar naquela hora para obter ajuda no próximo dia. E não é que um dos intrutores me respondeu na mesma hora?

#### Lives

Quase todos os dias são feito lives com diversos temas. Diversos temas mesmo. Mas além dos temas relacionados a programação (javascript e etc), quero enfatizar as lives que não são diretamente sobre programação.

São as lives de Inglês e Mentoria.

* Inglês

As lives de inglês é um bate-papo com uma professora de inglês dando varias dicas para aprimorar o inglês. Como disse, são lives quase todos os dias, então não vou estender sobre as de inglês pois foi uma das lives que deixei bastante de ver hehehe. Mas não por não serem boas, mas por falta de tempo.

* Mentorias

Essas lives, na minha opinião, são as melhores. São mentorias sobre desenvolvimento pessoal. Sim, me ajudou muito em diversas coisas, como por exemplo, arrumar [meu linkedIn](https://www.linkedin.com/in/douglas-porto/) para que seja mais visto. E não é que deu certo?

Recebia no mínimo 2 propostas de emprego por dia!

Hoje tenho postagens de 15k, 10k, 7k de visulizações.

#### Certificado

Diferente dos concorrentes, a [Rocketseat](https://rocketseat.com.br/) não dará o certificado apenas por você dar "play nos videos".

Durante mais ou menos 1 mês é disponibilizados os video das aulas. Junto são enviados alguns `.txt` que são os desafios.  Após esse mês, você receberá a data para a entraga do código.

***OMG!!! Entrega do Código???***

Sim, é isso que diferencia eles dos concorrentes. Você terá um prazo para enviar o código com os desafios.

> Mas como assim desafios, códigos, ainda nao entendi!!??

Calma, vou falar como foi o meu desafio.

Após assistir as aulas recebi o desafio que era desenvolver uma aplicação parecida com o [Meetup](https://www.meetup.com/pt-BR/), então criamos a ***MeetApp*** hehehe.

Neste desafio tinhamos tudo que precisava para desenvolver, as regras de negocios as tecnologias que poderia ser usadas, até mesmo um sketch para criarmos o frontend e mobile conforme desenhado.

Caso queira ver, este é meu projeto final [Github](https://github.com/douglasporto/meetapp-gostack).

![Meetapp](/assets/img/posts/meetapp.png "Meetapp")

Depois de enviar seu código basta aguardar ansiosamente pela nota e feedback.

![Nota Bootcamp](/assets/img/posts/nota-bootcamp.jpeg "Nota Bootcamp")

## Então vale a pena???

Em poucas palavras: depende!

O bootcamp é uma imersão muito forte e requer muita dedicação e tempo. Diversos amigos meus fizeram na mesma turma que eu e nem terminaram de ver as aulas. Por exemplo faltando uma semana para entrega do projeto eu acordava as 4 horas da manhã. E não pensa você que foi um sacrificio, pelo contrário, faria novamente!

Se você se inscrever e quiser ditar o seu ritmo, creio que vai perder o mais legal que é superar os limites em tão pouco tempo. A comunidade se ajudando, empurrando um ao outro. Assim como a tradução de `Rocket Seat` um assento de foguete, onde você deve estar preparado para ir muito longe!

Caso você não estaja com tempo, ou na "vibe" de estudos intensos, aconselho duas outras escolas online de programação.

* [Alura](https://www.alura.com.br/)
* [Schoo of Net](https://www.schoolofnet.com/)

Duas escolas excelentes tambem, porém com propostas um pouco diferente da [Rocketseat](https://rocketseat.com.br/).

Agora se você esta focado e afim de mudar sua vida profissional, vale sim cada centavo!

Mas e ai, você já fez alguma das Semana Omnistack?

Já participou de um [Bootcamp](https://rocketseat.com.br/bootcamp) ??

Pensa em fazer? não? Vamos trocar uma ideia....


Bootcamp Rocketseat, vale a pena?

O famoso curso bootcamp da Rocketseat realmente vale o valor?


Neste artigo não vou enrolar. Vamos colocar a mão na massa e aprender na prática a utilizar o [AXIOS](https://github.com/axios/axios).

Faremos uma página onde digitaremos um usuário [GitHub](https://github.com/) para buscar os dados na [API do GitHub](https://developer.github.com/v3/) e montaremos em nossa tela todos os repositórios deste usuário.

Vamos lá.

Crie o `index.html` já colocando o **VUE** e **AXIOS** via **CDN** mesmo.

```html
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link rel="shortcut icon" href="assets/img/ico/favicon.ico" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    <script src="config/index.js"></script>
  </body>
</html>
```

Agora vamos criar o `config/index.js` para instanciar nosso VUE.

Vamos utilizar duas variáveis VUE:

- **usuario** para termos o v-bind do nosso campo texto digitado
- **github** que será nosso objeto retornado da API do GitHub

```javascript
var app = new Vue({
  el: "#app",
  data: {
    usuario: "",
    github: {},
  },
})
```

Voltamos para o `index.html` para escrevermos nosso layout.

Para deixar um pouco mais bonito nosso exemplo, vamos colocar o [Bootstrap](http://getbootstrap.com/).
Em nosso layout teremos uma `<nav>` e logo abaixo nosso `<div class="container">` para colocar o `<button>` e o campo `usuario`.

```html
<nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
  <a class="navbar-brand" href="#">Vue-js + Axio</a>
</nav>
<div class="container">
  <div class="row">
    <div class="col-md-12 jumbotron">
      <form class="form-inline" v-on:submit.prevent>
        <label class="sr-only" for="userGit">Usuário</label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input
            type="text"
            class="form-control"
            id="userGit"
            v-model="usuario"
            placeholder="Usuario"
          />
        </div>
        <button
          type="submit"
          class="btn btn-primary mb-2"
          @click="buscarGit"
          :class="{'disabled':usuario.trim()==''}"
        >
          Buscar
        </button>
      </form>
    </div>
  </div>
</div>
```

Percebem que em nosso `<form>` temos um `v-on:submit.prevent` apenas para não ser chamado a função `submit` do `<form>` e atualizar a página.

Já colocamos também o `@click="buscarGit"` que será nosso método para buscar as informações na API. Usamos também um `v-bind` na nossa `class` para desabilitar o `<button>` caso usuario seja vazio.

### Axios

Nosso **axios** será a parte mais facil deste simples exemplo.

```javascript
methods: {
  buscarGit: function () {
    let api = 'https://api.github.com/users/' + this.usuario;
    vm = this;
    axios.get(api).then(function(response) {
      vm.github = response.data;
      console.log(vm.github);
    });
  }
}
```

Agora busque um usuário e observe o cosole.

É possível ver tudo o que a API fornece. Agora terminamos nosso código mostrando os repositórios do usuário que buscamos.

```html
<div v-if="github.name">
  <div class="row jumbotron">
    <div class="col-md-6">
      <div class="avatar">
        <img :src="github.avatar_url" />
      </div>
      <div class="nickname">
        <h2>{ { github.name } }</h2>
        <h2 class="login"><small>({ { github.login } })</small></h2>
      </div>
    </div>
    <div class="col-md-6">
      <div class="pull-right well info">
        <ul>
          <li>
            <h1>{ { github.public_repos } }</h1>
            Public Repos
          </li>
          <li>
            <h1>{ { github.followers } }</h1>
            Followers
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

Agora basta ler a [documentação do GitHub](https://developer.github.com/v3/) e deixar a criatividade fluir.



Buscando Usuário GitHub com AXIOS

Vamos aprender na prática como fazer uma requisição AXIOS na API do GitHub.

Conhecendo Gulp

Conheça o mundo dos automatizador de tarefas Gulp.