Gulp no Visual Studio
Configurando Gulp para minificação de arquivos
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ê.
Show... Gulp é muito bom! importante para muitas coisas não só pra minificação...!!!