in ASP.NET

Visual Studio 2015: integração nativa com npm, Grunt e Bower

Ontem foi disponibilizado para download a nova versão do Visual Studio 2015 Preview, existem diversas novidades incríveis como: .NET Open Source, CrossPlataform e Visual Studio Community. Além de isto ser uma revolução no ecossistema de desenvolvimento web, o time responsável pelas “web tools” do Visual Studio também fez um excelente movimento, trazendo nativamente a integração com as ferramentas padrões de mercado para desenvolvimento web/frontend. A idéia deste post é mostrar um pouco como ficaram estas features, e se você é um desenvolvedor web, e ainda não conhece o npm (Node Package Manager), Grunt e Bower, corra atrás para aprender como elas funcionam, pois estas tecnologias já são o presente do mercado de desenvolvimento web.

Ferramentas envolvidas

image

  • node.js: plataforma JavaScript construída sobre o runtime do Chrome, tem como objetivo o rápido desenvolvimento, performance e escalabilidade.
  • npm (Node Package Manager): o npm é um gerenciado de pacotes, que utiliza o node.js como plataforma para execução, tanto o Bower quanto o Grunt utilizam ele para gerenciar os pacotes que eles instalarão
  • Bower: gerenciador de pacotes para web/frontend, como bibliotecas js e css, notem que o projeto default do ASP.NET MVC 6 deixará de utilizar o NuGet package para pacotes de frontend (jquery por exemplo)
  • Grunt: task runner baseado em JavaScript, é utilizado para automatizar rotinas como geração de .min e outras automatizações (também é possível utilizar o Gump)

 

Motivos

Integrar o Visual Studio com estas diversas ferramentas de terceiros traz diversos benefícios como: facilitar o desenvolvimento e gerenciamento de bibliotecas clientside (angular, jquery, etc), automatizar tarefas como compilação de LESS e minimificação de arquivos. Além disto, deixa o Visual Studio integrado com um ecossistema extremamente poderoso e desenvolvido, o da comunidade de desenvolvimento web.

Como ficou?

Para este exemplo eu criei uma maquina virtual no Azure com a imagem do Visual Studio 2015 Preview.

image

Vou abrir o Visual Studio Ultimate 2015 Preview e criar um projeto do tipo ASP.NET 5 Starter Web

image

Esta opção cria um projeto default com ASP.NET MVC 6, notem que a estrutura básica do projeto mudou:

image

 

wwwroot e arquivos estáticos

No template novo, os arquivos estáticos e os conteúdos dos pacotes instalados via Bower são colocados em uma pasta wwwroot, nossos arquivos de códigos C# e outras coisas devem ficar longe desta pasta 🙂

A pasta default pode ser configurada arquivo project.json

image

Arquivos de configuração

Neste projeto temos a estrutura nova de arquivos de configuração:

  • project.json: arquivo principal do projeto, algumas configurações e NuGet package estão nele.
  • package.json: lista os packages via npm.
  • bower.json: lista os packages do Bower.
  • gruntfile.js: configurações das tasks do Grunt.

Bower

Para adicionar um package via Bower é só editar o arquivo bower.json, notem que existe intelisense para os packages disponíveis e suas versões \o/

image

Ao salvar o arquivo a dependência já aparece no Solution Explorer do Visual Studio, ela pode ser restaurada na opção restore, ou com uma task automatizada no Grunt.

image

Grunt

Para utilizar o Grunt é possível realizar diversas configurações de tarefas no grunt.js

image

Também é possível utilizar o Task Runner Explorer e por exemplo configurar o binding de cada Task que está no Grunt.

image

 

Removida a necessidade de incluir arquivos no projeto

Nas outras versões, para criar um arquivo, era necessário adicionar a referencia do mesmo no arquivo xml do projeto, isto não é necessário mais, no exemplo abaixo eu criei um .cs via Windows Explorer e ele apareceu no meu projeto, sem a necessidade de incluir.

image

Bom espero que este post te deixe com vontade de conhecer mais sobre estas novidades, acredito nos próximos meses teremos muitas mudanças no mercado de desenvolvimento web.

Estou a disposição para dúvidas, criticas e sugestões.

abs

Rodolfo

  • Heber Ortiz

    E aí Rodolfo, beleza? Essas integrações ficaram animais. A partir dessa versão do VS muita coisa mudou e para melhor. Sem contar o .Net opensource. Bom, uma dúvida que não está necessariamente associada a este post. É possível usar o VS 2015 side-by-side com o VS 2013? E mais: você teria “culhões” para já usar o VS 2015 em projetos que estão no 2013.
    Grande abraço cara!

  • http://www.rodolfofadino.com.br/ Rodolfo Fadino

    Eu estava usando uma versão antes desta do 2015 (side by side) mais algumas coisas do outro site 2013 pararam de funcionar, ainda não utilizaria em “produção” a não ser que estivesse com tempo para reinstalar tudo se precisasse 😛