Caixa de ferramentas do JavaScript [parte 3]

Este é o último post da série Ferramentas JavaScript para desenvolvimento web. Encerramos fazendo um apanhado geral das técnicas e ferramentas mais empregadas pelos desenvolvedores da linguagem mundo afora.

js-cover

Automatizando as coisas com Grunt

Apesar do nome, Grunt está longe de ser primitivo. É uma robusta ferramenta de construção através de linhas de comandos que executa as tarefas definidas pelo usuário. Através da especificação de um arquivo de configuração simples, podemos configurar o Grunt para compilar LESS ou SASS, construir e minimizar todos os arquivos JavaScript e CSS em pastas especificas, ou mesmo executar uma ferramenta de linting ou framework de testes. Também é possível configurar o Grunt para executar como parte de um script personalizado do Git (Git hook) – minimizando e construindo seu código somente se houver algo no repositório de controle do código.

Grunt suporta targets nomeados então é possível especificar diferentes comandos para diferentes ambientes; pode definir alvos como “dev” e “prod”, por exemplo. Isso é útil em diversos cenários como na construção e minimização do código em produção, mas deixando normalmente no ambiente de desenvolvimento para facilitar a depuração.

Uma funcionalidade útil do Grunt é o “grunt watch” que monitora se há mudança em um diretório ou conjunto de arquivos. Isso pode ser integrado diretamente com IDEs como WebStorm e Sublime Text. Usando o “watch” é possível acionar eventos com base na alteração dos arquivos. Uma aplicação prática dessa abordagem é a compilação LESS e SASS. Ao configurar o monitoramento dos arquivos LESS e SASS é possível compilar eles imediatamente após a mudança do arquivo, fazendo com que a saída da compilação fique imediatamente disponível no seu ambiente de desenvolvimento. Outro exemplo é durante o desenvolvimento, pois a página realiza de maneira automática o “atualizar” a cada vez que algum arquivo do projeto é alterado. Também é possível usar o essa funcionalidade para automaticamente executar uma ferramenta de linting em qualquer arquivo modificado. A execução em tempo real das tarefas via “grunt watch” é uma das formas de aumentar sua produtividade.

Automatizando as coisas com Gulp

O Grunt e o Gulp são competidores diretos que disputam para resolver os mesmos problemas de automatização da construção. A maior diferença entre eles é que o Grunt foca em configuração, enquanto o Gulp foca no código. Configuramos as tarefas em arquivos JSON no Grunt e escrevemos funções JavaScript nos arquivos Gulp para realizar as mesmas tarefas.

A seguir temos um arquivo de configuração do Grunt para compilar arquivos SASS para CSS sempre que o arquivo for alterado:

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: "app/styles",
        src: "**/*.scss",
        dest: "../.tmp/styles",
        expand: true,
        ext: ".css"
      }]
    }
  },
  autoprefixer: {
    options: ["last 1 version"],
    dist: {
      files: [{
        expand: true,
        cwd: ".tmp/styles",
        src: "{,*/}*.css",
        dest: "dist/styles"
      }]
    }
  },
  watch: {
    styles: {
      files: ["app/styles/{,*/}*.scss"],
      tasks: ["sass:dist", "autoprefixer:dist"]
    }
  }
});
grunt.registerTask("default", ["styles", "watch"]);

Fonte: Grunt vs Gulp – Beyond the Numbers

Esse é o arquivo Gulp que configura a compilação de arquivos SASS para CSS sempre que o arquivo for alterado:

gulp.task("sass", function () {
  gulp.src("app/styles/**/*.scss")
    .pipe(sass())
    .pipe(autoprefixer("last 1 version"))
    .pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
  gulp.run("sass");
  gulp.watch("app/styles/**/*.scss", function() {
    gulp.run("sass");
  });
});

Fonte: Grunt vs Gulp – Beyond the Numbers

Recomendo usar de acordo com sua preferência. Ambas ferramentas são instaladas através do npm, o Gerenciador de Pacotes do Node.js.

Resumo

O JavaScript está evoluindo significativamente desde seu nascimento nos primeiros dias da Internet. E hoje é uma funcionalidade proeminente e importante para a interação das aplicações web.

O desenvolvedor também está evoluindo significantemente desde 1995. Hoje os desenvolvedores JavaScript modernos usam frameworks ricos e robustos, e IDEs para trabalhar de modo eficiente e produtivo.

Construir sua primeira aplicação JavaScript moderna é mais fácil do que se imagina! Apenas escolha uma IDE (recomendo o Atom para os iniciantes) e então instale o npm e grunt. Se houver problemas ao longo do caminho, o Stack Overflow é um recurso excelente. Com pouco tempo é possível aprender tanto o básico como a maneira de publicar sua aplicação JavaScript moderna.

Recursos

Frameworks:

IDEs:

Linting:

Ferramentas e automatização do build:

Recursos úteis:


Sobre o autor

David Haney trabalha na equipe de gerenciamento da engenharia na Stack Exchange, criador de questões e respostas nos sites StackOverflow e ServerFault. Ele passa o dia ajudando os desenvolvedores a resolverem seus problemas e melhorar os processos. Ele trabalhou anteriormente como líder de desenvolvimento da plataforma de e-commerce Fanatics que hospeda mais de 10.000 web sites incluindo o NFLShop – A loja virtual oficial da NFL eNBAStore.com – A loja oficial da NBA. David é criador da Dache, um framework de caching distribuído de código aberto. Seu tempo extra é gasto bebendo cerveja e participando de comunidades de grupos de usuários e eventos de programação – muitas vezes simultaneamente.

Esse artigo do InfoQ é parte da serie “Próxima geração do HTML5 e JavaScript“. Você pode assinar para receber notificações via RSS.

Autor: Daniel Brandão

Desenvolvedor Web e Professor. Gosto de debater, escrever e comentar a respeito da vida, tecnologia, o pensar, a sociedade, a vida cotidiana e da vida vindoura.

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 )

Foto do Google

Você está comentando utilizando sua conta Google. 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 )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.