npm-bower-gulp

A Microsoft vem trabalhando desde 2014 no ASP.NET 5, uma versão completamente reformulada de sua plataforma para desenvolvimento Web. Atualmente na versão Beta 7 (Setembro/2015), o ASP.NET 5 introduziu mudanças bastante significativas em relação ao modo como aplicações Web vinham até então sendo construídas.

Uma destas novidades está na maneira como pacotes client-side são gerenciados em uma solução Web. A adição de bibliotecas JavaScript ou, mesmo, arquivos CSS acontecia geralmente de duas formas:

  • A partir do utilitário NuGet, a conhecida ferramenta para busca e gerenciamento de pacotes em aplicações .NET;
  • Através da adição direta de arquivos CSS e de scripts a um projeto.

Independente da alternativa escolhida, o trabalho de atualização destes pacotes sempre exigiria algum tipo de esforço manual por parte dos desenvolvedores. A grande popularidade de frameworks baseados como AngularJS e Node.js contribuiu para que inúmeras soluções auxiliares fossem criadas, normalmente com o intuito de simplificar a manipulação de arquivos de script e folhas de estilo CSS. A Microsoft não ficou alheia a essas tendências, tendo incorporado a projetos criados em ASP.NET 5 o suporte às seguintes ferramentas:

  • Bower: gerenciador empregado na instalação e restauração de pacotes client-side (arquivos CSS e de scripts);
  • Gulp: permite a automação de tarefas envolvendo manipulação de pacotes client-side, por meio de arquivos de instruções com uma sintaxe baseada em JavaScript;
  • npm (Node Package Manager): ambiente no qual outras ferramentas como Bower e Gulp serão executadas.

OBSERVAÇÃO: em versões anteriores do ASP.NET 5 a automação de tarefas acontecia a partir da ferramenta Grunt, ao invés do uso das funcionalidades oferecidas pelo Gulp.

Existe atualmente todo um processo de build envolvendo a manipulação de scripts a partir destas soluções, com o mesmo contemplando tarefas como:

  • Bundling, que consiste na combinação de arquivos em uma simples unidade, de forma a minimizar a quantidade de requisições HTTP enviadas ao servidor;
  • Minification, que é a eliminação em tempo de execução de itens desnecessários (espaços, comentários) em arquivos CSS e de scripts;
  • A determinação de qual versão de um pacote client-server será utilizada;
  • A possibilidade de uso de ferramentas para verificação automática de código JavaScript (como JSHint e JSLint);
  • O uso de pré-processadores como LESS e SASS, os quais viabilizam a utilização de variáveis, funções e mixins (agrupamentos de propriedades) em folhas de estilo;

O objetivo deste artigo é apresentar a utilização do Bower, Gulp e npm no gerenciamento de pacotes client-side em aplicações ASP.NET 5. Tal integração será demonstrada a partir de um exemplo detalhado na próxima seção.

Exemplo de utilização em uma aplicação MVC 6

A solução a ser criada para testes fará uso dos seguintes recursos:

  • O Microsoft Visual Studio Community 2015 como IDE de desenvolvimento;
  • O .NET Framework 4.6;
  • A versão Beta 7 do ASP.NET 5 para a criação de uma aplicação MVC 6.

Um projeto do tipo “ASP.NET Web Aplication” será gerado, tendo por nome “TesteASPNET5Scripts” (Imagem 1). Ao se confirmar este primeiro passo, selecionar na sequência em “ASP.NET 5 Preview Templates” a opção “Web Application” (Imagem 2).

aspnet5-gulp-01
Imagem 1: Criando uma ASP.NET Web Application no Visual Studio 2015

aspnet5-gulp-02
Imagem 2: Selecionando o template Web Application no Visual Studio 2015

Na Imagem 3 está a estrutura gerada para o projeto TesteASPNET5Scripts, em que é possível notar a presença dos seguintes itens:

  • O arquivo bower.json, em que estão indicadas as dependências de pacotes client-side a serem manipuladas através da ferramenta Bower;
  • O arquivo gulpfile.js, contendo instruções JavaScript que definem as tarefas a serem processadas pela ferramenta Gulp;
  • O arquivo package.json, no qual devem ser declarados os packages manipulados a partir do npm (basicamente, os pacotes necessários para a execução do utilitário Gulp).

aspnet5-gulp-03
Imagem 3: Estrutura do projeto TesteASPNET5Scripts

A fim de demonstrar a integração existente entre as ferramentas Bower, Gulp e npm será alterado o arquivo bower.json, de forma a incluir no mesmo uma referência para o framework AngularJS:

  • Como indicado na Imagem 4, o próprio IntelliSense lista os pacotes disponíveis para uso em conjunto com o Bower;
  • Além do identificador do pacote, será necessário especificar ainda a versão deste utilizada pela aplicação de exemplo.

aspnet5-gulp-04
Imagem 4: Adicionando o framework AngularJS ao projeto TesteASPNET5Scripts

Ao salvar as alterações realizadas no arquivo bower.json, será possível observar que o framework AngularJS foi devidamente incluído no projeto de testes (Imagem 5).

aspnet5-gulp-05
Imagem 5: Framework AngularJS já adicionado ao projeto TesteASPNET5Scripts

Conclusão

A possibilidade de integração com ferramentas como Bower, Gulp e npm mostra a preocupação da Microsoft em seguir as principais tendências dentro do desenvolvimento Web, assim como possibilitar uma maior produtividade na implementação de projetos em ASP.NET. Muito embora o Visual Studio automatize todo o trabalho envolvendo o uso das 3 soluções citadas, um bom conhecimento acerca das mesmas possibilitará a desenvolvedores otimizar ainda mais a forma como pacotes client-side são gerenciados.

Espero que este conteúdo possa ter sido útil.

Até uma próxima oportunidade!

Referências

ASP.NET 5 Documentation
http://docs.asp.net/en/latest/

ASP.NET 5 Schedule and Roadmap
https://github.com/aspnet/Home/wiki/Roadmap

Bower
http://bower.io/

Gulp.js
http://gulpjs.com/

Microsoft ASP.NET and Web Tools 2015 (Beta7) – Visual Studio 2015
https://www.microsoft.com/en-us/download/details.aspx?id=48738

npm
https://www.npmjs.com/

Renato Groffe

Atua como consultor em atividades voltadas ao desenvolvimento de softwares há mais de 13 anos. Bacharel em Sistemas de Informação, com especialização em Engenharia de Software. Microsoft Certified Technology Specialist (Web, WCF, Distributed Applications, ADO.NET, Windows Forms), Microsoft Specialist (HTML5 with JavaScript and CSS3, Developing ASP.NET MVC 4 Web Applications), Oracle Certified Associate (PL/SQL), Sun Certified (SCJP, SCWCD), ITIL Foundation V2, Cobit 4.1 Foundation.

Facebook Google+ 

Comentários

comentarios