Gulp no Visual Studio

Criando um Workflow no Visual Studio com Gulp

Meu nome é Mario, sou Dev front-end e tive um desafio recentemente, e gostaria de compartilhar minha experiência. Meu foco aqui não é ensinar como utilizar o Gulp e nem o VS, pois há vários que já fizeram, principalmente a microsoft.
Precisava criar um script para minimizar css, javascript e otimizar imagens, em um sistema legado, versionado através do visual studio, logo pensei no Gulp.
O Gulp (http://gulpjs.com/) é um ‘task runner’ que utiliza o node.js (https://nodejs.org/en/) e npm (https://www.npmjs.com/).
O problema, para min, era o Visual studio, até então não tinha usado, estava acostumado com Sublime e sistemas linux, e aqui deixo uma dica de tentar criar isso tudo com o terminal.
Para minha “sorte” desde 2015 o visual studio, através do nuget, aderiu ao npm e node.
Instalação no visual studio 
(pensativo, refletindo sobre o visual studio)
 
Antes de criar o script vamos instalar o node, Gulp e npm no VS:
Em ‘tools’ selecione ‘Manage NuGet Packages for Solution...’ 
 

(print da tela - usando o NuGet)
 
 Na aba “Browse” procure e instale o node, depois o Gulp. Ao instalar o Gulp, verifique na janela que abre, para confirmar a instalação, se veio junto o npm, assim não precisa instalar o npm novamente.
 

(usando o nuGet)
  
Npm init package.json
 
Após a instalação do Node, Gulp e npm sua solução está pronta para iniciar as configurações.
Na raiz do projeto adicione um novo arquivo ‘npm configuration file’ e nomeie como ‘package.json’, ele o ponto de partida de qualquer projeto NodeJS. Ele é responsável por descrever o seu projeto, informar as engines (versão do node e do npm), url do repositório, versão do projeto, dependências de produção e de desenvolvimento dentre outras coisas.
 
 (add novo arquivo)
 
No arquivo package.json, em dependências, ao abrir uma aspa ” ” o intellSense do VS, irá sugerir, assim que começar a screver, portanto, pesquisei antes qual plugin iria adicionar na minha dependência. Há várias opções em https://www.npmjs.com/ (ex: pesquise por gulp image);

  
Ao salvar o arquivo package.json aparece no rodapé 2 setas e movendo, é sinal que o plugin está sendo instalado na pasta “node_modules”; não se assuste com esta pasta, ela não precisa de deploy ;) , ela faz parte somente do desenvolvimento. (instalação dos plugins)
  
GulpFile.js
 
Adicionando um novo arquivo, ainda na raiz do projeto, renomeie como gulpfile.js. É aqui que adiciono os plugins e crio as tasks que, após uma pesquisa e testes, preciso para otimizar imagens, minimizar js e css.
 
  
 
O legal do VS é a aba ‘task runner’, para abrir, click com o botão direito encima do arquivo ‘gulpfile.js’ e selecionar ‘task runner explorer’, ele abre na barra inferior.
Neste gerenciador de tarefas você pode escolher, qual task rodar, antes ou depois do build.

Bom pessoal é isso, espero que tenham gostado deste simples texto.
Dúvidas, críticas e comentários, sintam-se a vontade.
Forte abraço, Namastê.