Gerenciando bibliotecas de scripts no Visual Studio 2015

O advento de frameworks baseados em JavaScript como AngularJS, Node.js e Knockout tem transformado a forma como aplica��es Web s�o constru�das. O desenvolvimento de solu��es client-side sofisticadas � uma tend�ncia crescente, sendo que este tipo de atividade tem priorizado quest�es como responsividade, produtividade e facilidade de manuten��o.

Considerando especificamente o quesito produtividade, diversas ferramentas foram concebidas por desenvolvedores e comunidades com o intuito de simplificar a manipula��o de arquivos de script e folhas de estilo CSS. A utiliza��o de tais recursos vem aumentando significativamente dentro da programa��o client-side, com in�meras op��es gratuitas agilizando o processo de implementa��o de aplica��es.

N�o deixe de conferir o Checklist Programador .NET. A forma mais f�cil de se tornar um expert em .NET.

Ao inv�s de se restringir � simples c�pia de arquivos, algumas destas solu��es foram bem al�m. Existe hoje todo um processo de build envolvendo scripts e arquivos CSS, sendo que o mesmo engloba tarefas como:

Bundling: consiste na combina��o de v�rios arquivos em uma simples unidade (no caso um novo arquivo gerado dinamicamente). Como consequ�ncia direta deste procedimento ocorrer� uma diminui��o da quantidade de requisi��es HTTP utilizadas na obten��o das diferentes partes que formam o conte�do de um documento HTML (geralmente arquivos CSS e de scripts), com um consider�vel aumento na performance de carregamento de uma p�gina que empregue tal t�cnica;
Minification: pr�tica que envolve a elimina��o em tempo de execu��o de itens desnecess�rios como espa�os e coment�rios em arquivos CSS ou de scripts, tamb�m contribuindo para uma maior performance no carregamento de formul�rios HTML;
Determinar qual vers�o de uma biblioteca de scripts ser� utilizada: permite configurar o build de uma aplica��o Web para que seja usado o release est�vel mais recente para um plugin jQuery, com o download autom�tico dos arquivos necess�rios por exemplo;
A possibilidade de execu��o autom�tica de ferramentas para verifica��o de c�digo JavaScript, tais como JSHint e JSLint;
O uso de pr�-processadores de CSS como LESS e SASS, mecanismos estes que viabilizam a utiliza��o de vari�veis, fun��es e mixins (agrupamentos de propriedades) em folhas de estilo.

Dentre as ferramentas mais populares na atualidade para a manipula��o de arquivos de scripts e CSS, � poss�vel destacar:

O Bower, gerenciador empregado na instala��o e restaura��o de pacotes client-side (arquivos CSS e de scripts);
Os task runners Grunt e Gulp. Ambos fazem uso de arquivos de configura��o com uma sintaxe baseada em JavaScript, sendo utilizados na automa��o de tarefas envolvendo a manipula��o de scripts e CSS;
O npm (sigla de �Node Package Manager�). Embora seja um gerenciador de pacotes concebido inicialmente para a plataforma Node.js, esta ferramenta representa o ambiente a partir do qual outras solu��es como Bower, Grunt e Gulp s�o executadas.

Algumas das funcionalidades aqui citadas foram incorporadas de forma nativa ao framework ASP.NET MVC 4, tais como Bundling, Minification e meios para determinar qual vers�o de uma biblioteca de scripts espec�fica ser� utilizada (n�o existia por�m uma funcionalidade para download autom�tico dos arquivos correspondentes). H� casos inclusive em que bibliotecas de script poderiam ser baixadas e incorporadas a um projeto a partir do pr�prio utilit�rio NuGet.
Como n�o � dif�cil imaginar, a Microsoft observou com aten��o a toda esta movimenta��o que vem acontecendo no desenvolvimento front-end. O Visual Studio 2013 conta com extens�es que tornam poss�vel o uso das ferramentas Bower, Grunt e npm, de maneira a facilitar o gerenciamento de recursos client-side em aplica��es ASP.NET. J� no Visual Studio 2015 Preview este suporte � nativo, com a IDE incorporando estas solu��es open source no controle de arquivos CSS e de scripts.

