{"componentChunkName":"component---src-templates-single-template-tsx","path":"/comece-com-gulp","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

Automatizadores de tarefas ou como são conhecidos pelo termo em inglês Task Runners, tem a capacidade de fazer muita coisa, facilitam muito não só no desenvolvimento dos projetos mas também nos builds e deploys, cara é simplesmente lindo.

\n

Já usei o Gruntjs e Rake tasks do Ruby, ambos são muito bons e tem suas finalidades, mas hoje vou falar sobre o magnífico GulpJS.

\n

Poque eu deveria usar um Task Runner?

\n

Usar um automatizador de tarefas te traz muitas vantagens, das quais se você desfrutar nunca mais vai querer começar o desenvolvimento de um novo projeto sem elas.

\n

Abaixo eu vou listar algumas, se não te fizer brilhar os olhos você talvez não precisará de um task runner.

\n

Com apenas um comando você consegue:

\n\n

E ai gostou? Ainda tem mais vantagens que não foram listadas acima, essas são as que eu mais gosto de citar quando me perguntam quais as vantagens de um Task Runner.

\n

Eu sempre gosto de dizer: “Ele me faz ter mais tempo para o meu café”.

\n

Porque eu deveria usar o GulpJS?

\n

O Gulp te dá todas as vantagens que citei no bloco anterior, além de:

\n\n
\n

“gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.\"

\n
\n

Essa frase acima está na homepage do gulp, ela te dá um breve overview do que você irá encontrar se começar a se aventurar com ele.

\n

Instalação e configuração do Gulp

\n

Vamos criar um projeto simples, apenas para executar algumas tarefas com Gulp, o nome do projeto será Comece com gulp, e claro, ele tá lá no Github.

\n

😎

\n

Instale o Gulp global com o comando: npm install -g gulp-cli.

\n
\n

PS. em alguns sistemas operacionais, se você não estiver usando NVM para gerenciar suas versões do nodejs, você precisará executar o comando com SUDO.

\n
\n

Inicie o projeto npm com o comando: npm init.

\n

\n \n \n \n \n \n \n \n \n
Comece com Gulp - npm init
\n

\n

Esse comando irá criar um arquivo chamado package.json, com ele você gerencia todos os pacotes e dependências do seu projeto.

\n

O meu package.json ficou mais ou menos assim:

\n
{\n  \"name\": \"comece-com-gulp\",\n  \"version\": \"1.0.0\",\n  \"description\": \"> Repositório do artigo: http://nandomoreira.me/comece-com-gulp\",\n  \"main\": \"gulpfile.js\",\n  \"dependencies\": {\n    \"gulp\": \"^3.9.1\"\n  },\n  \"devDependencies\": {},\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/nandomoreirame/comece-com-gulp.git\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/nandomoreirame/comece-com-gulp/issues\"\n  },\n  \"homepage\": \"https://github.com/nandomoreirame/comece-com-gulp#readme\"\n}
\n

Instale o Gulp local com o comando: npm install --save-dev gulp ou yarn add -D gulp

\n

Você vai notar que na linha onde tinha "devDependencies": {}, foi adicionado o gulp.

\n
\"devDependencies\": {\n  \"gulp\": \"^3.9.1\"\n},
\n

O gulp agora faz parte das dependências de dev do seu projeto, assim como os módulos que iremos instalar para ajudar na execução das tarefas.

\n

Hello World com Gulp

\n

Dentro do projeto temos o arquivo package.json e o diretório node_modules onde está instalado o Gulp local.

\n

Vamos criar o arquivo chamado gulpfile.js, que é obrigatório para criarmos as tarefas do Gulp.

\n
$ touch gulpfile.js
\n

Nesse arquivo vamos requerir o Gulp usando CommomJS: require('gulp');.

\n
'use strict'\n\nvar gulp = require('gulp')
\n

Na primeira linha temos o 'use strict';, se você não sabe para que serve o ‘use strict’; eu indico assistir a palestra de Javascript Secrets do Fernando Daciuk, muito legal. Já na segunda linha criamos uma variável chamada gulp, a qual iremos usar muito por todo nosso código.

\n

Vamos ao Hello World.

\n
'use strict'\n\nvar gulp = require('gulp')\n\ngulp.task('hello', function() {\n  console.log('Hello World.')\n})
\n

Basta rodar o comando gulp hello no seu terminal que a mágica vai acontecer.

\n

\n \n \n \n \n \n \n \n \n
Imagem com o comando gulp hello
\n

\n

Comandos

\n

Você pode obter a lista de comandos do Gulp apenas digitando o commando gulp --help no seu terminal.

\n

\n \n \n \n \n \n \n \n \n
Imagem com o comando gulp --help
\n

\n

Um comando bem interessante é o que lista todas as tasks do projeto gulp --tasks.

\n

\n \n \n \n \n \n \n \n \n
Imagem com o comando gulp --tasks
\n

\n

Concluindo..

\n

Esse foi apenas o primeiro passo para você começar com Gulpjs, vai por mim, tem muitas coisas legais que da pra fazer com uma task do gulp. Espero que tenha gostado do artigo, é simples mas útil.

\n

Logo mais vou fazer outro artigo um pouco mais avançado para você ir mais além com ele.

\n

Até breve.

\n

/end

","excerpt":"Automatizadores de tarefas ou como são conhecidos pelo termo em inglês Task Runners, tem a capacidade de fazer muita coisa, facilitam muito não só no…","timeToRead":4,"frontmatter":{"category":["gulp"],"date":"há 10 anos","datePublished":"2017-01-08T00:00:00.000Z","description":"Eu particularmente gosto muito de ganhar tempo com o desenvolvimento dos meus projetos e usar automatizador de tarefas me dá esse poder.","path":"/comece-com-gulp","tags":["gulp","javascript","tasks","taskrunners"],"title":"Comece com Gulp!","image":{"publicURL":"/static/comece-com-gulp-29ad534bcd8c62207f472d6b92fe7f99.png","name":"comece-com-gulp"}},"fields":{"readingTime":{"words":839}}}},"pageContext":{}}}