Como automatizar tarefas no código do Visual Studio

Usar uma ferramenta de compilação como Grunt ou Gulp pode economizar muito tempo do estágio de desenvolvimento automatizando alguns repetitivos “Tarefas”. Se você optar pelo Visual Studio Code como seu editor de códigos, seu fluxo de trabalho poderá ser ainda mais simplificado e, eventualmente, mais produtivo.

Construído com o Node.js em seu núcleo, o Visual Studio Code permite que você executar as tarefas sem ter que sair da janela do editor. E vamos mostrar-lhe como fazê-lo neste post.

Vamos começar.

Pré-requisitos

Para começar, você precisará ter o Node, o NPM (Node Package Manager) e o CLI (Command Line Interface) da respectiva ferramenta de compilação, todos instalados em seu sistema. Se você não tem certeza se tem tudo isso instalado, verificar é tão fácil quanto digitar as linhas de comando.

Também assumirei que os arquivos e diretórios em seu projeto estão em seu devido lugar, incluindo o config arquivo, como o gulpfile.js ou Gruntfile.js se você usar o Grunt em vez disso. E dependências do projeto registradas em package.json também deve ser instalado neste momento.

A seguir estão os nossos diretórios e arquivos de projeto, criados com a finalidade de demonstração neste artigo. Seu projeto certamente seria muito diferente; você pode ter mais ou menos arquivos.

. C── css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├── src ├── node_modules └── package.json

Nós utilizamos o Gulp como nossa ferramenta de construção em nosso projeto. Temos um número de tarefas registradas no gulpfile.js do seguinte modo:

 var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var sass = require ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('scripts', function () retornar gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('styles', function () retornar gulp.src (sassSrc) .pipe (sass (outputStyle: 'compactado')) .pipe (gulp.dest ('./css'));) ; gulp.task ('automatizar', função () gulp.watch ([sassSrc, jsSrc], ['scripts', 'estilos']);); gulp.task ('default', ['scripts', 'styles', 'automatizar']); 

Existem especificamente quatro tarefas que especificamos:

• roteiros: a tarefa que irá compilar os nossos arquivos JavaScript, bem como minifiy a saída através do plugin Gulp UglifyJS.
• Estilos: a tarefa que irá compilar os nossos arquivos SCSS em CSS, assim como comprimir a saída.
• automatizar: a tarefa que irá automatizar o Estilos e roteiros tarefa embora o gulp built-in ver utilitário.
• padrão: a tarefa que executará as três tarefas mencionadas todas juntas de uma só vez.

Como a ferramenta de construção em nosso projeto está toda preparada, agora também podemos continuar a automatizar essas tarefas que definimos dentro do gulpfile.js.

No entanto, caso você não esteja familiarizado com as ferramentas mencionadas, recomendo que consulte alguns de nossos posts anteriores para entrar no assunto antes de prosseguir..

• Como usar o grunhido para automatizar seu fluxo de trabalho
• Começando com o Gulp.js
• A batalha de construir scripts: Gulp vs Grunt

Executar e automatizar tarefas

Correndo e automatizando “Tarefas” no Visual Studio Code é bastante simples. Primeiro, inicie o Paleta de Comando pressionando a combinação de teclas Shift + Cmd + P ou através da barra de menu, Exibir> Paleta de Comandos se isso for mais conveniente para você. Então, digite Tarefas, e selecione “Tarefas: Executar Tarefa” do pequeno número de opções mostrado no resultado.

O Visual Studio Code é inteligente; sabe que estamos usando Gulp, pick up gulpfile.js, e revelar a lista de Tarefas que definimos no arquivo.

Aqui, vamos selecionar o padrão Tarefa. As folhas de estilo do SCSS e o arquivo JavaScripts serão compilados ao selecionar esta Tarefa, além de acionar o automatizar Tarefa que permitirá a Estilos e roteiros Tarefa para executar de forma autônoma daqui para frente.

Ao alterar um arquivo - uma folha de estilo ou um arquivo JavaScript - ele será automaticamente compilado. O Visual Studio Code também gera relatórios oportunos para cada sucesso e erros que ocorrem na operação de criação.

Integração Profunda

Além disso, podemos integrar nosso projeto ao Visual Studio Code para otimizar nosso fluxo de trabalho. E integrar nossas tarefas no código do Visual Studio é fácil e rápido.

Inicie a Paleta de Comandos e selecione “Configurar o executor de tarefas”. O Visual Studio Code fornecerá uma lista de ferramentas de compilação que ele suporta. Neste caso, selecionamos “Gole”, desde que é esse que nós estamos usando em nosso projeto neste artigo.

O código do Visual Studio agora deve ter criado um novo arquivo chamado tasks.json debaixo .vscode no seu diretório de projeto. tasks.json, neste ponto, contém configuração nua.

E como você pode ver abaixo, o tarefas propriedade em atualmente é apenas uma matriz vazia.

"versão": "0.1.0", "comando": "gulp", "isShellCommand": verdadeiro, "args": ["--no-cor"], "tarefas": []

Estender o tarefas valor da seguinte forma.

"versão": "0.1.0", "comando": "gulp", "isShellCommand": verdadeiro, "args": ["--no-color"], "tarefas": ["taskName": " padrão "," isBuildCommand ": true,]

o nome da tarefa especifica o nome da tarefa em nossa gulpfile.js que gostaríamos de correr. o isBuildCommand propriedade define o padrão comando como o “Construir” comando. Agora, ao invés de ir ao redor da paleta de comandos, você pode simplesmente pressionar a combinação de teclas Shift + Cmd + B.

Alternativamente, você pode selecionar o “Executar tarefa de compilação” do resultado da pesquisa de tarefas na paleta de comandos.

Empacotando

Eu acho que o Visual Studio Code é um editor de código com um ótimo futuro. É rápido e construído com alguns recursos úteis prontos para uso, incluindo um que mostramos neste artigo.

Vimos como executar uma tarefa do Gulp; você também pode usar o Grunt. Vimos como integrar a tarefa no Visual Studio Code e executar com uma combinação de teclas, o que torna nosso fluxo de trabalho mais simplificado.

Espero que você ache este artigo útil como uma referência para executar tarefas de compilação, e não se esqueça de verificar nossos artigos anteriores para obter mais dicas para aproveitar ao máximo o Visual Studio Code.

• Código Visual Studio: 5 características impressionantes que fazem dele um favorito
• Como personalizar o código do Visual Studio
• 8 poderosas extensões de código do Visual Studio para desenvolvedores front-end
• Código do Visual Studio: aumentando a produtividade via gerenciamento de vinculação de chave
• A influência do Microsoft Inclusive Design no Visual Studio Code