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.

Gulp

NPM

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

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.

Conclusão

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

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