[Resolvido] Otimização de Javascript e CSS com CodeIgniter e Minf

[RSS iMasters 5]

Não é necessário discorrer sobre a importância do Javascripte do CSS bastando apenas citar alguns poucos exemplos como a validação de formulários,criação de elementos de interface como acordions e menus e citar alguns dosmuitos plug-ins para desenvolvimento que agregam funcionalidades como geração degráficos e data-grids para que fique clara a importância de manter uma boaestrutura destes arquivos em sua aplicação ou página da web.

 

Quando mais funcionalidades desejadas, mais arquivos .js e.css teremos, tomemos por exemplo uma página que contenha o arquivo compactadoda JQuery, um plugin de calendário da JQuery UI e mais um arquivo .js para funçõesgerais do website, somados os arquivos .css necessários para o website e para ageração do calendário. Este exemplo nos daria pelo menos 5 arquivos distintospara compactar e carregar.

 

Há tempos vem sendo usada a técnica de compactar os arquivosjavascript e css removendo comentários, linhas em branco, espaços desnecessáriose quebras de linha com a finalidade de diminuir o tempo de carregamentoon-line.

 

É interessante também diminuir o número de requisições httpfeitas ao servidor pelo browser, sendo que, se possível unir todos os arquivos.js em um único arquivo diminuiremos a quantidade de requisições, fazendo omesmo com o .css estaremos contribuindo para um carregamento mais ágil.

 

Toda vez que iniciamos um projeto teremos que escolher quaissão as bibliotecas e plug-ins que iremos utilizar bem como referenciar em nossoheader html estes arquivos.

 

Cansado desta tarefa repetitiva fui buscar uma solução quefosse a mais simples e menos trabalhosa possível, gostaria de uma solução que ?encontrasse?os arquivos .css e .js em uma pasta e fizesse o restante do trabalho paramim.  Acabei encontrando o Minify emelhor que isso, já existe um Driver * (Library) para o CodeIgniter 2.0.x.

 

Neste artigo estou descrevendo a forma como eu uso, mas éclaro que existem muitas outras maneiras de integrar seus arquivos com estasolução.

 

 

Passo 1 - Baixando a biblioteca

O primeiro passo é baixar o CI-Minify, você encontrará o link (e também maisinformações sobre como usar) aqui.

 

Então descompacte o arquivo e copie a pasta ?Minify? queestá dentro da pasta ?libraries? do arquivo .zip para a sua pasta application/librariesconforme mostrado na figura 1.0

 

 

A partir deste momento já é possível utilizar a biblioteca Minify,contudo é importante observar que, por se tratar de um Driver, não serápossível carregar pelo autoload, você precisará carregar este driver a partirde um controlador.

 

 

Passo 2 - Organizando os arquivos

Vamos analisar a estrutura daspastas e arquivos que serão utilizadas neste exemplo. Na figura 2.0 está a estruturade pastas que contém os arquivos .css e .js  que estou utilizando em meu projeto.

 

 

Note que tenho um pasta chamada assets na raiz da aplicaçãocom as seguintes subpastas .

 

js ? Esta pasta contem os arquivos Javascript originais semcompactação, estes arquivos podem ser editados facilmente, caso existamarquivos compactados aqui dentro, também não tem problema.

 

css ? É a pasta onde estão os arquivos .css originais, eles estãoidentados e organizados para facilitar a edição.

 

ie_css ? Esta é uma pasta auxiliar onde deixo os arquivoscss específicos para corrigir problemas com o IE. Não quero estes arquivoscarregando o tempo todo, portanto, não os adiciono ao arquivo final compactado.

 

min ? Que irá guardar os dois arquivos gerados pelo Minify,um css e um js. Nesta pasta eu armazeno também a JQuery já compactada, tive queutilizar esta abordagem porque preciso que ela seja carregada antes dos outrosscripts e tive como quero compactar a pasta js toda de uma vez não é possível definira ordem dos arquivos a compactar.

 

