jornfilho / VS2013-NodeJs-Grunt-Gulp-Bower-Ruby-SASS

Automatização de processos utilizados em ambiente de desenvolvimento front end de dentro do Visual Studio 2013.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Integração Visual Studio 2013 + NodeJs + Bower + Gulp + Grunt + Ruby + SASS

Seguindo os passos abaixo você poderá automatizar processos utilizados em ambiente de desenvolvimento front end de dentro do Visual Studio 2013.

Instalação do NodeJs

Acesse o site do NodeJs e instale a útima versão.

Instanciando NodeJs e Bower na aplicação

Acesse o diretório base dos arquivos do projeto front end e execute os seguintes comandos:

npm install

bower install

Instalação do Grunt Launcher

Instale a extensão para Visual Studio 2013 do Grunt Launcher.

Esta extensão permitirá executar comandos do Grunt de dentro do Visual Studio

Instalação do Intellisense para NPM e Bower (Opcional)

Instale a extensão do Visual Studio 2013 para Intellisense NPM e Bower.

Instalação do Ruby (apenas se houver uso do SASS)

  • Baixe e instale o core do Ruby;
  • Adicione o diretório bin nas variáveis de ambiente do windows e lembre-se de reiniciar o promp ao concluir. Para facilitar as configurações, dê preferência na utilização do driver de instalação do Windows;
  • Faça download do certificado e o adicione na pasta de instalação do Ruby. Este certificado resolverá o problema de conexão com o repositório de gemas;
  • Adicione a seguinte chave nas variáveis de ambiente: SSL_CERT_FILE:<% Caminho do certificado da etapa acima, incluir o nome cacert.pem %>
  • Reinicie o caso ele esteja aberto e execute o seguinte comando: gem install sass.

Habilitando SASS no projeto (apenas se houver uso do SASS)

Acesso o diretório do projeto e execute o seguinte comando:

npm install grunt-contrib-sass --save-dev

Utilizando Bower de dentro do Visual Studio

Para executar o Bower, basta clicar com o botão direito sobre o arquivo bower.js que no menu de contexto será exibido a opção Bower install packages.

NPM de dentro do Visual Studio

Para executar o NPM, basta clicar o botão direito sobre o arquivo packages.js que no menu de contexto será exibido a opção NPM install packages.

Gulp de dentro do Visual Studio

Para executar rotinas Gulp, basta clicar o botão direito sobre o arquivo gulpfile.js que no menu de contexto será exibido um submenu com o nome Gulp e nele conterá todas as rotinas possíveis para execução.

Grunt de dentro do Visual Studio

Para executar rotinas Grunt, basta clicar o botão direito sobre o arquivo gruntfile.js que no menu de contexto será exibido um submenu com o nome Grunt e nele conterá todas as rotinas possíveis para execução.

Durante a execução uma rotina, a mesma ficará marcada até que o processo seja finalizado.

Para atualizar todos os pacotes, basta clicar com o botão direito sobre o diretório bower_components que no menu de contexto será exibido a opção Bower: Update all packages.

Para atualizar um pacote especícico, basta clicar com o botão direito sobre o diretório bower_components/pacote_desejavel que no menu de contexto será exibido a opção Bower: Update pacote_desejavel.

About

Automatização de processos utilizados em ambiente de desenvolvimento front end de dentro do Visual Studio 2013.