Pagina inicial » Kit de ferramentas » A batalha de construir scripts Gulp Vs Grunt

    A batalha de construir scripts Gulp Vs Grunt

    Eu já escrevi sobre como começar com o Gulp e como começar com o Grunt. Ambos automatize nossas tarefas, ambos use o nó, e ambos exigem que você criar tarefas e instalar plugins de algum tipo. Mas você se pergunta sobre a diferença entre os dois, ou até mesmo, o que é melhor?

    Neste artigo vou me concentrar principalmente as diferenças entre esses dois projetos o que pode levar você a decidir qual dos dois você considera melhor para si mesmo. Eu vou estar usando algum código que pode ser estranho. Se for, sugiro ler os dois artigos previamente publicados antes de começar.

    Mais em Hongkiat.com

    • Como começar com o Gulp
    • Como começar com o Grunt

    Rapidez

    A principal diferença entre Gulp e Grunt está em como eles lidam com suas tarefas de automação no interior. Gulp usa fluxos Node enquanto o Grunt usa arquivos temporários. Vamos colocar isso em inglês, vamos?

    Suponha que você gostaria de escrever o código SASS para o seu projeto. Você gostaria de compilar seu código SASS e, em seguida, talvez minificá-lo.

    Grunt lida com isso usando arquivos intermediários que são operações de E / S de disco. Seu arquivo SASS é compilado e, em seguida, gravado em um arquivo temporário. O arquivo temporário é usado pelo autoprefixer e, em seguida, o produto final é gravado no arquivo de destino.

    Gulp cuida de tudo isso em memória. Seu arquivo SASS de origem é compilado, o resultado é passado para o autoprefixer sem ser gravado em um arquivo e o arquivo de destino é então gravado.

    Em comparação com as operações na memória, as gravações em disco são lentas, o que significa que Gulp tem uma grande vantagem de velocidade (para agora). Uma comparação de velocidade foi feita pelo tech.tmw, que mostra que a maioria das tarefas é pelo menos duas vezes mais rápida no Gulp. Embora este não tenha sido um estudo extremamente científico, a tendência está aí e tenho visto o mesmo com meus próprios projetos. Mas quão grande de um impacto é a diferença de velocidade?

    Diferença em segundos

    Para a maioria dos projetos, isso não importa. A maioria dos projetos é pequena. Quando você está criando um tema WordPress ou algo semelhante, o número de arquivos com os quais você precisa trabalhar está dentro de um limite razoável. Realmente não importa se suas folhas de estilo são compiladas em 400ms ou 800ms.

    Além disso, a maioria dos projetos pode ser estruturado de tal forma que algumas das questões mais intensas possam ser evitadas. Se você tiver 50 arquivos SASS, poderá concatená-los rapidamente enquanto estiver em desenvolvimento, não será necessário autoprefix ou minificá-los. Você não precisará otimizar as imagens toda vez que salvar um projeto e assim por diante.

    Mesmo quando você realmente precisa das grandes armas porque está empurrando seu trabalho para um servidor de teste ou quando está atualizando um repositório, um tempo de 5 segundos ou 9 segundos faz muita diferença?

    Para completar, o Grunt irá adicionar suporte para a tubulação na próxima versão 0.5, que irá acelerar consideravelmente as coisas, tornando isso um ponto discutível.

    A comunidade

    Grunt tem sido em torno de muito mais do que Gulp por isso tem uma base de usuários significativa. Grunt atualmente recebe cerca de 37.000 downloads por dia, em média, Gulp recebe um pouco mais da metade disso, perto da marca de 23.000. Dito isto, Gulp só existe há um ano e meio, tornando esse número respeitável para dizer o mínimo.

    Grunt atualmente tem mais de 4000 plugins, enquanto o Gulp tem mais de 1200 plugins. De acordo com as tendências do Google, mais pessoas pesquisam coisas relacionadas ao Grunt, há mais fóruns que lidam com isso e geralmente mais suporte da comunidade.

    Claro que Gulp está em alta e chegando, o que significa que isso é probabilidade de uniformizar a longo prazo. No entanto, isso é uma barreira para alguns desenvolvedores, especialmente aqueles que trabalham em projetos baseados no Grunt..

    Gostaria de salientar que as comunidades de ambos são extremamente legal. Tanto quanto eu posso dizer a relação entre os líderes em cada comunidade é incrível, e deve servir de exemplo para todos. O criador do Gulp realmente ajudou o escritor da comparação de testes de velocidade a melhorar as precisões de tempo que levam a uma diminuição nas diferenças de tempo. Isso é o que eu chamo de cavalheiro!

    Configuração de código Vs

    Aparentemente este é o ponto de inflexão para muitos, mas para ser honesto, eu não posso ver a questão aqui pessoalmente.

    O argumento é assim: Gulp é um bom exemplo código sobre configuração pode ser uma coisa boa quando a configuração fica um pouco confusa. Outras pessoas dizem que, embora isso seja verdade e Gulp é mais fácil de ler, é mais difícil escrever Porque a tubulação pode ser um pouco confusa.

    Antes do peso, aqui está o mesmo exemplo primeiro em Grunt, depois em Gulp:

     grunt.initConfig (sass: dist: arquivos: [src: 'dev / * .scs', dest: '.tmp / styles', expandir: true, ext: '.css'], autoprefixer : dist: arquivos: [expandir: verdadeiro, cwd: '.tmp / estilos', src: ', * / *. css', destino: 'css / estilos'], observe:  styles: arquivos: ['dev / *. scss'], tarefas: ['sass: dist', 'autoprefixer: dist']); grunt.registerTask ('default', ['styles', 'watch']); 
     gulp.task ('sass', função () gulp.src ('dev / *. scss') .pipe (sass ()) .pipe (autoprefixer ()) .pipe (gulp.dest ('css / styles') )); gulp.task ('padrão', função () gulp.run ('sass'); gulp.watch ('dev / *. scss', função () gulp.run ('sass');); ); 

    Minha opinião é que isso realmente não importa. Claro, se você está acostumado com a primeira maneira, pode precisar gastar algum tempo para descobrir o segundo, mas isso é verdade também vice-versa. Então para mim, o “é confuso” argumento é completamente inválido. Qualquer novo método que você aprende é confuso no início, mas se você dedicar um tempo para entender a lógica de cada um, tudo se equilibra.

    Dito isto, eu pessoalmente prefiro API do Gulp porque está limpoE isso reflete a maneira que eu penso mais de perto do que Grunt. Isto é claro completamente subjetivo e não é um problema com o Grunt, é apenas minha preferência pessoal.

    Como escolher

    Eu não acho que haja qualquer dúvida sobre o fato de que tanto o Grunt quanto o Gulp são ótimas ferramentas e ajudaram as pessoas a economizar incontáveis ​​horas ao longo dos anos. Grunt é um pouco mais lento por enquanto, mas tem uma comunidade muito maior. O Gulp é mais rápido, tem uma API mais limpa, mas falta a base de usuários.

    Eu acho que a decisão vai se resumir a continuidade, plugins disponíveis e preferência.

    (1) Se você estiver usando Grunt / Gulp por um tempo agora e você está feliz com isso, não há razão para mudar.

    (2) Se o seu projeto requer plugins que não são fornecidos por Gulp e você não está preparado para escrever um, você precisa ir com o Grunt.

    (3) Se as duas considerações acima não se aplicarem a você, ela será reduzida à preferência. Eu sugiro experimentar ambos e ver qual fica com você.

    Como eu disse, optei por usar o Gulp porque eu gosto de sua API mais limpa melhor, mas eu estou perfeitamente confortável usando o Grunt se um projeto exige isso. O que você deveria não leia-se que o Sr. Sabe-tudo disse que Gulp é melhor e aceita. Embora existam diferenças, não há vencedor claro e ambos os projetos podem, e irão, coexistir. Experimente e faça a sua própria opinião.

    Nota: você também pode querer considerar opiniões de usuários como Keith Cirkel (um consultor de Javascript) que aconselha você a usar nem. Em seu interessante Por que devemos parar de usar o artigo Grunt & Gulp, ele sugere usar npm.

    Leitura Adicional

    Há muitos outros excelentes artigos sobre esse tópico. Eu recomendo vivamente qualquer um dos seguintes para leitura adicional; nunca é demais ler o que os outros têm a dizer!

    • Grunt vs Gulp - Beyond the Numbers (agradecimentos especiais pelos exemplos claros)
    • Gulp, Grunt, o que for
    • Escolha: Grunt, Gulp ou npm?
    • Gulp e Grunt de teste de velocidade
    • Por que devemos parar de usar o Grunt & Gulp
    • Construa Guerras (use as setas para navegar)
    • Não há necessidade de grunhir, tomar um gole de ar fresco