Usando Gulp com MVC 5 no Visual Studio 2015

  • Rafael Miceli
  • 12 Mai 2016

Hoje em dia nossas aplicações web estão ficando cada vez mais ricas no Front-End, com isso alguns projetos adotam uma arquitetura de Clients apontando para APIs.

Neste caso, Clients não são clientes finais (usuários) efetivamente, estes Clients vem do mesmo conceito de Clients do Oauth2.

Uma forma de criar uma solução com MVC 5 nessa arquitetura é tendo um WebApplication Client e um WebApplication API

Nosso WebApplication API obviamente vai possuir diferentes ambientes, vamos supor que ele possua 2: Dev e Prod.

Quando publicamos nossa API, publicamos a versão de Dev no endereço http://localhost:5000 e a de Prod no http://localhost:5009

Mas para o Javascript de nosso Client como mudamos a url de acordo com cada build que damos? Ai que vamos conhecer o Gulp.

Gulp

Gulp é um automatizador de tarefas, com ele podemos realizar tarefas que precisamos quando vamos dar um build (e outras coisas).

O Gulp usa uma forma de escrever essas tarefas bem fluente, o que fica fácil de entender o que estamos automatizando.

Agora vamos preparar o Gulp em uma aplicação nossa.

Instalando e preparando o Gulp

1 - Para usarmos o Gulp em nossa aplicação primeiramente precisamos instalar o Node.

2 - Após instalar o node, vamos em nossa aplicação Web, e na raiz do projeto vamos clicar com o botão direito do mouse e selecionamos Add… -> New Item… -> E vamos selecionar o NPM Configuration File.

passo1

Caso você não possua este item de template pode adicionar apenas um arquivo do tipo json e nomea-lo como package.json.

3 - Agora vamos adicionar nosso arquivo gulp, muito similar ao passo anterior Add… -> New Item… -> Gulp Configuration File.

passo2

Mesma coisa no passo anterior, caso você não possua este item de template pode adicionar um arquivo do tipo javascript com o nome gulpfile.js.

Excelente! Agora temos o gulp instalado em nossa aplicação!

Para fazer um teste vamos digitar o seguinte código em nosso gulpfile:

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

// define tasks here
gulp.task('default', function () {
    // run tasks here
    var str = "Say my name...";

    return file('name.js', str, { src: true })
    .pipe(gulp.dest('dist'));
});

Neste código estamos pedindo ao Gulp para criar um arquivo contendo o texto da variável str.

Para fazermos nossa task default executar abrimos nossa Task Runner Explorer Window. Perceba que nele está nosso Gulpfile.js com nossa task default.

Para fazermos ele executar em nosso build nós damos um bind do mesmo em um dos nossos eventos:

passo3

Excelente! Feito isso, podemos dar um build em nossa aplicação que nosso gulp vai criar um arquivo com o texto que passamos a variável dentro de uma pasta chamada dist.

Em um próximo post vamos fazer o gulp criar o arquivo de forma diferente para cada ambiente.

comentarios com Disqus Disqus