Como minimizar CSS e Javascript via linha de comando

Todo bom desenvolvedor web tem a preocupação de minimizar seus arquivos CSS e Javascript a fim de otimizar a renderização de suas páginas. Neste artigo veremos como fazer isso no GNU/Linux via linha de comando.

[ Hits: 9.765 ]

Por: Fábio Berbert de Paula em 15/04/2015 | Blog: https://fabio.automatizando.dev


JavaScript-Minifier



JavaScript-Minifier é um módulo em Perl usado para minimizar/otimizar arquivos JS.

Partindo do princípio de que já tenha o Perl instalado em seu sistema, o próximo passo é instalar o módulo.

Em Debian/Ubuntu e derivados isso pode ser feito com o seguinte comando:

sudo apt-get install libjavascript-minifier-perl

Nas demais distribuições (incluindo Debian/Ubuntu), é possível instalar o módulo usando o shell CPAN:

sudo perl -MCPAN -e shell
cpan> install JavaScript::Minifier

Leitura recomendada: A forma correta de se instalar módulos Perl [Artigo]

Agora vamos criar o Perl script que será usado para minimizar arquivos JS:

sudo vim /usr/local/bin/jsmin.pl

#!/usr/bin/perl

my $source = shift;

if (! -f $source) { 
	print "Use: $0 <input-file>\n\n";
}

use JavaScript::Minifier qw(minify);

open(INFILE, $source) or die;
print minify(input => *INFILE);
close(INFILE);

Salve e saia. O código, além de ser auto-explicativo, não é o foco do artigo. Apenas transcreva-o e em seguida torne-o executável:

sudo chmod a+x /usr/local/bin/jsmin.pl

Pronto! Já podemos usar o comando jsmin.pl para minimizar nossos scripts. Exemplo:

jsmin.pl app.js > app-min.js

Compare o código original com o código gerado e veja a diferença:

/* app.js original */
/*
 * Template Name: Unify - Responsive Bootstrap Template
 * Description: Business, Corporate, Portfolio, E-commerce and Blog Theme.
 * Version: 1.6
 * Author: @htmlstream
 * Website: http://htmlstream.com
*/

var App = function () {
    //Bootstrap Tooltips and Popovers
    function handleBootstrap() {
        /*Bootstrap Carousel*/
        jQuery('.carousel').carousel({
            interval: 15000,
            pause: 'hover'
        });

        /*Tooltips*/
        jQuery('.tooltips').tooltip();
        jQuery('.tooltips-show').tooltip('show');      
        jQuery('.tooltips-hide').tooltip('hide');       
        jQuery('.tooltips-toggle').tooltip('toggle');       
        jQuery('.tooltips-destroy').tooltip('destroy');       

        /*Popovers*/
        jQuery('.popovers').popover();
        jQuery('.popovers-show').popover('show');
        jQuery('.popovers-hide').popover('hide');
        jQuery('.popovers-toggle').popover('toggle');
        jQuery('.popovers-destroy').popover('destroy');
    }

    //Search Box (Header)
    function handleSearch() {    
        jQuery('.search').click(function () {
            if(jQuery('.search-btn').hasClass('fa-search')){
                jQuery('.search-open').fadeIn(500);
                jQuery('.search-btn').removeClass('fa-search');
                jQuery('.search-btn').addClass('fa-times');
            } else {
                jQuery('.search-open').fadeOut(500);
                jQuery('.search-btn').addClass('fa-search');
                jQuery('.search-btn').removeClass('fa-times');
            }   
        }); 
    }

    //Sidebar Navigation Toggle
    function handleToggle() {
        jQuery('.list-toggle').on('click', function() {
            jQuery(this).toggleClass('active');
        });

        /*
        jQuery('#serviceList').on('shown.bs.collapse'), function() {
            jQuery(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
        }

        jQuery('#serviceList').on('hidden.bs.collapse'), function() {
            jQuery(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
        }
        */
    }

    //Fixed Header
    function handleHeader() {
         jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop()>100){
                jQuery(".header-fixed .header-sticky").addClass("header-fixed-shrink");
            }
            else {
                jQuery(".header-fixed .header-sticky").removeClass("header-fixed-shrink");
            }
        });
    }

    //Header Mega Menu
    function handleMegaMenu() {
        jQuery(document).on('click', '.mega-menu .dropdown-menu', function(e) {
            e.stopPropagation()
        })
    }

    return {
        init: function () {
            handleBootstrap();
            handleSearch();
            handleToggle();
            handleHeader();
            handleMegaMenu();
        },

        //Clients Logo
        initSliders: function () {
            jQuery('#clients-flexslider').flexslider({
                animation: "slide",
                easing: "swing",
                animationLoop: true,
                itemWidth: 1,
                itemMargin: 1,
                minItems: 2,
                maxItems: 9,
                controlNav: false,
                directionNav: false,
                move: 2
            });
            
            jQuery('#clients-flexslider1').flexslider({
                animation: "slide",
                easing: "swing",
                animationLoop: true,
                itemWidth: 1,
                itemMargin: 1,
                minItems: 2,
                maxItems: 5,
                controlNav: false,
                directionNav: false,
                move: 2
            });
            
            jQuery('#photo-flexslider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                itemWidth: 80,
                itemMargin: 0
            }); 
            
            jQuery('#testimonal_carousel').collapse({
                toggle: false
            });
        },

        //Counters 
        initCounter: function () {
            jQuery('.counter').counterUp({
                delay: 10,
                time: 1000
            });
        },

        //Parallax Backgrounds
        initParallaxBg: function () {
             jQuery(window).load(function() {
                jQuery('.parallaxBg').parallax("50%", 0.2);
                jQuery('.parallaxBg1').parallax("50%", 0.4);
            });
        },

    };

}();