imgs ? A pasta de imagens da minha aplicação (não relevantepara nosso exemplo).

 

O que vai ocorrer é que a Minify irá buscar todos osarquivos na pasta css e na pasta js e compactar criando apenas duas saídas napasta min.

 

 

Passo 3 - Gerando os arquivos compactados

Para efetuar esta ação estamos colocando oseguido código no construtor da minha classe ?home? que é a classe que defini  em default_controller no arquivo deconfiguração routes.php. De modo que cada vez que a aplicação for carregadaserão gerados dois novos arquivos com o CSS e JS. Se você preferir (ou acharmais semântico) poderá criar um método para isto.

 

<?php if(!defined('BASEPATH')) exit('No direct script access allowed');

class Home extends CI_Controller {

       function __construct(){

             parent::__construct();

             $this->load->driver('minify');

             $csss = $this->minify->combine_directory('assets/css/');

             $this->minify->save_file($csss,'assets/min/minified.css');

             $jss =$this->minify->combine_directory('assets/js/');

             $this->minify->save_file($jss,'assets/min/minified.js'); 

}

}Chamei meus arquivos respectivamente de minfied.css eminified.js

 

 

Passo 4 - Utilizando os arquivos compactados

Para utilizar os arquivos você simplesmente irá incluí-losem suas views conforme faria com qualquer outro arquivo .css e .js. Parasimplificar esta tarefa eu construí uma view parcial e salvei em uma pastachamada libraries dentro da pasta views com o nome de arquivo html-header.html.Veja a seguir o método no controlador que chama a minha tela de login.

 

function index(){

$this->load->view('libraries/html-header');

$this->load->view('login');

$this->load->view('libraries/html-footer');

}Desta forma posso compartilhar o mesmo cabeçalho html emtodo o website me preocupando apenas em construir o corpo das paginas propriamentedito.

 

A seguir está o código da view parcial html-header quecarrega os arquivos compactados.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <link rel="stylesheet" href="<?php echo base_url();?>assets/min/minified.css" type="text/css" media="screen"/>

        <!--[if IE]>

            <link rel="stylesheet" href="<?php echo base_url();?>assets/ie_css/ie.css" type="text/css" media="screen"/>

        <![endif]-->

        <!--[if IE 7]>

        <link rel="stylesheet" href="<?php echo base_url();?>assets/ie_css/ie7.css" type="text/css" media="screen"/>

        <![endif]-->

        <!--[if IE 6]>

        <link rel="stylesheet" href="<?php echo base_url();?>assets/ie_css/ie6.css" type="text/css" media="screen"/>

        <![endif]-->

        <script type="text/javascript" language="JavaScript">

            var base_url = "<?php echo base_url();?>";

        </script>

        <script type="text/javascript" src="<?php echo base_url();?>assets/min/jquery.js"></script>

        <script type="text/javascript" src="<?php echo base_url();?>assets/min/minified.js"></script>    

        <title>SISTEMA DE GESTÃO DE PEDIDOS</title>

    </head>

    <body>Note que a JQuery está sendo carregada separadamente e todosos outros arquivos .js vem do resultado da compactação pelo Driver Minify quegerou o arquivo minified.js. Desta forma, quando quisermos uma novafuncionalidade javascript ou houver a necessidade de incluir um novo arquivo.css basta incluir na pasta e na próxima vez que o sistema for carregado eleserá automaticamente incluído no arquivo compactado.

 

Os arquivos relativos as correções do IE continuam sendocarregados do modo tradicional e poderão ser minimizados separadamente sedesejado.

 

Em meu header html incluo uma variável global JavaScriptcamada base_url onde guardo a o caminho base da aplicação ou website parautilizar em requisições Ajax etc.

 

Espero que tenha sido útil. Abraço e até a próxima!

 

 

 

http://imasters.com.br/artigo/21521/codeigniter/otimizacao-de-javascript-e-css-com-codeigniter-e-minfy-minimizando-e-unindo-arquivos-css-e-js