Hanselman faz a pergunta "Why client-side package managers for ASP.NET? Why not NuGet? Why not MSBuild?" (Por que gerenciados de pacotes do lado de cliente para o ASP.NET? Por que não NuGet? Por que não o MSBuild? - Tradução literal do autor do artigo)
E responde:
Some of you may ask, why not use NuGet for JavaScript? Why not extend MSBuild for building CSS/JS? Simple. Because there's already a rich ecosystem for this kind of thing. NuGet is great for server side libraries (and some client-side) but there are so many more CSS and JS libs on npm and bower. MSBuild is great for server-side builds but can be overkill when building a client-side app.
So, use both. These are tools in your toolkit. Adding support for Gulp, Grunt, Bower, npm (and other stuff, in the future if needed) means a more familiar environment for front-end devs doing ASP.NET and it opens the doors for ASP.NET devs to bring in the JS and CSS libraries communities use every day.
Alguns podem perguntar, por que não utilizar NuGet para JavaScript? Por que não estender MSBuild para criar CSS/JS? Simples. Porque já existe um ecossistema rico para este tipo de coisa. NuGet é ótimo para bibliotecas do lado do servidor (e para algumas do lado do cliente) mas há muito mais bibliotecas CSS e JS no npm e bower. MSBuild é ótima para compilação em lado de servidor, mas pode ser um exagero para compilar o lado cliente da aplicação.
Então, use as duas opções. Estas são ferramentas para o seu kit de ferramentas. Adicionar suporte para Gulp, Grunt, Bower, npm (e outras coisas, no futuro se necessário) significa um ambiente mais familiar para desenvolvedores de cliente ASP.NET e isto abrem as portas para desenvolvedores ASP.NET para trazerem experiência de bibliotecas JS e CSS que comunidades usam no dia a dia. (Tradução literal do autor do artigo)
SASS e LESS
Os dois principais pré-processadores para ajudar na escrita de CSS com produtividade. O artigo da Thaiana Poplade no tableless mostra um excelente exemplo de uso de SASS. Veja também um artigo em inglês comparando SASS e LESS.Minification of CSS/JS
Processo de remover todos os caracteres que não são necessários do código javascript. Isso diminui o tamanho dos recursos necessários para o cliente acessar seu site, o tornando mais leve e rápido.http://www.programmerinterview.com/index.php/javascript/what-is-javascript-minification/
https://developers.google.com/speed/docs/insights/MinifyResources
JSHint ou JSLint
Ferramentas que interpretam os códigos javascripts e buscam erros. Veja o excelente artigo escrito pelo Davi Ferreira caso queira saber mais detalhes. Outras documentações:http://jshint.com/install/
http://jshint.com/docs/
Grunt
Automação de tarefas relacionadas a minificação (Reduzir o tamanho de arquivos), compilação, testes unitário, "linting" (programa que analisa código procurando erros potenciais) e configuração de um gruntfile(Em formato JSON).Há vários plugins disponíveis:
http://gruntjs.com/plugins
https://www.npmjs.org/package/grunt
Post explorando Grunt:
http://blog.tomasjansson.com/asp-net-5-setting-up-frontend-build-with-grunt/
Gulp
Automação alternativa ao Grunt, que utiliza uma sintaxe JQuery Like.http://gulpjs.com/
https://www.npmjs.com/package/gulp
Bower
Ferramenta para gerenciar dependências de cliente do desenvolvimento web. Veja alguns links com mais informaçõeshttp://bower.io/
http://tableless.com.br/bower-na-pratica/
Outro link, referente à estratégia de pacotes no ASP.NET 5 (Que agora é o Asp.net Core 1.0):
http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/
Usufruindo das ferramentas
O que você precisa para usufruir dessas ferramentas (Seguindo dicas do artigo Using Grunt, Gulp and Bower in Visual Studio 2013 and 2015):- Para o VS 2013: Grunt Launcher
- Para o VS 2015: Web Essentials
Adicione o arquivo package.json à raiz da sua aplicação (Este arquivo será responsável por gerenciar os modulos NPM). Ao salva-lo as dependências são baixadas, o que também pode ser feito clicando com o botão direito no arquivo e escolhendo a opção "Restore Packages"
Adicione o arquivo bower.json à raiz da sua aplicação (Este arquivo será responsável por gerenciar os modulos NPM).
Todas as dependências podem ser buscada no bower.io/search e são automaticamente sugeridas pelo intellisense do visual studio:
Ao salvar o arquivo, as dependências do bower são baixadas.Veja os arquivos configurados no GitHub.
Para deixar o projeto baixando as dependências de maneira funcional são necessárias várias configurações, que não vou detalhar aqui. Caso queira ver um bom artigo em português, leia o artigo Visual Studio - Bower: Ferramentas modernas para desenvolvimento para a Web.
Outras referências:
http://blogs.msdn.com/b/cdndevs/archive/2015/02/17/using-bower-with-visual-studio-2013.aspx