O objeto deste artigo � a utiliza��o conjunta do Bower, Grunt e npm na manipula��o de bibliotecas de scripts a partir do Visual Studio 2015, apresentando para isto um exemplo que ser� detalhado na pr�xima se��o. Importante frisar que o mecanismo de Bundling existente em vers�es anteriores n�o est� mais dispon�vel com o lan�amento do ASP.NET 5 e do ASP.NET MVC 6, dada a capacidade das ferramentas de automa��o mencionadas em substituir plenamente as funcionalidades oferecidas originalmente.

Exemplo envolvendo o gerenciamento de scripts no Visual Studio 2015

Para implementar a solu��o demonstrada nesta se��o foram utilizados os seguintes recursos:

O Microsoft Visual Studio Ultimate 2015 Preview como IDE de desenvolvimento;
O .NET Framework 4.5.3;
O framework ASP.NET 5 para a cria��o de uma Web Application;
O plugin autoNumeric;
As ferramentas Bower, npm e Grunt integradas ao Visual Studio.

O projeto TesteVS2015Scripts ser� do tipo �ASP.NET Web Application� (Figura 1), sendo gerado a partir da sele��o do template �ASP.NET 5 Starter Web� (Figura 2). Nesta aplica��o MVC um usu�rio poder� informar seu peso e altura, com estes dados servindo de base para o c�lculo de seu IMC (�ndice de Massa Corp�rea).

A inten��o com este exemplo � detalhar de que forma acontece o gerenciamento de scripts no Visual Studio 2015, empregando para tanto os utilit�rios de automa��o aqui discutidos (Bower, npm e Grunt). Atrav�s destas ferramentas a biblioteca autoNumeric ser� incorporada ao projeto TesteVS2015Scripts, sem que isto implique na necessidade de uso do NuGet ou, mesmo, no download manual do plugin e posterior inclus�o do mesmo na solu��o.

Criando a aplica��o
de testes no Visual Studio 2015

Figura 1. Criando a aplica��o de testes no Visual Studio 2015

Selecionando o
template para a cria��o da aplica��o ASP.NET 5

Figura 2. Selecionando o template para a cria��o da aplica��o ASP.NET 5

Analisando a estrutura do projeto criado via Solution Explorer (Figura 3), � poss�vel observar a presen�a dos seguintes elementos:

A pasta wwwroot, em que constar�o itens est�ticos como documentos HTML, arquivos de scripts e folhas de estilo CSS dos quais a aplica��o depende. Arquivos gerados atrav�s de processos como bundling, minification ou a partir de pr�-processadores como LESS e SASS tamb�m ser�o transferidos para este local;
O item Dependencies, no qual est�o declaradas as depend�ncias manipuladas atrav�s das ferramentas Bower (pacotes client-side utilizados pelo projeto) e NPM (packages utilizados na execu��o do Grunt como task runner);
O item References, que engloba os pacotes .NET usados pela aplica��o e que s�o manipulados a partir do utilit�rio NuGet;
Pastas como �Controllers�, �Models� e �Views�, estruturas t�picas de uma aplica��o MVC;
O arquivo config.json, que cont�m configura��es diversas e substitui o Web.config presente em projetos criados em vers�es anteriores do ASP.NET;
O arquivo project.json, no qual est�o defini��es e configura��es gerais de uma aplica��o (como pacotes do NuGet). Este documento substitui os arquivos com extens�o .csproj (no caso de uma aplica��o baseada no uso de C#);
O arquivo bower.json, em que est�o declaradas as depend�ncias de pacotes client-side manipuladas por meio da ferramenta Bower;
O arquivo package.json, no qual devem ser indicados os packages manipulados a partir do npm (basicamente, os pacotes necess�rios para a execu��o do utilit�rio Grunt);
O arquivo gruntfile.js, em que instru��es JavaScript definem as tarefas a serem executas pela ferramenta Grunt.

Estrutura do
projeto TesteVS2015Scripts

Figura 3. Estrutura do projeto TesteVS2015Scripts

Para incorporar a biblioteca autoNumeric ao projeto ser� necess�rio, primeiramente, alterar o arquivo bower.json de maneira que no mesmo conste o pacote correspondente. A execu��o do Bower ser� poss�vel gra�as a tarefas configuradas para processamento via Grunt, al�m da utiliza��o desta �ltima ferramenta estar atrelada ao npm.

Na Listagem 1 est� o conte�do do arquivo package.json, com os pacotes que ser�o gerenciados via npm.

Listagem 1. Arquivo package.json


    {
        "version": "0.0.0",
        "name": "TesteVS2015Scripts",
        "devDependencies": {
            "grunt": "^0.4.5",
            "grunt-bower-task": "^0.4.0"
        }
    }

J� as instru��es que definem o arquivo gruntfile.js encontram-se na Listagem 2. Dentre as a��es a serem executadas est� a instala��o do Bower, al�m do carregamento de scripts que ser�o obtidos a partir desta ferramenta. Nas configura��es para uso do utilit�rio Bower tamb�m est� o diret�rio para onde ser�o copiados os pacotes de scripts da aplica��o (wwwroot/lib).

Listagem 2. Arquivo gruntfile.json


    module.exports = function  (grunt) {
         grunt.initConfig({
             bower: {
                 install: {
                     options: {
                        targetDir: "wwwroot/lib",
                        layout: "byComponent",
                        cleanTargetDir: false
                     }
                 }
            }
        });
     
        grunt.registerTask("default", ["bower:install"]);
        grunt.loadNpmTasks("grunt-bower-task");
    };

OBSERVA��O: O c�digo dos arquivos package.json, gruntfile.js e bower.json � gerado automaticamente durante a cria��o de um projeto ASP.NET 5.

A inclus�o de novos packages no arquivo bower.json � facilitada gra�as ao suporte oferecido pelo IntelliSense. Acessando informa��es de um reposit�rio que cont�m os plugins suportados pelo Bower este recurso ir� listar os diversos pacotes dispon�veis, bem como as vers�es mais recentes dos mesmos (como indicado na Figura 4). Este mesmo tipo de funcionalidade existe para a edi��o do arquivo package.json, o qual cont�m as configura��es a serem definidas para o utilit�rio npm.

Na se��o exportsOverride do arquivo bower.json ser� necess�rio listar ainda quais arquivos do plugin autoNumeric ser�o carregados dentro da pasta wwwroot (no caso espec�fico desta biblioteca, apenas o script autoNumeric.js). Na Listagem 3 encontram-se todas as mudan�as realizadas em bower.json; outras depend�ncias como o Bootstrap e jQuery j� haviam sido registradas anteriormente, durante a cria��o do projeto TesteVS2015Scripts.

Utilizando o
IntelliSense durante a edi��o do arquivo bower.json

Figura 4. Utilizando o IntelliSense durante a edi��o do arquivo bower.json

Listagem 3. Arquivo bower.json


    {
        "name":  "TesteVS2015Scripts",
        "private":  true,
        "dependencies":  {
            "bootstrap": "~3.0.0",
            "jquery": "~1.10.2",
            "jquery-validation": "~1.11.1",
            "jquery-validation-unobtrusive": "~3.2.2",
            "autoNumeric": "~1.9.26"
        },
        "exportsOverride": {
            "bootstrap": {
                "js": "dist/js/*.*",
                "css": "dist/css/*.*",
                "fonts": "dist/fonts/*.*"
            },
            "jquery": {
                "js": "jquery.{js,min.js,min.map}"
            },
            "jquery-validation": {
                "": "jquery.validate.js"
            },
            "jquery-validation-unobtrusive": {
                "": "jquery.validate.unobtrusive.{js,min.js}"
            },
            "autoNumeric": {
                "js": "autoNumeric.js"
            }
        }
    }

OBSERVA��O: as vers�es de pacotes manipulados atrav�s do utilit�rio Bower seguem um conceito conhecido como versionamento sem�ntico (em ingl�s �semantic versioning�), com tr�s se��es que se dividem em major version, minor version e patch (cada uma destas partes � separada por um ponto). O uso do s�mbolo �^� (circunflexo) antes de um n�mero de vers�o (como em �^1.10�) � uma instru��o para se utilizar um release que corresponda no m�nimo � minor version especificada, al�m da obrigatoriedade de se coincidir com o valor da major version. J� o uso do s�mbolo �~� (til) como em �~1.10.2� determina a utiliza��o de qualquer patch igual ou superior a 2 (considerando as vers�es 1.10 de uma biblioteca). A indica��o de um valor como �1.10.2� sem nenhum s�mbolo precedente representa o uso espec�fico de uma vers�o (desconsiderando assim futuros releases).

Verificando a estrutura do projeto TesteVS2015Scripts dentro do Solution Explorer, ser� poss�vel constatar que o plugin autoNumeric ainda n�o foi instalado (Figura 5). A fim de realizar este procedimento, acionar com o bot�o direito do mouse o item �Bower� em �Dependencies� e selecionar a op��o �Restore Packages� (Figura 6).

Plugin autoNumeric
ainda n�o instalado

Figura 5. Plugin autoNumeric ainda n�o instalado

Figura 6. Instalando o plugin autoNumeric atrav�s do Bower

Na janela �Output� aparecer�o ent�o as diversas a��es executadas pela ferramenta Bower, de forma a incorporar a biblioteca autoNumeric a esta aplica��o de exemplo (Figura 7). Analisando novamente a estrutura do projeto TesteVS2015Scripts, j� ser� poss�vel constatar que o plugin autoNumeric foi corretamente instalado (Figura 8).

Instalando o plugin
autoNumeric atrav�s do Bower

Figura 7. Instalando o plugin autoNumeric atrav�s do Bower

Figura 8. Plugin autoNumeric j� instalado

Os scripts dos quais uma aplica��o depende tamb�m podem ser atualizados ou, mesmo, restaurados a partir da funcionalidade Task Runner Explorer. Para visualizar a janela correspondente clicar com o bot�o direito do mouse sobre o arquivo gruntfile.js, acionando em seguida a op��o �Task Runner Explorer� (Figura 9). Este recurso tamb�m pode ser acessado a partir do menu View > Other Windows > Task Runner Explorer.

Figura 9. Acessando o Task Runner Explorer

Com a janela �Task Runner Explorer� ativa, clicar desta vez com o bot�o direito mouse sobre o item �bower� e selecionar a op��o Run (Figura 10). As tarefas configuradas para a ferramenta Bower ser�o ent�o executadas (com base nas instru��es definidas no arquivo gruntfile.js), com um prompt exibindo o resultado deste processo (Figura 11).

Restaurando packages via Task Runner Explorer

Figura 10. Restaurando packages via Task Runner Explorer

Resultado da
execu��o de uma tarefa no Task Runner Explorer

Figura 11. Resultado da execu��o de uma tarefa no Task Runner Explorer

� poss�vel ainda vincular a execu��o de tarefas especificadas no arquivo gruntfile.js a eventos que aconte�am na IDE do Visual Studio. Uma possibilidade seria executar a restaura��o de pacotes do Bower antes do build do projeto TesteVS2015Scripts: para que isto aconte�a acionar a task �bower� com o bot�o direito do mouse, selecionando em seguida a op��o �Bindings� e, por �ltimo, o item �Before Build� (Figura 12).

A realiza��o deste procedimento far� com que a cada novo build os diversos pacotes configurados em bower.json sejam restaurados/atualizados. Este tipo de comportamento � extremamente �til quando da utiliza��o de pr�-processadores como LESS e SASS, uma vez que permitir� a gera��o dos arquivos CSS no formato esperado para o deployment de uma aplica��o.

Atrelando a
execu��o de uma tarefa a um evento da IDE

Figura 12. Atrelando a execu��o de uma tarefa a um evento da IDE

Como �ltimo passo ser� necess�rio alterar a View Index.cshtml, de forma a implementar a funcionalidade para c�lculo do IMC. Conforme mencionado anteriormente, ser�o criados campos para preenchimento do peso e altura utilizando m�scaras geradas pelo plugin autoNumeric.

Na Listagem 4 est� o c�digo referente � View Index.cshtml, sendo poss�vel notar no mesmo:

Dois campos de texto (�peso� e �altura�) nos quais um usu�rio dever� informar os dados para o c�lculo do IMC;
Uma section chamada �scripts�, em que constar� o c�digo respons�vel por calcular o IMC para uma determinada pessoa;
O c�digo da section �scripts� inicia com uma refer�ncia para a biblioteca autoNumeric (que est� localizada em wwwroot\lib\autoNumeric\js);
A fun��o calcularIMC ir� validar os campos de entrada, de forma a tornar obrigat�rio o preenchimento dos mesmos. Se o peso e a altura forem v�lidos, acontecer� o c�lculo do IMC e o arredondamento deste valor para 2 casas decimais. Ser� verificado ainda em que faixa este �ndice se encontra, a fim de determinar situa��es de peso normal, sobrepeso ou ainda, peso abaixo do limite toler�vel. Por fim, uma mensagem ser� exibida com o valor do IMC e o status decorrente deste indicador;
J� no m�todo ready o plugin autoNumeric ser� acionado duas vezes, com o objetivo de criar a m�scara de entrada para os campos de peso e altura.

Listagem 4. View Index.csthml


    <div class="jumbotron">
        <h1>ASP.NET 5</h1>
        <p class="lead">
             Exemplo de aplica��o MVC baseada no ASP.NET 5.
        </p>
        <p>
            <a href="http://asp.net/vnext"
                class="btn btn-primary  btn-lg">Saiba mais �</a>
        </p>
    </div>
     
    <h2>
        Teste  envolvendo o uso das ferramentas
         Bower, Grunt e nmp.
    </h2>
     
    <div style="padding: 20px;">
        <p class="lead">
             Peso (kg):
            <input id="peso" class="form-control  text-right" />
        </p>
        <p class="lead">
             Altura (m):
            <input id="altura" class="form-control  text-right" />
        </p>
        <a class="btn  btn-primary btn-lg"
           onclick="calcularIMC();">Calcular  IMC �</a>
    </div>
     
    @section scripts{
     
        <script type="text/javascript"
                 src="~/lib/autoNumeric/js/autoNumeric.js"></script>
     
        <script type="text/javascript">
     
            function  calcularIMC() {
                 var peso = $("#peso").val().replace(",", ".");
                 if (peso == "") {
                     alert("Informe um valor para o Peso!");
                     return;
                 }
     
                 var  altura = $("#altura").val().replace(",", ".");
                 if (altura == "") {
                     alert("Informe um valor para a Altura!");
                     return;
                 }
     
                 var IMC = peso / (altura * altura);
                 IMC = Math.round(IMC * 100) / 100;
     
                 var status;
                 if (IMC < 18.5)
                     status = "Abaixo do Peso Ideal";
                 else if  (IMC > 25)
                     status = "Acima do Peso Ideal";
                 else
                     status = "Peso Normal";
     
                 alert("Valor do IMC: " + IMC + "\n\n" +
                      "Status:  " + status);
            }
     
             $(document).ready(function () {
                 $("#peso").autoNumeric({
                     aSep: '',
                     aDec: ',',
                     mDec: '1',
                     vMin: '0.1',
                     vMax: '1000.0'
                 });
     
                 $("#altura").autoNumeric({
                     aSep: '',
                     aDec: ',',
                     mDec: '2',
                     vMin: '0.01',
                     vMax: '9.99'
                 });
             });
     
        </script>
    }

Teste da aplica��o criada

Na Figura 13 � apresentada a tela inicial da aplica��o TesteVS2015Scripts.

Tela
inicial da aplica��o TesteVS2015Scripts

Figura 13. Tela inicial da aplica��o TesteVS2015Scripts

Uma vez informados o peso e a altura, acionar a op��o �Calcular IMC�. Ser� exibida ent�o uma janela com o resultado, como indicado na Figura 14.

Figura 14. Mensagem exibida ap�s o c�lculo do IMC

O objetivo deste artigo foi demonstrar as principais mudan�as envolvendo o uso de recursos client-side no Visual Studio 2015 e no ASP.NET 5. Ao deixar de lado o mecanismo de Bundling e simplificar a integra��o com ferramentas de terceiros (como Bower, Grunt e npm), a Microsoft buscou n�o apenas estar em sintonia com o aquilo que se encontra em voga no desenvolvimento Web. Tal iniciativa tamb�m procurou atrair mais profissionais de front-end para a plataforma ASP.NET, partindo do suporte a solu��es utilizadas extensivamente pelos mesmos em outros projetos.

Importante ressaltar que ao aprofundar os conhecimentos sobre o funcionamento de solu��es como Bower, Grunt e npm, um desenvolvedor ter� ainda um maior controle na customiza��o do processo de build em aplica��es ASP.NET.

Espero que o conte�do aqui apresentado possa ser �til.

At� uma pr�xima oportunidade!

Links

ASP.NET vNext
http://www.asp.net/vnext

JSHint
http://jshint.com/

JSLint
http://www.jslint.com/

LESS
http://lesscss.org/

SASS
http://sass-lang.com/

Bower
http://bower.io/

Grunt
http://gruntjs.com/

Gulp
http://gulpjs.com/

npm
https://www.npmjs.com/

AutoNumeric
http://www.decorplanit.com/plugin/

N�o deixe de conferir o Checklist Programador .NET. A forma mais f�cil de se tornar um expert em .NET.

Bundling: consiste na combina��o de v�rios arquivos em uma simples unidade (no caso um novo arquivo gerado dinamicamente). Como consequ�ncia direta deste procedimento ocorrer� uma diminui��o da quantidade de requisi��es HTTP utilizadas na obten��o das diferentes partes que formam o conte�do de um documento HTML (geralmente arquivos CSS e de scripts), com um consider�vel aumento na performance de carregamento de uma p�gina que empregue tal t�cnica;
Minification: pr�tica que envolve a elimina��o em tempo de execu��o de itens desnecess�rios como espa�os e coment�rios em arquivos CSS ou de scripts, tamb�m contribuindo para uma maior performance no carregamento de formul�rios HTML;
Determinar qual vers�o de uma biblioteca de scripts ser� utilizada: permite configurar o build de uma aplica��o Web para que seja usado o release est�vel mais recente para um plugin jQuery, com o download autom�tico dos arquivos necess�rios por exemplo;
A possibilidade de execu��o autom�tica de ferramentas para verifica��o de c�digo JavaScript, tais como JSHint e JSLint;
O uso de pr�-processadores de CSS como LESS e SASS, mecanismos estes que viabilizam a utiliza��o de vari�veis, fun��es e mixins (agrupamentos de propriedades) em folhas de estilo.

Dentre as ferramentas mais populares na atualidade para a manipula��o de arquivos de scripts e CSS, � poss�vel destacar:

O Bower, gerenciador empregado na instala��o e restaura��o de pacotes client-side (arquivos CSS e de scripts);
Os task runners Grunt e Gulp. Ambos fazem uso de arquivos de configura��o com uma sintaxe baseada em JavaScript, sendo utilizados na automa��o de tarefas envolvendo a manipula��o de scripts e CSS;
O npm (sigla de �Node Package Manager�). Embora seja um gerenciador de pacotes concebido inicialmente para a plataforma Node.js, esta ferramenta representa o ambiente a partir do qual outras solu��es como Bower, Grunt e Gulp s�o executadas.

Exemplo envolvendo o gerenciamento de scripts no Visual Studio 2015

Para implementar a solu��o demonstrada nesta se��o foram utilizados os seguintes recursos:

O Microsoft Visual Studio Ultimate 2015 Preview como IDE de desenvolvimento;
O .NET Framework 4.5.3;
O framework ASP.NET 5 para a cria��o de uma Web Application;
O plugin autoNumeric;
As ferramentas Bower, npm e Grunt integradas ao Visual Studio.

Criando a aplica��o
de testes no Visual Studio 2015

Figura 1. Criando a aplica��o de testes no Visual Studio 2015

Selecionando o
template para a cria��o da aplica��o ASP.NET 5

Figura 2. Selecionando o template para a cria��o da aplica��o ASP.NET 5

Analisando a estrutura do projeto criado via Solution Explorer (Figura 3), � poss�vel observar a presen�a dos seguintes elementos:

A pasta wwwroot, em que constar�o itens est�ticos como documentos HTML, arquivos de scripts e folhas de estilo CSS dos quais a aplica��o depende. Arquivos gerados atrav�s de processos como bundling, minification ou a partir de pr�-processadores como LESS e SASS tamb�m ser�o transferidos para este local;
O item Dependencies, no qual est�o declaradas as depend�ncias manipuladas atrav�s das ferramentas Bower (pacotes client-side utilizados pelo projeto) e NPM (packages utilizados na execu��o do Grunt como task runner);
O item References, que engloba os pacotes .NET usados pela aplica��o e que s�o manipulados a partir do utilit�rio NuGet;
Pastas como �Controllers�, �Models� e �Views�, estruturas t�picas de uma aplica��o MVC;
O arquivo config.json, que cont�m configura��es diversas e substitui o Web.config presente em projetos criados em vers�es anteriores do ASP.NET;
O arquivo project.json, no qual est�o defini��es e configura��es gerais de uma aplica��o (como pacotes do NuGet). Este documento substitui os arquivos com extens�o .csproj (no caso de uma aplica��o baseada no uso de C#);
O arquivo bower.json, em que est�o declaradas as depend�ncias de pacotes client-side manipuladas por meio da ferramenta Bower;
O arquivo package.json, no qual devem ser indicados os packages manipulados a partir do npm (basicamente, os pacotes necess�rios para a execu��o do utilit�rio Grunt);
O arquivo gruntfile.js, em que instru��es JavaScript definem as tarefas a serem executas pela ferramenta Grunt.

Estrutura do
projeto TesteVS2015Scripts

Figura 3. Estrutura do projeto TesteVS2015Scripts

Na Listagem 1 est� o conte�do do arquivo package.json, com os pacotes que ser�o gerenciados via npm.

Listagem 1. Arquivo package.json


        {
            "version": "0.0.0",
            "name": "TesteVS2015Scripts",
            "devDependencies": {
                "grunt": "^0.4.5",
                "grunt-bower-task": "^0.4.0"
            }
        }

Listagem 2. Arquivo gruntfile.json


        module.exports = function  (grunt) {
             grunt.initConfig({
                 bower: {
                     install: {
                         options: {
                            targetDir: "wwwroot/lib",
                            layout: "byComponent",
                            cleanTargetDir: false
                         }
                     }
                }
            });
         
            grunt.registerTask("default", ["bower:install"]);
            grunt.loadNpmTasks("grunt-bower-task");
        };

OBSERVA��O: O c�digo dos arquivos package.json, gruntfile.js e bower.json � gerado automaticamente durante a cria��o de um projeto ASP.NET 5.

Utilizando o
IntelliSense durante a edi��o do arquivo bower.json

Figura 4. Utilizando o IntelliSense durante a edi��o do arquivo bower.json

Listagem 3. Arquivo bower.json


        {
            "name":  "TesteVS2015Scripts",
            "private":  true,
            "dependencies":  {
                "bootstrap": "~3.0.0",
                "jquery": "~1.10.2",
                "jquery-validation": "~1.11.1",
                "jquery-validation-unobtrusive": "~3.2.2",
                "autoNumeric": "~1.9.26"
            },
            "exportsOverride": {
                "bootstrap": {
                    "js": "dist/js/*.*",
                    "css": "dist/css/*.*",
                    "fonts": "dist/fonts/*.*"
                },
                "jquery": {
                    "js": "jquery.{js,min.js,min.map}"
                },
                "jquery-validation": {
                    "": "jquery.validate.js"
                },
                "jquery-validation-unobtrusive": {
                    "": "jquery.validate.unobtrusive.{js,min.js}"
                },
                "autoNumeric": {
                    "js": "autoNumeric.js"
                }
            }
        }

Plugin autoNumeric
ainda n�o instalado

Figura 5. Plugin autoNumeric ainda n�o instalado

Figura 6. Instalando o plugin autoNumeric atrav�s do Bower

Instalando o plugin
autoNumeric atrav�s do Bower

Figura 7. Instalando o plugin autoNumeric atrav�s do Bower

Figura 8. Plugin autoNumeric j� instalado

Figura 9. Acessando o Task Runner Explorer

Restaurando packages via Task Runner Explorer

Figura 10. Restaurando packages via Task Runner Explorer

Resultado da
execu��o de uma tarefa no Task Runner Explorer

Figura 11. Resultado da execu��o de uma tarefa no Task Runner Explorer

Atrelando a
execu��o de uma tarefa a um evento da IDE

Figura 12. Atrelando a execu��o de uma tarefa a um evento da IDE

Na Listagem 4 est� o c�digo referente � View Index.cshtml, sendo poss�vel notar no mesmo:

Dois campos de texto (�peso� e �altura�) nos quais um usu�rio dever� informar os dados para o c�lculo do IMC;
Uma section chamada �scripts�, em que constar� o c�digo respons�vel por calcular o IMC para uma determinada pessoa;
O c�digo da section �scripts� inicia com uma refer�ncia para a biblioteca autoNumeric (que est� localizada em wwwroot\lib\autoNumeric\js);
A fun��o calcularIMC ir� validar os campos de entrada, de forma a tornar obrigat�rio o preenchimento dos mesmos. Se o peso e a altura forem v�lidos, acontecer� o c�lculo do IMC e o arredondamento deste valor para 2 casas decimais. Ser� verificado ainda em que faixa este �ndice se encontra, a fim de determinar situa��es de peso normal, sobrepeso ou ainda, peso abaixo do limite toler�vel. Por fim, uma mensagem ser� exibida com o valor do IMC e o status decorrente deste indicador;
J� no m�todo ready o plugin autoNumeric ser� acionado duas vezes, com o objetivo de criar a m�scara de entrada para os campos de peso e altura.

Listagem 4. View Index.csthml


        <div class="jumbotron">
            <h1>ASP.NET 5</h1>
            <p class="lead">
                 Exemplo de aplica��o MVC baseada no ASP.NET 5.
            </p>
            <p>
                <a href="http://asp.net/vnext"
                    class="btn btn-primary  btn-lg">Saiba mais �</a>
            </p>
        </div>
         
        <h2>
            Teste  envolvendo o uso das ferramentas
             Bower, Grunt e nmp.
        </h2>
         
        <div style="padding: 20px;">
            <p class="lead">
                 Peso (kg):
                <input id="peso" class="form-control  text-right" />
            </p>
            <p class="lead">
                 Altura (m):
                <input id="altura" class="form-control  text-right" />
            </p>
            <a class="btn  btn-primary btn-lg"
               onclick="calcularIMC();">Calcular  IMC �</a>
        </div>
         
        @section scripts{
         
            <script type="text/javascript"
                     src="~/lib/autoNumeric/js/autoNumeric.js"></script>
         
            <script type="text/javascript">
         
                function  calcularIMC() {
                     var peso = $("#peso").val().replace(",", ".");
                     if (peso == "") {
                         alert("Informe um valor para o Peso!");
                         return;
                     }
         
                     var  altura = $("#altura").val().replace(",", ".");
                     if (altura == "") {
                         alert("Informe um valor para a Altura!");
                         return;
                     }
         
                     var IMC = peso / (altura * altura);
                     IMC = Math.round(IMC * 100) / 100;
         
                     var status;
                     if (IMC < 18.5)
                         status = "Abaixo do Peso Ideal";
                     else if  (IMC > 25)
                         status = "Acima do Peso Ideal";
                     else
                         status = "Peso Normal";
         
                     alert("Valor do IMC: " + IMC + "\n\n" +
                          "Status:  " + status);
                }
         
                 $(document).ready(function () {
                     $("#peso").autoNumeric({
                         aSep: '',
                         aDec: ',',
                         mDec: '1',
                         vMin: '0.1',
                         vMax: '1000.0'
                     });
         
                     $("#altura").autoNumeric({
                         aSep: '',
                         aDec: ',',
                         mDec: '2',
                         vMin: '0.01',
                         vMax: '9.99'
                     });
                 });
         
            </script>
        }

Teste da aplica��o criada

Na Figura 13 � apresentada a tela inicial da aplica��o TesteVS2015Scripts.

Tela
inicial da aplica��o TesteVS2015Scripts

Figura 13. Tela inicial da aplica��o TesteVS2015Scripts

Uma vez informados o peso e a altura, acionar a op��o �Calcular IMC�. Ser� exibida ent�o uma janela com o resultado, como indicado na Figura 14.

Figura 14. Mensagem exibida ap�s o c�lculo do IMC

Espero que o conte�do aqui apresentado possa ser �til.

At� uma pr�xima oportunidade!

Links

ASP.NET vNext
http://www.asp.net/vnext

JSHint
http://jshint.com/

JSLint
http://www.jslint.com/

LESS
http://lesscss.org/

SASS
http://sass-lang.com/

Bower
http://bower.io/

Grunt
http://gruntjs.com/

Gulp
http://gulpjs.com/

npm
https://www.npmjs.com/

AutoNumeric
http://www.decorplanit.com/plugin/

Tecnologias:

Confira outros conte�dos:

Teste unit�rio com NUnit

Como migrar projetos do ASP.NET MVC...

Crie relat�rios com o Stimulsoft...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Renato Em 2014

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Gerenciando bibliotecas de scripts no Visual Studio 2015

Veja neste artigo como gerenciar pacotes client-side em projetos ASP.NET 5 criados no Visual Studio 2015, utilizando para isto as ferramentas Bower, Grunt e npm.

Exemplo envolvendo o gerenciamento de scripts no Visual Studio 2015

Teste da aplica��o criada

Exemplo envolvendo o gerenciamento de scripts no Visual Studio 2015

Teste da aplica��o criada

Confira outros conte�dos:

Teste unit�rio com NUnit

Como migrar projetos do ASP.NET MVC...

Crie relat�rios com o Stimulsoft...

Perguntas frequentes

Nossos casos de sucesso