E o resultado:

/* app-min.js */
var App=function(){function handleBootstrap(){jQuery('.carousel').carousel({interval:15000,pause:'hover'});jQuery('.tooltips').tooltip();jQuery('.tooltips-show').tooltip('show');jQuery('.tooltips-hide').tooltip('hide');jQuery('.tooltips-toggle').tooltip('toggle');jQuery('.tooltips-destroy').tooltip('destroy');jQuery('.popovers').popover();jQuery('.popovers-show').popover('show');jQuery('.popovers-hide').popover('hide');jQuery('.popovers-toggle').popover('toggle');jQuery('.popovers-destroy').popover('destroy');}
function handleSearch(){jQuery('.search').click(function(){if(jQuery('.search-btn').hasClass('fa-search')){jQuery('.search-open').fadeIn(500);jQuery('.search-btn').removeClass('fa-search');jQuery('.search-btn').addClass('fa-times');}else{jQuery('.search-open').fadeOut(500);jQuery('.search-btn').addClass('fa-search');jQuery('.search-btn').removeClass('fa-times');}});}
function handleToggle(){jQuery('.list-toggle').on('click',function(){jQuery(this).toggleClass('active');});}
function handleHeader(){jQuery(window).scroll(function(){if(jQuery(window).scrollTop()>100){jQuery(".header-fixed .header-sticky").addClass("header-fixed-shrink");}
else{jQuery(".header-fixed .header-sticky").removeClass("header-fixed-shrink");}});}
function handleMegaMenu(){jQuery(document).on('click','.mega-menu .dropdown-menu',function(e){e.stopPropagation()})}
return{init:function(){handleBootstrap();handleSearch();handleToggle();handleHeader();handleMegaMenu();},initSliders:function(){jQuery('#clients-flexslider').flexslider({animation:"slide",easing:"swing",animationLoop:true,itemWidth:1,itemMargin:1,minItems:2,maxItems:9,controlNav:false,directionNav:false,move:2});jQuery('#clients-flexslider1').flexslider({animation:"slide",easing:"swing",animationLoop:true,itemWidth:1,itemMargin:1,minItems:2,maxItems:5,controlNav:false,directionNav:false,move:2});jQuery('#photo-flexslider').flexslider({animation:"slide",controlNav:false,animationLoop:false,itemWidth:80,itemMargin:0});jQuery('#testimonal_carousel').collapse({toggle:false});},initCounter:function(){jQuery('.counter').counterUp({delay:10,time:1000});},initParallaxBg:function(){jQuery(window).load(function(){jQuery('.parallaxBg').parallax("50%",0.2);jQuery('.parallaxBg1').parallax("50%",0.4);});},};}();

Fonte: http://search.cpan.org/~pmichaux/JavaScript-Minifier-1.05/lib/JavaScript/Minifier.pm

É isso!

Página anterior    

Páginas do artigo
   1. Introdução
   2. JavaScript-Minifier
Outros artigos deste autor

Como Turbinar sua Produtividade com VIM - Guia Definitivo do Desenvolvedor

FISL 10: Venturas e desventuras da turma do VOL

Organizando projetos com a classe FastTemplate (parte 2)

Firefox 2 e seu recurso de proteção contra Web Phishing

Transferindo arquivos com o rsync

Leitura recomendada

MathML - Mathematical Markup Language

Como camuflar seu WhatsApp Web usando Snippets JavaScript

XSS - Cross Site Scripting

Novo tipo de vírus pode afetar tanto Windows quanto Linux

Por que o Javascript é ruim em matemática?

  
Comentários
[1] Comentário enviado por lcavalheiro em 15/04/2015 - 13:54h

Boa! Usuários de Vim e Emacs já possuem funções similares embutidas em seus editores de texto, mas a galerinha das IDEs com certeza vai precisar desse tipo de ajuda.
--
Luís Fernando Carvalho Cavalheiro
Public GPG signature: 0x246A590B
Licenciado Pleno em Filosofia pela Universidade do Estado do Rio de Janeiro
Mestrando em Medicina (Cardiologia) pela Universidade Federal do Rio de Janeiro

[2] Comentário enviado por fabio em 15/04/2015 - 14:00h


[1] Comentário enviado por lcavalheiro em 15/04/2015 - 13:54h

Boa! Usuários de Vim e Emacs já possuem funções similares embutidas em seus editores de texto, mas a galerinha das IDEs com certeza vai precisar desse tipo de ajuda.


Não sabia que o Vim possui tal função. Vou pesquisar sobre. Vim e Emacs tem hora que dão até medo! hehehe

[3] Comentário enviado por lcavalheiro em 15/04/2015 - 14:08h


[2] Comentário enviado por fabio em 15/04/2015 - 14:00h


[1] Comentário enviado por lcavalheiro em 15/04/2015 - 13:54h

Boa! Usuários de Vim e Emacs já possuem funções similares embutidas em seus editores de texto, mas a galerinha das IDEs com certeza vai precisar desse tipo de ajuda.


Não sabia que o Vim possui tal função. Vou pesquisar sobre. Vim e Emacs tem hora que dão até medo! hehehe


Então, eu estou aprendendo só agora o Emacs por conta de necessidade, mas desde 1996 eu sou vim-user (até pro dia-a-dia)... No vim é possível fazer isso tudo, definindo um imenso plugin que não passa de uma macro que faz esse tipo de coisa. Claro, cada uma dessas ações deverá ser definida manualmente no plugin, mas dá pra fazer de boa.

[4] Comentário enviado por Lisandro em 17/04/2015 - 07:04h

Ótima Fábio. Vou usar.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts