Aprenda a criar sites no Visual Studio Code com Bower e Gulp

A Microsoft disponibilizou Visual Studio Code, uma ferramenta para edição de código multiplataforma, e que está disponível para Windows, Linux e Max OS X. Através dele é possível editar diferentes tipos de código como HTML, CSS, Javascript, Ruby, entre outros. E recentemente escrevemos um post sobre o Visual Studio Code e como utilizá-lo para desenvolver sites.

Leve e integrado com Git, npm e Node.JS, o Visual Studio Code surge como uma boa opção para desenvolvimento rápido de código. Neste post iremos aprofundar mais no tema e demonstrar como integrar o Bower, NPM e Gulp para fazer tanto o gerenciamento de pacotes como também executar tasks usando os recursos como gulp-less. O código completo pode ser obtido no repositório Git do TalkitBR.

Preparando o ambiente

Para usar o Visual Studio Code, precisaremos tanto do Git como do Node.JS. Ambos também devem estar registrados no caminho de execução do sistema. Seguem os passos:

Caso você ainda não tenha instalado o GIT, acesse o link https://git-scm.com/downloads, baixe e instale a versão mais apropriada para o seu sistema.
– Ao instalar o Git, selecionar opção para usa-lo em linha de comando do sistema (no Windows, opção “Use Git from the Windows Command Prompt”).
Após instalado, garanta que o executável do Git está no caminho de execução do sistema. Abra a linha de comando e executar o comando git:
Certifique-se também que você tenha o gerenciador de pacotes npm instalado. Sugere-se instalar o Node.JS que já inclui o npm. Para tanto, acesse o link https://nodejs.org/en/ (inclui também o nom), baixe e instale a versão mais apropriada para o seu sistema.
Após instalado, garanta que o executável do npm está no caminho de execução do sistema. Abra a linha de comando e execute o comando npm.
Baixe o módulo NPM “gulp”. Para tanto use o comando npm install -g gulp e depois repita para os demais módulos.
Baixe e instale o Visual Studio Code, que está disponível no site https://code.visualstudio.com/.
Abra o Visual Studio Code e então instale as seguintes extensões:
– Bower

– Gulp Snippets

– Relative Path

– vscode-npm-script

Para instalar as extensões, pressione Ctrl + Shift + P (tecla de atalho abre a paleta de comandos) e então digite “install extension”. Será mostrado o comando “ext install”. Pressione a tecla enter e então digite o nome da extensão a ser instalada (um comando para cada extensão acima).

As extensões acima serão utilizadas nos passos descritos no decorrer deste artigo.

Ao término das instalações, será necessário reiniciar o Visual Studio Code.

Criando a estrutura do site

A seguir iremos criar a estrutura do site e o diretório onde iremos manter nosso conteúdo web.

Clique em File > Open Folder… (abrir pasta) e escolha uma pasta para trabalharmos dentro do Visual Studio Code. Por exemplo, irei criar a pasta C:\talkitbr\site e então abri-la na ferramenta.
Crie uma pasta chamada “wwwroot” para mantermos os arquivos do site separados.
Por fim, crie o arquivo index.html dentro da pasta wwwroot e escreva o seguinte conteúdo:

<!DOCTYPE html>
<html>
	<head>
		<title>Exemplo TalkitBR</title>
	</head>
	<body>
		<div>
			<header>
				<h1>Seja bem vindo!</h1>
			</header>
		</div>
	</body>	
</html>

Para facilitar a escrita do código HTML podemos usar o recurso de criação de tags contido no Visual Studio Code. Para isso, escreva div>header>h1 e então pressione a tecla TAB. Já serão criadas as tags div, header e h1, uma dentro da outra. E isso pode ser feito para qualquer tag HTML. Exemplo: html>head>title e então pressione a tela TAB; body>div>header>h1 e então pressione a tela TAB, e assim por diante.

Integrando o Bower Client Package Manager

Agora vamos começar a incluir as bibliotecas e arquivos CSS que iremos usar no nosso site. Mas ao invés de baixarmos e mantermos essas bibliotecas manualmente, iremos usar o Bower, que é um gerenciador de pacotes do lado cliente. A grande vantagem do Bower é que ele já busca as dependências também, gerenciando os pacotes que usamos. No caso do Bootstrap, por exemplo, ele já baixa a versão da biblioteca JQuery necessária.

Para isso, precisamos criar o arquivo bower.json na raiz da nossa pasta dentro do Visual Studio Code. Podemos tanto usar a extensão Bower instalada previamente (abrir a paleta de comandos do Visual Studio Code e então executar o comando Bower e então Bower init), ou criar o arquivo manualmente. Segue procedimento manual:

Crie o arquivo bower.json na raiz da nossa pasta no Visual Studio Code.
Nele escreva o seguinte conteúdo:

{
	"name": "TalkitBRSample",
	"dependencies": {
		"bootstrap": "3.3.6"
	}
}

