Como minificar CSS e Javascript com NodeJS

Como todos sabemos, performance é extremamente importante. Independentemente se seu projeto for um aplicativo, um sistema, um site ou uma loja virtual, é fundamental que a performance seja a melhor possível.

Não existe nenhuma linha de código mágica que deixe o seu projeto rápido, mas sim um conjunto de técnicas, que podem ser de back-end: otimização de queries, linguagem de programação adequada para a necessidade do projeto, frameworks, atualizações, como de front-end :definir tempo de cache dos arquivos para o navegador, otimizar html, não carregar arquivos desnecessários, minificar arquivos CSS e Javascript. Hoje vamos falar sobre esse último ponto, em como utilizar NodeJS para facilmente minificar nossos arquivos.

Instalando o pacote via NPM

Caso seu projeto ainda não tenha um arquivo packages.json, crie um utilizando:

git init

Com o arquivo packages.json, vamos instalar o pacote:

npm install node-minify --save

Pronto, já temos as ferramentas que precisamos, agora vamos criar os scripts necessários.
Considere esta estrutura base do nosso projeto e os arquivos Javascript e CSS que vamos minificar:

Estrutura base do nosso projeto

Nosso arquivo Javascript contém uma função simples de Ajax utilizando Jquery e nosso CSS é o código base do saudoso framework Pure.css.

Minificando Javascript

Na raiz do nosso projeto, vamos criar o arquivo minificar_javascript.js

compressor = require('node-minify');

op = compressor.minify({
    compressor: 'babel-minify',
    input: ['js/funcoes.js'],
    output: 'js/funcoes.min.js',
    callback: function(err, min) {}
});

op.then(function(min) { console.log('\n\r.:: Concluído com sucesso! ::.') });

Nosso script irá ler o arquivo funcoes.js, minificar e salvar no arquivo funcoes.min.js, e dar uma mensagem de sucesso, caso nenhum erro ocorra. Vamos ver o resultado?

Arquivo Javascript Minificado

Repare que até nossos parâmetros foram renomeados, para diminuir o tamanho do arquivo.

Minificando CSS

Seguindo o mesmo fluxo, na raiz do nosso projeto, vamos agora criar o arquivo minificar_css.js

compressor = require('node-minify');

op1 = compressor.minify({
    compressor: 'clean-css',
    input: ['css/estilos.css'],
    output: 'css/estilos.min.css',
    callback: function(err, min) {}
});

op1.then(function(min) { console.log('\n\r.:: Concluído com sucesso! ::.') });

Este é o resultado do nosso arquivo css minificado:

Arquivo CSS Minificado

O tamanho do arquivo estilos.css é 10kb, enquanto o arquivo estilos.min.css ficou em 3kb. Pode parecer pouco, mas como comentei no início do post, a aplicação de todas as técnicas recomendadas, pode garantir uma excelente performance para o seu projeto.

Para agilizar o desenvolvimento, é uma prática comum (levando o nosso projeto de exemplo) utilizar os arquivos funcoes.js e estilos.css durante o desenvolvimento e minificar (e utilizar) os arquivos funcoes.min.js e estilos.min.css quando enviar o projeto para produção.

Caso seja necessário, também é possível minificar vários arquivos e salvar todos em um arquivo somente. Exemplo:

compressor = require('node-minify');

op1 = compressor.minify({
    compressor: 'clean-css',
    input: ['css/estilos.css', 'css/bootstrap.css'],
    output: 'css/css.min.css',
    callback: function(err, min) {}
});

op1.then(function(min) { console.log('\n\r.:: Concluído com sucesso! ::.') });

O mesmo funciona para o script de JS:

compressor = require('node-minify');

op = compressor.minify({
    compressor: 'babel-minify',
    input: ['js/funcoes.js', 'js/bootstrap.js'],
    output: 'js/js.min.js',
    callback: function(err, min) {}
});

op.then(function(min) { console.log('\n\r.:: Concluído com sucesso! ::.') });

Lista completa dos compressores utilizados pelo node-minify.

Caso tenha ficado alguma dúvida, é só me chamar.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para o topo