Começando com ASP.NET 5 – wwwroot, bower e gulp

Bom, como já temos o nosso projeto, já conseguimos rodá-lo, etc, agora precisamos adicionar uma view. Já vimos que a estrutura continua igual, mesma convenção, etc. A diferença agora, é que todo o conteúdo estático, como arquivos javascript, imagens, etc, ficam na pasta wwwroot. Esta pasta representa a raiz do seu sistema e serve basicamente para servir conteúdo estático. Você não precisa mais se preocupar se o web.config, ou algum arquivo de log, etc está acessível ou não em sua aplicação. Se não está na pasta wwwroot, ele não será exposto! Agora vamos criar de verdade a nossa primeira view. Para isso, vamos começar vendo o bower.

bower

A intenção aqui não é dar uma longa aula sobre o bower, mas vamos começar entendo o que ele é: um gerenciador de dependências client side. Você pode encará-lo como um nuget para o seu front end. Se precisamos do Entity Framework por exemplo, não vamos ao nuget para utilizá-lo? Caso você queira utilizar jquery e bootstrap por exemplo, você vai utilizar o bower.

Vamos começar adicionando um arquivo chamado bower.json em nosso projeto. Ele é basicamente um arquivo json, e colocaremos todas as nossas dependências dentro de dependencies:

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.5",
    "jquery": "2.1.4"
  }
}

Agora que temos o nosso arquivo informando as dependências que precisamos, nós precisamos instalá-los. Nós poderíamos utilizar o comando bower install diretamente no cmd, porém precisaríamos executar este comando inúmeras vezes durante o desenvolvimento. Uma das novidades do asp.net 5 é a seção chamada scripts no project.json. Trata-se de uma seção onde podemos executar comandos. Há uma série de eventos em que podemos executar esses comandos, sendo eles (retirado do wiki do aspnet):

{
  "scripts": {
    "prebuild": "echo before building",
    "postbuild": "echo after building",
    "prepack": "echo before packing",
    "postpack": "echo after packing",
    "prerestore": "echo before restoring packages",
    "postrestore": "echo after restoring packages"
  }
}

Podemos agora utilizar o evento postrestore para obtermos todas as dependências do bower logo após executarmos o restore (através de dnu restore):

"scripts": {
    "postrestore": [ "bower install" ]
  }

Agora, ao executarmos o restore no projeto, podemos notar o seguinte:

postrestore

E agora temos uma pasta chamada bower_components em nosso projeto:

bower_components

Agora que temos o nosso arquivo com as dependências client side, ainda precisamos colocá-los onde devem, na pasta wwwroot. Para isso, vamos ver o que é gulp.

gulp

O gulp serve basicamente para você automatizar tarefas repetitivas. No cenário atual, utilizaremos o gulp primeiramente para copiar as dependências do bower para a pasta wwwroot. Para isso, vamos primeiro adicionar o gulp como dependência de desenvolvimento. Para fazer isso, vamos executar o comando npm init em nosso projeto (não precisa informar os valores, é só dar enter para as informações solicitadas):

npm init

Com isso, agora temos um arquivo chamado package.json. Agora podemos adicionar o gulp, e futuramente outros plugins do gulp como dependência de desenvolvimento do projeto:

{
  "name": "finance",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp": "^3.9.0"
  }
}

Se você está se perguntando o porque que o seu arquivo tem bem mais informações, é bem simples: eu as removi :D. E agora, como fizemos com o o bower install, também podemos fazer com o npm install, que instalará as dependências do node.

"scripts": {
    "postrestore": [ "npm install", "bower install" ]
  }

E agora, como aconteceu quando adicionamos o bower install, ao executarmos dnu restore, o comando npm install será executado.

Vamos agora criar um arquivo chamado gruntfile.js em nosso projeto:

var gulp = require('gulp');

gulp.task('copy', function() {
  
});