Agora vamos baixar esses pacotes usando a extensão do Bower que instalamos no Visual Studio Code. Abra a paleta de comandos Visual Studio Code e então execute o comando Bower, selecionando a opção Bower Install.

Note que foi baixado tanto o Bootstrap como a dependência JQuery no diretório “bower_components”. Caso seja necessário mudar o Bootstrap, basta atualizar a versão no arquivo bower.json e executar novamente o comando Bower install.

Automatizando tarefas através do Gulp

Agora vamos automatizar a tarefa que irá copiar somente os arquivos que precisamos da pasta bower_components para dentro do nosso site. Essa automatização pode ser feita usando Gulp. Vamos então baixar o módulo Gulp via NPM de dentro da ferramenta:

Crie o arquivo package.json na raiz do nosso diretório e nele inclua o seguinte conteúdo:

{
  "name": "TalkitBRSample",
  "version": "1.0.0",
  "devDependencies": {
	  "gulp": "3.9.0"
  }
}

Agora abra a paleta de comandos (Ctrl+Shift+p) e escreva o comando npm install. Será aberta janela de linha de comando que irá baixar os módulos definidos no arquivo package.json.
O próximo passo é especificar as tarefas que queremos automatizar com o gulp. Crie o arquivo gulpfile.js na raiz do projeto e escreva o seguinte conteúdo:
```
var gulp = require("gulp");

gulp.task("copy", function () {
	gulp.src("./bower_components/bootstrap/dist/**").pipe(gulp.dest("./wwwroot/lib/bootstrap"));
});
```
A tarefa em questão copia os arquivos contidos no diretório dist do Bootstrap para a pasta lib/bootstrap dentro do diretório do nosso site. Lembre-se de executar essa tarefa caso a versão do bootstrap mude.

Pode ser necessário reiniciar o Visual Studio Code para atualizar a definição de lista de tarefas.
Para executar a tarefa, abra a paleta de comandos e então execute o comando Run Task. Serão listadas todas as tarefas contidas no diretório, que no nosso caso é só uma, a “copy”:
Será exibido o resultado da tarefae o diretório lib será criado dentro da pasta wwwroot:

Agora vamos referenciar o CSS bootstrap no nosso site. Para tanto, abra o arquivo index.html e adicione o código destacado abaixo:

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo TalkitBR</title>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div>
            <header>
                <h1>Seja bem vindo!</h1>
            </header>
        </div>
    </body>   
</html>

Para adicionar o caminho do arquivo dentro do atributo href, vamos usar a extensão “Relative Path”. Clique entre as aspas do atributo em questão e, através da paleta de comandos (tecla de atalho Ctrl+Shift+P), digite Relative Path e então execute o comando. Será mostrada uma lista de arquivos e entre eles selecione o arquivo wwwroot/lib/bootstrap/bootstrap.min.cs:

Agora vamos incluir as classes CSS especificadas pelo Bootstrap no nosso arquivo index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo TalkitBR</title>
        <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
	    <header class="page-header">
		<h1>Seja bem vindo!</h1>
            </header>
        </div>
    </body>   
</html>

Incluindo compilador Gulp-less

Agora que temos o Gulp integrado no nosso projeto, podemos ir além e incluir o compilador less do Gulp para gerar arquivos CSS com mais recursos.

Para começar, vamos baixar o módulo Gulp-less. Abra o arquivo package.json e atualize o arquivo com o conteúdo abaixo:

{
  "name": "TalkitBRSample",
  "version": "1.0.0",
  "devDependencies": {
	  "gulp": "3.9.0",
	  "gulp-less": "3.0.5"
  }
}

Execute novamente o comando npm install via paleta de comandos para instalar o novo pacote.
Feito isso, agora podemos começar a trabalhar com CSS less no nosso site. Crie, dentro da pasta wwwroot, a pasta less e, dentro dessa pasta, o arquivo variables.less com o seguinte conteúdo:
```
@background: lightgray;
```
Crie também o arquivo site.less, no mesmo diretório less, com o seguinte conteúdo:
```
@import "variables.less";

body {
	background-color: @background;
}
```
Os arquivos .less ainda precisam ser compilados para arquivos .css para serem incluídos no site.

Vamos agora incluir uma nova tarefa para compilar os arquivos .less. Abra novamente o arquivo gulpfile.js e inclua as linhas em destaque:

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("copy", function () {
	gulp.src("./bower_components/bootstrap/dist/**").pipe(gulp.dest("./wwwroot/lib/bootstrap"));
});

gulp.task("less", function () {
	gulp.src("./wwwroot/less/*.less")
		.pipe(less({compress: true}))
		.pipe(gulp.dest("./wwwroot/less"));
});

Pode ser necessário reiniciar o Visual Studio Code para atualizar a definição de lista de tarefas.

