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


# Searching Github Users With AXIOS

﻿In this article, we'll see in practice how to use [AXIOS](https://github.com/axios/axios).
Getting straight to the point, we'll make a page that searches for a [GitHub](https://github.com/) user and shows on-screen its repositories.

Having said that, let's go!

First, you'll create `index.html` and put on [VUE](https://vuejs.org/v2/api/) and [AXIOS](https://github.com/axios/axios) by **CDN**.



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

Then, create a `config/index.js` file to instantiate [VUE](https://vuejs.org/v2/api/).


In this step, we'll use two VUE variables:
- **user**: for input text;
- **gitHub**: for the API's return.


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

Use the `index.html` to create the layout of your page. You can use the [Bootstrap](http://getbootstrap.com/)or any other framework if you want to make it more sophisticated. Check out the example:

```html
  <nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
    <a class="navbar-brand" href="#">Vue-js + Axios</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">User</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='user' placeholder="user">
        </div>
        <button type="submit" class="btn btn-primary mb-2" @click="searchGit" :class="{'disabled':user.trim()==''}">Search</button>
      </form>
    </div>
  </div>
```

Notice that the `<form>` has a `v-on:submit.prevent` just to avoid calling the `submit` function. Also, we use a `@click="searchGit"` tag to call the API information's search and a `v-bind` `class` to disable the `<button>` if the user is empty.

### Axios


Apply [AXIOS](https://github.com/axios/axios) is the easiest part of the example. Let's check it out:

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


You are now able to search for a user. Check the console to see the result. You'll see everything that the API GitHub provides.

The last step is to display its repositories. You can do it as follows:


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

![Screen Axios+Vue.js](http://douglasporto.com.br/assets/img/posts/screen-axios-vue.png)

That's it!


Read the [GitHub Documentation](https://developer.github.com/v3/) for further information and let the creativity flow!

Did you like this tip? Comment here below and let's talk.


Searching Github Users With AXIOS

Let's learn on the practice how to make a request with AXIOS on GitHub API.

Conhecendo Gulp

Conheça o mundo dos automatizador de tarefas Gulp.