Gulp connect e livereload

Hoje vamos ver como é simples subir um servidor web usando NodeJS, e ainda aproveitar as facilidades do Gulp para rodar nossas tarefas diárias, inclusive fazendo livereload! Quer ver como é fácil? Vem comigo :D

Criando a estrutura do projeto

Crie um diretório e execute dentro dele, no terminal:

1
touch gulpfile.js index.html style.css && echo "{}" > package.json

Isso irá criar a estrutura do nosso projeto:

1
2
3
4
5
.
├── gulpfile.js
├── index.html
├── package.json
└── style.css

Instalando os módulos necessários

Como de praxe, você precisa ter o NodeJS instalado, e o Gulp, instalado de modo global.

O quê? Ainda não sabe como usar o Gulp? Esse artigo pode te ajudar a começar! Se quiser saber um pouco mais sobre essa incrível ferramenta, aqui você encontra várias coisas legais sobre ele ;)

Vamos agora instalar os módulos necessários para os nossos testes. Execute no terminal, no diretório do seu projeto:

1
npm i --save-dev gulp gulp-connect

Agora vamos configurar nosso gulpfile.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
'use strict';

var gulp = require( 'gulp' );
var connect = require( 'gulp-connect' );
var files = [ 'index.html', 'style.css' ];

gulp.task( 'files', function() {
  gulp.src( files ).pipe( connect.reload() );
});

gulp.task( 'watch', function() {
  gulp.watch( files, [ 'files' ]);
});

gulp.task( 'connect', function() {
  connect.server({ livereload: true });
});

gulp.task( 'default', [ 'connect', 'watch' ]);

As tarefas são bastante simples. Nas linhas 3 e 4, incluímos as dependências: gulp e gulp-connect. Na linha 5, criamos um array com os arquivos que serão assistidos e, ao serem alterados, executarão o livereload.

Na linha 7, criamos a task files, passamos como source o array já configurado na varável files, e chamamos o connect.reload(). Isso diz ao connect quais arquivos devem ser alterados para que ele faça o reload :)

Na linha 11, criamos a task watch, que vai assistir os arquivos, para saber quando eles foram alterados.

Na linha 15, criamos a task connect, que vai subir nosso servidor web. Por padrão, ao chamar connect.server(), ele vai usar a porta 8080. Para subir em outra porta, passe um parâmetro port no objeto passado para esse método. No exemplo, estamos passando somente o parâmetro livereload: true, para que o livereload seja ativado.

Se quiser ver todas as opções do gulp-connect, você pode visitar a documentação completa aqui.

E, para finalizar, na linha 19, criamos a task default, que executa as tasks connect, para subir o servidor, e a task watch, para assistir as mudanças nos arquivos index.html e style.css.

Agora execute no seu terminal o comando:

1
gulp

Abra no seu navegador, o endereço http://localhost:8080 e você verá uma página em branco. Deixe o navegador e o seu editor lado a lado, e edite o arquivo index.html, colocando um conteúdo básico:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test Gulp Connect & Livereload</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Gulp Connect & Livereload</h1>
</body>
</html>

Ao salvar o arquivo, você já vai ver que, sem precisar recarregar a tela, o título Gulp Connect & Livereload já irá aparecer!

Agora, brinque um pouco, editando o arquivo style.css, e veja a mágica acontecendo xD

Você pode usar qualquer estrutura de diretórios, e fazer o livereload funcionar para qualquer tipo de arquivo, desde que passe corretamente o caminho dos mesmos.

Bastante simples não? E não precisa adicionar nenhum script a mais na sua index.html! O gulp-connect já faz todo o trabalho sujo xD

Curtiu a dica? Já usa livereload? Tem algo a complementar? Compartilhe conosco nos comentários!

Até a próxima :D

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1