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:

  1. 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”).

  2. 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:desenvolvendo_sites_com_vscode_git_command
  3. 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.
  4. 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.
  5. Baixe o módulo NPM “gulp”. Para tanto use o comando npm install -g gulp e depois repita para os demais módulos.
  6. Baixe e instale o Visual Studio Code, que está disponível no site https://code.visualstudio.com/.
  7. 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).

    desenvolvendo_sites_com_vscode_extensions

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.

  1. 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.

  2. Crie uma pasta chamada “wwwroot” para mantermos os arquivos do site separados.desenvolvendo_sites_com_vscode_selectfolder

  3. 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:

  1. Crie o arquivo bower.json na raiz da nossa pasta no Visual Studio Code.

  2. Nele escreva o seguinte conteúdo:

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

desenvolvendo_sites_com_vscode_bower

  1. 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.desenvolvendo_sites_com_vscode_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:

  1. 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"
      }
    }
    

    desenvolvendo_sites_com_vscode_npm_gulp

  2. 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.desenvolvendo_sites_com_vscode_npm_gulp_install
  3. 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.

  4. 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”:desenvolvendo_sites_com_vscode_run_task_copy
  5. Será exibido o resultado da tarefae o diretório lib será criado dentro da pasta wwwroot:desenvolvendo_sites_com_vscode_run_task_copy_done
  6. 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>
    
  7. 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:

    desenvolvendo_sites_com_vscode_relative_path

  8. 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.

  1. 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"
      }
    }
    
  2. Execute novamente o comando npm install via paleta de comandos para instalar o novo pacote.
  3. 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;
    

    desenvolvendo_sites_com_vscode_variablesless

  4. 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.

  5. 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.

  6. 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”:

    desenvolvendo_sites_com_vscode_gulpless_run

  7. 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:

  1. 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.

  2. 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:desenvolvendo_sites_com_vscode_watch_task

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.

  1. 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": "*"
      	}
    }
    
  2. Feito isso, vamos executar o comando npm install. Abra a paleta de comandos (Ctrl + Shift + P), escreva npm install e execute o comando.
  3. 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
        }));
    });
    
  4. 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.
  5. 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.

  6. 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:

    desenvolvendo_sites_com_vscode_final

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:

Anúncios

Deixe um comentário

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

Logotipo do WordPress.com

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

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s