Contente
Os executores de tarefas JavaScript, como o Grunt, tornaram-se extremamente populares entre os desenvolvedores front-end. Isso ocorre porque eles ajudam a fazer aquilo que todos nós queremos em nosso trabalho - economizar tempo!
Mas com mais de 5.000 (e contando) plug-ins Grunt agora disponíveis, pode ser difícil para os desenvolvedores encontrarem esses 'diamantes brutos'. Nós olhamos para trás, quando ficamos presos no Grunt para encontrar a receita perfeita de plug-ins do Grunt que você deveria usar.
01. Uglify
Todo desenvolvedor de front-end que se preze conhece as vantagens de reduzir arquivos JavaScript, e é exatamente isso que este plug-in faz. Tal é a sua popularidade, ele está realmente incluído no Guia de Introdução do Grunt. Apesar do nome, este plug-in também pode ser usado para embelezar seu código JavaScript - embora isso não seja particularmente útil para uso em produção.
02. Sass
Pode haver algum debate sobre qual pré-processador CSS realmente domina o poleiro, mas aqui na Stickyeyes, optamos pelo Sass em vez de seu principal rival, o Less. Este plug-in nos permite escrever nossos arquivos Sass e compilá-los para CSS automaticamente. Os méritos de usar um pré-processador CSS justificam um artigo separado por si só, mas é seguro dizer que se você não estiver usando um, você está muito atrasado para a festa!
03. CSSMin
Este plugin é o equivalente CSS do Uglify. Ele simplesmente obtém quaisquer arquivos CSS especificados e os minimiza. Claro, se você for usar isso em conjunto com o plug-in Sass, então você precisa garantir que esta tarefa seja executada após a tarefa Sass.
Existem muitas alternativas para CSSMin que também podem reduzir o tamanho de seus arquivos CSS usando técnicas ligeiramente diferentes; CSS nano, CSS wring, CSS encolher, etc. Leia este útil benchmark se você gosta desse tipo de coisa.
04. Concat
Como o nome sugere, este plugin simplesmente pega vários arquivos e os concatena em um. Tal como acontece com a redução do código, concatenar arquivos também é uma prática recomendada antiquíssima para reduzir o tempo de carregamento da página.
A concatenação de arquivo sempre deve ser usada na produção para JavaScript e CSS. Normalmente, esta é a última tarefa a ser executada - após a tarefa de pré-processamento de CSS e a tarefa de minificação. É fácil apenas dizer a este plugin para concatenar todos os arquivos em um diretório específico, mas cuidado com a ordem em que os arquivos serão concatenados - você pode precisar dar uma ordem específica ou nomear os arquivos para que eles sejam sempre concatenados na ordem que você deseja .
05. ImageMin
Na mesma linha do CSSMin e do Uglify, o ImageMin aborda outro problema antigo para o carregamento da página - o tamanho do arquivo de imagem. A 'minimização' da imagem é geralmente o primeiro passo para a otimização, então este plug-in é essencial para reduzir o tamanho total do arquivo da página o máximo possível.
Se você estiver trabalhando com JPG, PNG, GIF ou SVG (um formato de imagem vetorial cada vez mais popular), este plug-in resultará em reduções sem perdas no tamanho do arquivo de suas imagens, sem você ter que mexer um dedo. Se você tiver muitas imagens em seu projeto, é uma boa ideia executar essa tarefa apenas quando você estiver enviando para a produção, em vez de executá-la em um evento de observação (consulte o próximo ponto).
06. Assistir
Este plugin não afeta o front-end do seu site, mas é extremamente útil na criação de um processo Grunt eficiente. O Watch simplesmente fica de olho em quaisquer diretórios que você especificar e, uma vez que algo mude, ele irá automaticamente disparar certas tarefas do Grunt.
Portanto, você pode configurar uma condição de observação em seu diretório 'js' para executar suas tarefas JavaScript e outra em seu diretório 'css' para executar suas tarefas CSS. Isso significa que você nunca terá que executar manualmente seu processo principal do Grunt! Basta inicializar a tarefa de observação do grunt antes de começar a fazer alterações e você pode esquecer que ela está lá.
Palavras: Jamie Shields
Jamie Shields é desenvolvedor de back-end na agência de marketing digital Stickyeyes.
Como isso? Leia isso!
- Grunt vs Gulp: Qual ferramenta de criação de JavaScript você deve escolher?
- 8 maneiras de melhorar a configuração do Grunt
- Os melhores temas gratuitos de WordPress
