sábado, 14 de janeiro de 2017

Depurando task runner (gulp) com o Visual Studio Code

Quando baixamos pacotes utilizando o NPM e automatizamos tarefas utilizando task runners, como o Gulp, ganhamos muita produtividade e podemos deixar de fazer várias tarefas repetitivas como copiar arquivo, minimizar js e css (Se você ainda não conhece essa possibilidade, veja o post Gulp, Grunt, Bower e npm no Visual Studio). De toda forma, quando há algum problema no seu ambiente ou mesmo no pacote a ser utilizado, não é muito trivial descobrir o erro, muitas vezes tendo que adicionar vários console.log para ver como como está sendo executada a tarefa no pacote específico.

Passo a passo:

  1. Abra o diretório do seu projeto no Visual Studio Code. Isto também pode ser feito por linha de comando, navegando até o diretório do seu projeto e digitando 'code .' se seu ambiente tiver alias configurado.
  2. Crie uma configuração de depuração no Visual Studio Code
    1. Vá em View -> Debug ou clique no slide bar
    2. Clique em criar uma configuração de depuração
    3. Selecione Node.js
  3. Será criando o launch.js no diretório .vscode
  4. Ainda no launch.js, edite o atribute "program"  para executar o gulp
    1. A configuração deve ser ficar conforme abaixo:
      "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js"
    2. A tarefa default será executada
    3. Se não tiver instalado o gulp para o projeto, utilize o comando
      npm install gulp --save-dev
  5. Marque um breakpoint na linha solicitada
  6. Inicie a depuração, através do atalho F5 ou clicando no
  7. Use a barra para controlar o fluxo da depuração



Referências:
Node.js Applications with VS Code - Introdução ao Node.js sendo utilizado pelo VS code, intellisense, terminal integrado depuração
Debugging task runner tasks (like Gulp) with Visual Studio Code editor/debugger do hansrwindhoff há um passo a passo de como depurar esta situação utilizando o VS Code.
Para ter uma informação mais geral sobre a depuração também há a documentação Debugging do Visual Studio Code.

http://stackoverflow.com/questions/22224831/no-command-gulp-found-after-installation