{"id":3764,"date":"2015-04-20T12:03:09","date_gmt":"2015-04-20T15:03:09","guid":{"rendered":"http:\/\/www.viazap.com.br\/?p=3764"},"modified":"2015-04-19T23:06:26","modified_gmt":"2015-04-20T02:06:26","slug":"como-minimizar-css-e-javascript-via-linha-de-comando","status":"publish","type":"post","link":"https:\/\/blog.clusterweb.com.br\/?p=3764","title":{"rendered":"COMO MINIMIZAR CSS E JAVASCRIPT VIA LINHA DE COMANDO"},"content":{"rendered":"<h1>INTRODU\u00c7\u00c3O<\/h1>\n<p>&nbsp;<\/p>\n<div><em>Minimizar<\/em> arquivos <em>CSS<\/em> e <em>Javascript<\/em> \u00e9 o processo de remo\u00e7\u00e3o de caracteres desnecess\u00e1rios, tais como espa\u00e7os, tabula\u00e7\u00f5es, coment\u00e1rios, abreviar vari\u00e1veis etc. O objetivo \u00e9 reduzir o tamanho dos arquivos e consequentemente acelerar o processo de download e renderiza\u00e7\u00e3o de uma p\u00e1gina web.<\/p>\n<p>Para esta tarefa existem dezenas de ferramentas online, mas o objetivo do artigo \u00e9 apresentar formas de obter o mesmo resultado a partir do terminal <a href=\"http:\/\/www.vivaolinux.com.br\/linux\/\">GNU\/Linux<\/a>, afinal de contas nada \u00e9 mais produtivo que a boa e velha tela preta!<br \/>\n<!--more--><\/p>\n<h1>CLEAN-CSS<\/h1>\n<p>Nesta p\u00e1gina vamos conhecer o <em>clean-css<\/em>, ferramenta usada para minimizar arquivos CSS e que est\u00e1 dispon\u00edvel nos reposit\u00f3rios das principais distribui\u00e7\u00f5es.<\/p>\n<p>Para instalar em Debian\/Ubuntu e derivados:<\/p>\n<p><strong>$ sudo apt-get install cleancss<\/strong><\/p>\n<p>N\u00e3o testei em outras distribui\u00e7\u00f5es, caso n\u00e3o encontre o pacote, baixe-o pelo <em>GitHub<\/em>:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/jakubpawlowicz\/clean-css\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/jakubpawlowicz\/clean-css<\/a><\/li>\n<\/ul>\n<p>NOTA: clean-css depende do <a href=\"http:\/\/nodejs.org\/\" target=\"_blank\" rel=\"nofollow\">Node.js<\/a> para ser instalado.<\/p>\n<p>Alternativamente, se voc\u00ea j\u00e1 tiver o Node.js instalado no sistema, pode instalar o clean-css pelo <em>npm<\/em>:<\/p>\n<p><strong>$ sudo npm install clean-css<\/strong><\/p>\n<h1>MINIMIZANDO CSS<\/h1>\n<p>A melhor forma de explicar o funcionamento da ferramenta \u00e9 com exemplos pr\u00e1ticos, ent\u00e3o vamos l\u00e1!<\/p>\n<p>Supondo que voc\u00ea tenha uma folha de estilo chamada estilo.css com o seguinte conte\u00fado:<\/p>\n<pre class=\"prettyprint\">body {\r\n\tpadding-left: 11em;\r\n\tfont-family: Georgia, \"Times New Roman\", Times, serif;\r\n\tcolor: purple;\r\n\tbackground-color: #d8da3d \r\n}\r\n\r\nul.navbar {\r\n\tlist-style-type: none;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tposition: absolute;\r\n\ttop: 2em;\r\n\tleft: 1em;\r\n\twidth: 9em \r\n}\r\n\r\nh1 {\r\n\tfont-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif \r\n}\r\n\r\nul.navbar li {\r\n\tbackground: white;\r\n\tmargin: 0.5em 0;\r\n\tpadding: 0.3em;\r\n\tborder-right: 1em solid black \r\n}\r\n\r\nul.navbar a {\r\n\ttext-decoration: none \r\n}\r\n\r\na:link {\r\n\tcolor: blue \r\n}\r\n\r\na:visited {\r\n\tcolor: purple \r\n}\r\n\r\naddress {\r\n\tmargin-top: 1em;\r\n\tpadding-top: 1em;\r\n\tborder-top: thin dotted \r\n}\r\n<\/pre>\n<p>Para minimiz\u00e1-la faremos:<\/p>\n<p><strong>$ cleancss -o estilo-min.css estilo.css<\/strong><\/p>\n<p>Como sa\u00edda (-o) teremos o arquivo estilo-min.css, que ficar\u00e1 assim:<\/p>\n<pre class=\"prettyprint\">body{padding-left:11em;font-family:Georgia,\"Times New Roman\",Times,serif;color:purple;background-color:#d8da3d}ul.navbar{list-style-type:none;padding:0;margin:0;position:absolute;top:2em;left:1em;width:9em}h1{font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif}ul.navbar li{background:#fff;margin:.5em 0;padding:.3em;border-right:1em solid #000}ul.navbar a{text-decoration:none}a:link{color:#00f}a:visited{color:purple}address{margin-top:1em;padding-top:1em;border-top:thin dotted}\r\n<\/pre>\n<p>Outras formas de uso:<\/p>\n<p><strong>$ cleancss estilo.css<br \/>\n$ cleancss estilo.css &gt; estilo-min.css<br \/>\n$ cat estilo1.css estilo2.css estilo3.css | cleancss -o estilo-todos-min.css<\/strong><\/p>\n<p>Fonte: <a href=\"https:\/\/github.com\/jakubpawlowicz\/clean-css\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/jakubpawlowicz\/clean-css<\/a><\/p>\n<p>Na pr\u00f3xima p\u00e1gina veremos como otimizar arquivos Javascript.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h1>JAVASCRIPT-MINIFIER<\/h1>\n<p>&nbsp;<\/p>\n<div><em>JavaScript-Minifier<\/em> \u00e9 um m\u00f3dulo em <em>Perl<\/em> usado para minimizar\/otimizar arquivos JS.<\/p>\n<p>Partindo do princ\u00edpio de que j\u00e1 tenha o Perl instalado em seu sistema, o pr\u00f3ximo passo \u00e9 instalar o m\u00f3dulo.<\/p>\n<p>Em Debian\/Ubuntu e derivados isso pode ser feito com o seguinte comando:<\/p>\n<p><strong>$ sudo apt-get install libjavascript-minifier-perl<\/strong><\/p>\n<p>Nas demais distribui\u00e7\u00f5es (incluindo Debian\/Ubuntu), \u00e9 poss\u00edvel instalar o m\u00f3dulo usando o shell CPAN:<\/p>\n<p><strong>$ sudo perl -MCPAN -e shell<\/strong><br \/>\ncpan&gt; <strong>install JavaScript::Minifier<\/strong><\/p>\n<p>Leitura recomendada: <a href=\"http:\/\/www.vivaolinux.com.br\/artigo\/A-forma-correta-de-se-instalar-modulos-Perl\/\">A forma correta de se instalar m\u00f3dulos Perl [Artigo]<\/a><\/p>\n<p>Agora vamos criar o Perl script que ser\u00e1 usado para minimizar arquivos JS:<\/p>\n<p><strong>$ sudo vim \/usr\/local\/bin\/jsmin.pl<\/strong><\/p>\n<pre class=\"prettyprint\">#!\/usr\/bin\/perl\r\n\r\nmy $source = shift;\r\n\r\nif (! -f $source) { \r\n\tprint \"Use: $0 &lt;input-file&gt;\\n\\n\";\r\n}\r\n\r\nuse JavaScript::Minifier qw(minify);\r\n\r\nopen(INFILE, $source) or die;\r\nprint minify(input =&gt; *INFILE);\r\nclose(INFILE);\r\n<\/pre>\n<p>Salve e saia. O c\u00f3digo, al\u00e9m de ser auto-explicativo, n\u00e3o \u00e9 o foco do artigo. Apenas transcreva-o e em seguida torne-o execut\u00e1vel:<\/p>\n<p><strong>$ sudo chmod a+x \/usr\/local\/bin\/jsmin.pl<\/strong><\/p>\n<p>Pronto! J\u00e1 podemos usar o comando <strong>jsmin.pl<\/strong> para minimizar nossos scripts. Exemplo:<\/p>\n<p><strong>$ jsmin.pl app.js &gt; app-min.js<\/strong><\/p>\n<p>Compare o c\u00f3digo original com o c\u00f3digo gerado e veja a diferen\u00e7a:<\/p>\n<pre class=\"prettyprint\">\/* app.js original *\/\r\n\/*\r\n * Template Name: Unify - Responsive Bootstrap Template\r\n * Description: Business, Corporate, Portfolio, E-commerce and Blog Theme.\r\n * Version: 1.6\r\n * Author: @htmlstream\r\n * Website: http:\/\/htmlstream.com\r\n*\/\r\n\r\nvar App = function () {\r\n    \/\/Bootstrap Tooltips and Popovers\r\n    function handleBootstrap() {\r\n        \/*Bootstrap Carousel*\/\r\n        jQuery('.carousel').carousel({\r\n            interval: 15000,\r\n            pause: 'hover'\r\n        });\r\n\r\n        \/*Tooltips*\/\r\n        jQuery('.tooltips').tooltip();\r\n        jQuery('.tooltips-show').tooltip('show');      \r\n        jQuery('.tooltips-hide').tooltip('hide');       \r\n        jQuery('.tooltips-toggle').tooltip('toggle');       \r\n        jQuery('.tooltips-destroy').tooltip('destroy');       \r\n\r\n        \/*Popovers*\/\r\n        jQuery('.popovers').popover();\r\n        jQuery('.popovers-show').popover('show');\r\n        jQuery('.popovers-hide').popover('hide');\r\n        jQuery('.popovers-toggle').popover('toggle');\r\n        jQuery('.popovers-destroy').popover('destroy');\r\n    }\r\n\r\n    \/\/Search Box (Header)\r\n    function handleSearch() {    \r\n        jQuery('.search').click(function () {\r\n            if(jQuery('.search-btn').hasClass('fa-search')){\r\n                jQuery('.search-open').fadeIn(500);\r\n                jQuery('.search-btn').removeClass('fa-search');\r\n                jQuery('.search-btn').addClass('fa-times');\r\n            } else {\r\n                jQuery('.search-open').fadeOut(500);\r\n                jQuery('.search-btn').addClass('fa-search');\r\n                jQuery('.search-btn').removeClass('fa-times');\r\n            }   \r\n        }); \r\n    }\r\n\r\n    \/\/Sidebar Navigation Toggle\r\n    function handleToggle() {\r\n        jQuery('.list-toggle').on('click', function() {\r\n            jQuery(this).toggleClass('active');\r\n        });\r\n\r\n        \/*\r\n        jQuery('#serviceList').on('shown.bs.collapse'), function() {\r\n            jQuery(\".servicedrop\").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');\r\n        }\r\n\r\n        jQuery('#serviceList').on('hidden.bs.collapse'), function() {\r\n            jQuery(\".servicedrop\").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');\r\n        }\r\n        *\/\r\n    }\r\n\r\n    \/\/Fixed Header\r\n    function handleHeader() {\r\n         jQuery(window).scroll(function() {\r\n            if (jQuery(window).scrollTop()&gt;100){\r\n                jQuery(\".header-fixed .header-sticky\").addClass(\"header-fixed-shrink\");\r\n            }\r\n            else {\r\n                jQuery(\".header-fixed .header-sticky\").removeClass(\"header-fixed-shrink\");\r\n            }\r\n        });\r\n    }\r\n\r\n    \/\/Header Mega Menu\r\n    function handleMegaMenu() {\r\n        jQuery(document).on('click', '.mega-menu .dropdown-menu', function(e) {\r\n            e.stopPropagation()\r\n        })\r\n    }\r\n\r\n    return {\r\n        init: function () {\r\n            handleBootstrap();\r\n            handleSearch();\r\n            handleToggle();\r\n            handleHeader();\r\n            handleMegaMenu();\r\n        },\r\n\r\n        \/\/Clients Logo\r\n        initSliders: function () {\r\n            jQuery('#clients-flexslider').flexslider({\r\n                animation: \"slide\",\r\n                easing: \"swing\",\r\n                animationLoop: true,\r\n                itemWidth: 1,\r\n                itemMargin: 1,\r\n                minItems: 2,\r\n                maxItems: 9,\r\n                controlNav: false,\r\n                directionNav: false,\r\n                move: 2\r\n            });\r\n            \r\n            jQuery('#clients-flexslider1').flexslider({\r\n                animation: \"slide\",\r\n                easing: \"swing\",\r\n                animationLoop: true,\r\n                itemWidth: 1,\r\n                itemMargin: 1,\r\n                minItems: 2,\r\n                maxItems: 5,\r\n                controlNav: false,\r\n                directionNav: false,\r\n                move: 2\r\n            });\r\n            \r\n            jQuery('#photo-flexslider').flexslider({\r\n                animation: \"slide\",\r\n                controlNav: false,\r\n                animationLoop: false,\r\n                itemWidth: 80,\r\n                itemMargin: 0\r\n            }); \r\n            \r\n            jQuery('#testimonal_carousel').collapse({\r\n                toggle: false\r\n            });\r\n        },\r\n\r\n        \/\/Counters \r\n        initCounter: function () {\r\n            jQuery('.counter').counterUp({\r\n                delay: 10,\r\n                time: 1000\r\n            });\r\n        },\r\n\r\n        \/\/Parallax Backgrounds\r\n        initParallaxBg: function () {\r\n             jQuery(window).load(function() {\r\n                jQuery('.parallaxBg').parallax(\"50%\", 0.2);\r\n                jQuery('.parallaxBg1').parallax(\"50%\", 0.4);\r\n            });\r\n        },\r\n\r\n    };\r\n\r\n}();\r\n<\/pre>\n<p>E o resultado:<\/p>\n<pre class=\"prettyprint\">\/* app-min.js *\/\r\nvar 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');}\r\nfunction 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');}});}\r\nfunction handleToggle(){jQuery('.list-toggle').on('click',function(){jQuery(this).toggleClass('active');});}\r\nfunction handleHeader(){jQuery(window).scroll(function(){if(jQuery(window).scrollTop()&gt;100){jQuery(\".header-fixed .header-sticky\").addClass(\"header-fixed-shrink\");}\r\nelse{jQuery(\".header-fixed .header-sticky\").removeClass(\"header-fixed-shrink\");}});}\r\nfunction handleMegaMenu(){jQuery(document).on('click','.mega-menu .dropdown-menu',function(e){e.stopPropagation()})}\r\nreturn{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);});},};}();\r\n<\/pre>\n<p>Fonte: <a href=\"http:\/\/search.cpan.org\/~pmichaux\/JavaScript-Minifier-1.05\/lib\/JavaScript\/Minifier.pm\" target=\"_blank\" rel=\"nofollow\">http:\/\/search.cpan.org\/~pmichaux\/JavaScript-Minifier-1.05\/lib\/JavaScript\/Minifier.pm<\/a><\/p>\n<p>\u00c9 isso!<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>INTRODU\u00c7\u00c3O &nbsp; Minimizar arquivos CSS e Javascript \u00e9 o processo de remo\u00e7\u00e3o de caracteres desnecess\u00e1rios, tais como espa\u00e7os, tabula\u00e7\u00f5es, coment\u00e1rios, abreviar vari\u00e1veis etc. O objetivo \u00e9 reduzir o tamanho dos arquivos e consequentemente acelerar o processo de download e renderiza\u00e7\u00e3o de uma p\u00e1gina web. Para esta tarefa existem dezenas de ferramentas online, mas o objetivo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[455,91,1,730,830,725,42,51,439,552,495,514,68,271,548],"tags":[267,378,885,353,351,886,887,884,574],"class_list":["post-3764","post","type-post","status-publish","format-standard","hentry","category-apache2","category-banco-de-dados","category-viazap","category-clusterweb","category-debian","category-hospedagem","category-leitura-recomendada","category-linux-linuxrs","category-midia","category-postgresql","category-profissional-de-ti","category-programacao","category-redes-2","category-seguranca-2","category-ubuntu-2","tag-comando","tag-como","tag-css","tag-de","tag-e","tag-javascript","tag-linha","tag-minimizar","tag-via"],"_links":{"self":[{"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=\/wp\/v2\/posts\/3764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3764"}],"version-history":[{"count":1,"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=\/wp\/v2\/posts\/3764\/revisions"}],"predecessor-version":[{"id":3765,"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=\/wp\/v2\/posts\/3764\/revisions\/3765"}],"wp:attachment":[{"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.clusterweb.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}