Como dito anteriormente, o gulp é um automatizador de tarefas, logo, para automatizarmos uma tarefa, precisamos criar uma através de gulp.task('nome', function(){}). Eu dei o nome de copy, pois a ideia agora é copiarmos as nossas dependências que estão em bower_components para a pasta wwwroot.

var gulp = require('gulp');

var destination = "./wwwroot/lib";
var source = "bower_components/**/*";

gulp.task('copy', function() {
    gulp.src(source)
        .pipe(gulp.dest(destination));
});

E como fizemos tanto com o npm install quanto com o bower install, vamos automatizar a chamada do gulp em scripts:

"scripts": {
    "postrestore": [ "npm install", "bower install", "gulp copy" ]
  }

Agora vamos aproveitar e adicionar um plugin do gulp para podermos limpar a pasta lib antes de copiarmos todo o conteúdo para lá. Faremos isso, pois o gulp não remove nada antes de copiar os arquivos. Então, caso a gente remova alguma dependência de bower_components, o gulp vai manter os arquivos lá em lib. Para fazer isso, podemos adicionar na mão a dependência dentro do arquivo package.json:

{
  "name": "finance",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.1"
  }
}

Ou então podemos utilizar o comando: npm install --save-dev gulp-clean, que ele adicionará a dependência para nós. Agora, o nosso gulpfile.js ficará assim:

var gulp = require('gulp'),
    clean = require('gulp-clean');


var destination = "./wwwroot/lib";
var source = "bower_components/**/*";

gulp.task('clean', function() {
     return gulp.src(destination)
                .pipe(clean());
});

gulp.task('copy', ['clean'], function() {
    gulp.src(source)
        .pipe(gulp.dest(destination));
});

O segundo parâmetro passado na task copy é uma dependência da task, logo, ela será executada antes de executar o copy. Porém, para garantir que clean seja realmente executado antes, precisamos retornar um stream. Isso acontece pois o gulp roda as tarefas de maneira assíncrona por padrão. Ao retornamos o stream, a task copy entende que ela deve esperar a task clean terminar para poder começar a sua execução. Podemos confirmar isso ao executarmos novamente dnu restore:

gulp copy

Pronto! Agora podemos começar a criar a nossa primeira view efetivamente! Vamos criar o layout e a view home utilizando o jquery e o bootstrap rapidamente, e continuamos no próximo post! É importante lembrar que a convenção de utilizar o arquivo _Layout.cshtml continua! Basta criarmos uma “master page”, e caso você queira que ela seja o layout padrão para todas as views, basta adicioná-la em _ViewStart.cshtml, como era feito antigamente. Porém, antes disso, precisamos adicionar mais uma dependência em nosso projeto, e uma linha de código em nosso Startup para podermos utilizar os arquivos estáticos. É bem simples, basta adicionar a dependência Microsoft.AspNet.StaticFiles em project.json:

  "dependencies": {
    "Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final",
    "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
    "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
    "Microsoft.Extensions.DependencyInjection": "1.0.0-rc1-final",
    "Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
    "Microsoft.Extensions.Logging": "1.0.0-rc1-final",
    "Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final"
  },

E chamar o extension method de IApplicationBuilder, chamado UseStaticFiles:

public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(_configuration.GetSection("Logging"));
            
    app.UseStaticFiles();
            
    app.UseDeveloperExceptionPage();
            
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

E pronto, agora podemos criar as nossas views sem problemas:

  • /Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>finance</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<style>
        body {
            padding-top: 60px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">finance</a>
            </div>

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>

<div class="container body-content">
        @RenderBody()
        <hr />
<footer>


&copy; 2016 - finance

        </footer>



    </div>



    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>
  • /Views/_ViewStart.cshtml
@{
    Layout = "_Layout";
}
  • /Views/Home/Index.cshtml
olá

Bom, por hoje é só 😉

Links, referências, etc:

Anúncios

Um comentário sobre “Começando com ASP.NET 5 – wwwroot, bower e gulp

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s