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

Anúncios

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