Para executar a tarefa, abra a paleta de comandos e então execute o comando Run Task. Serão listadas todas as tarefas contidas no diretório, que no nosso caso é a “less”:

Agora vamos incluir referência ao arquivo CSS no nosso site. Abrir o arquivo index.html e incluir a seguinte linha em destaque:

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo TalkitBR</title>
        <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="./less/site.css">
    </head>
    <body>
        <div class="container">
			<header class="page-header">
				<h1>Seja bem vindo!</h1>
            </header>
        </div>
    </body>   
</html>

Criando task de watch

Agora que fizemos a geração dos arquivos .css a partir dos arquivo .less, precisamos automatizar essa tarefa para não corrermos o risco de ter uma alteração no arquivo .less não compilada para .css. Para tanto vamos usar a tarefa tipo watch do gulp:

Abra novamente o arquivo gulpfile.js e nele inclua a seguinte tarefa:
```
gulp.task("watch", function () {
	gulp.watch("./wwwroot/less/*.less", ["less"]);
});
```
Pode ser necessário reiniciar o Visual Studio Code para atualizar a definição de lista de tarefas.
Agora vamos executar a tarefa. Abra a paleta de comandos e defina o comando Run Task. Serão listadas todas as tarefas contidas no gulpfile.js. Selecionar a tarefa “watch”:

Diferentemente das outras tasks, essa ficará executando continuamente. O Visual Studio Code exibe essa informação através de sua barra de status:

Deste momento adiante, qualquer alteração feita nos arquivos .less fará com que novos arquivos CSS sejam gerados.

Configurando tarefa de execução do nosso projeto

Próximo passo é criarmos tarefa relacionada com a build do projeto. Isso facilita execução e testes do nosso site.

Vamos primeiro baixar o módulo gulp-webserver. Abra o arquivo package.json e o altere conforme conteúdo abaixo:

{
  	"name": "TalkitBRSample",
  	"version": "1.0.0",
  	"devDependencies": {
	  	"gulp": "3.9.0",
		"gulp-less": "3.0.5",
		"gulp-webserver": "*"
  	}
}

Feito isso, vamos executar o comando npm install. Abra a paleta de comandos (Ctrl + Shift + P), escreva npm install e execute o comando.

Inclua uma nova tarefa no arquivo gulpfile.js:

var gulp = require("gulp");
var less = require("gulp-less");
var webserver = require("gulp-webserver");

gulp.task("copy", function () {
	gulp.src("./bower_components/bootstrap/dist/**").pipe(gulp.dest("./wwwroot/lib/bootstrap"));
});

gulp.task("less", function () {
	gulp.src("./wwwroot/less/*.less")
		.pipe(less({compress: true}))
		.pipe(gulp.dest("./wwwroot/less"));
});

gulp.task("watch", function () {
	gulp.watch("./wwwroot/less/*.less", ["less"]);
});

gulp.task('webserver', function() {
  gulp.src('wwwroot')
    .pipe(webserver({
      livereload: true,
      directoryListing: false,
      open: true
    }));
});

Agora vamos configurar a tarefa de execução do projeto. Abra a paleta de comandos e especifique o comando “Configure Task Runner” ou ainda, pressione as teclas Ctrl + Shift + B (atalho para Run Build Task) e selecione a opção “Configure Task Runner”. Como é a primeira execução, será detectado que não há tarefas configuradas, e será solicitada a configuração.
Será aberto o arquivo tasks.json com conteúdo padrão. Vamos alterá-lo para o seguinte conteúdo:
```
{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "args": [],
            "isBuildCommand": true
        }
    ]
}
```
O que estamos fazendo é especificar a task webserver que especificamos no gulpfile.js como tarefa de build. Podemos ainda incluir outras tarefas definidas no gulpfile.js.
Pronto! Basta pressionar as teclas Ctrl + Shift + B (atalho para Run Build Task) que uma instância do servidor HTTP será aberta e o browser default será aberto com o seu site:

Clique aqui para baixar o projeto completo.

Quer Saber Mais?

Quer obter mais dicas e sugestões? Comente aqui e continue nos acompanhando no talkitbr.

Além disso, seguem alguns sites que trazem informações sobre o Visual Studio Code:

https://code.visualstudio.com/docs: Documentação sobre o Visual Studio Code.
https://github.com/Microsoft/vscode: Projeto Git do Visual Studio Code Open Source

Deixe um comentário Cancelar resposta

Digite seu comentário aqui...

Preencha os seus dados abaixo ou clique em um ícone para log in:

Email (Nunca tornar endereço público)

Nome

Site

Você está comentando utilizando sua conta WordPress.com. ( Sair / Alterar )

Você está comentando utilizando sua conta Google. ( Sair / Alterar )

Você está comentando utilizando sua conta Twitter. ( Sair / Alterar )

Você está comentando utilizando sua conta Facebook. ( Sair / Alterar )

Cancelar

Conectando a %s