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 teclaenter
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 pastaC:\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 pastawwwroot
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çãoBower 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 comandoBower 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 arquivopackage.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 pastalib/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), digiteRelative 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 pastaless
e, dentro dessa pasta, o arquivovariables.less
com o seguinte conteúdo:@background: lightgray;
- Crie também o arquivo
site.less
, no mesmo diretórioless
, 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 nogulpfile.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), escrevanpm 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 nogulpfile.js
como tarefa de build. Podemos ainda incluir outras tarefas definidas nogulpfile.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