Utilizando Gulp e NPM em projetos Asp.Net

Automatizar tarefas é uma realidade constantemente presente no dia-a-dia. Não poderia ser diferente na vida de um desenvolvedor, onde o conceito “tempo é dinheiro” é levado muito a sério e, automatizar pequenas ou grandes coisas pode gerar bons resultados.

Neste contexto, apresenta-se o seguinte cenário:

Em um projeto Asp.Net Core MVC, por exemplo, utiliza-se linguagens e ferramentas de front-end e, continuamente, é necessário baixar novos pacotes para integrar no projeto. Com isso, surge o seguinte desafio:

Como minificar e juntar os arquivos (javascript e css) de pacotes baixados e colocá-los visível para utilização dentro do projeto .net?

Para solucionar tal questão, utiliza-se o Gulp e o NPM. Antes de explicar como utilizá-los, primeiramente necessita-se conhecê-los um pouco melhor.

É um automatizador de tarefas. O que é uma ferramenta que tem o objetivo de ajudar programadores a realizar tarefas repetitivas mas essenciais para o desenvolvimento com, por exemplo, concatenar e minificar arquivos. Assim como o Gulp, existem outras ferramentas como o Webpack e Grunt, também bastante utilizados.

É um gerenciador de pacotes javascript. Onde, simplesmente, realiza a função de baixar e instalar módulos, cuidando das depências, além de ser responsável pelas atualizações dos mesmos. Seria algo semelhante ao Nuget Package, utilizado em projetos .Net.

Tendo conhecimento das duas ferramentas que serão utilizadas, inicia-se as instruções de como utilizá-las, de maneira correta, dentro do projeto.

Hands-on

Tendo um projeto, do tipo Asp.Net MVC, já criado. Realiza-se os seguintes passos:

1 — Na raiz do projeto Web crie um arquivo, do tipo “npm configuration file”, com nome “package.json”.

Arquivo package.json criado

Ao criar o arquivo, o mesmo apresentará, por default, a seguinte estrutura:

Estrutura inicial do arquivo package.json

2 — Instalar a extensão do NPM para o Visual Studio, através do link

3 — Clique com o botão direito no projeto e selecione a opção “Quick Install Package”

4 — Selecione a opção NPM

5 — Escreva “Gulp” (pacote) e selecione a última versão para ser instalada

6 — Quando finalizar a instalação, o arquivo “package.json” será atualizado, colocando o “Gulp” como depêndencia.

7 — Será criado um arquivo referente ao “Gulp” chamado “gulpfile.js”, onde conterá os códigos para automatização

7 — Após finalizar a instalação do pacote, será criado uma pasta de nome “node_modules” contendo todo o conteúdo referente ao módulo instalado.

8 — No caso, vamos criar uma automatização para quando realizar o “Build” do projeto irá minificar e concatenar os arquivos referentes aos pacotes “bootstrap” e “jquery”. Além disso, como os arquivos de CSS e JS ficam visíveis dentro da pasta Scripts (em .Net FullFramework) ou wwwroot (em .Net Core), cria-se um script para copiar os arquivos para algum desses locais.

9 — Por fim, necessita-se alterar o arquivo .csproj referente ao projeto

10 — A cada Build, os scripts feitos para o Gulp serão executados.

Vê-se um pequeno ganho de tempo, pois elimina a tarefa manual de um desenvolvedor de sempre estar fazendo isso. Além disso, elimina erro humano como esquecimento de copiar os arquivos para o local certo, garantindo mais performance e foco para o desenvolvimento e a qualidade e funcionamento do projeto.

Bachelor in Computer Science, MBA in Software Architecture and .NET Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store