Não é necessário discorrer sobre a importância do Javascript e 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 dos muitos plug-ins para desenvolvimento que agregam funcionalidades como geração de gráficos e data-grids para que fique clara a importância de manter uma boa estrutura 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 compactado da JQuery, um plugin de calendário da JQuery UI e mais um arquivo .js para funções gerais do website, somados os arquivos .css necessários para o website e para a geração do calendário. Este exemplo nos daria pelo menos 5 arquivos distintos para compactar e carregar.

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

É interessante também diminuir o número de requisições http feitas 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 o mesmo com o .css estaremos contribuindo para um carregamento mais ágil.

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

Cansado desta tarefa repetitiva fui buscar uma solução que fosse 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 para mim.  Acabei encontrando o Minify e melhor 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 esta solução.

Passo 1 - Baixando a biblioteca

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

Então descompacte o arquivo e copie a pasta “Minify” que está dentro da pasta “libraries” do arquivo .zip para a sua pasta application/libraries conforme 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 partir de um controlador.

Passo 2 - Organizando os arquivos

Vamos analisar a estrutura das pastas e arquivos que serão utilizadas neste exemplo. Na figura 2.0 está a estrutura de 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ção com as seguintes subpastas .

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

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

ie_css – Esta é uma pasta auxiliar onde deixo os arquivos css específicos para corrigir problemas com o IE. Não quero estes arquivos carregando 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 que utilizar esta abordagem porque preciso que ela seja carregada antes dos outros scripts e tive como quero compactar a pasta js toda de uma vez não é possível definir a ordem dos arquivos a compactar.

imgs – A pasta de imagens da minha aplicação (não relevante para nosso exemplo).

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

Passo 3 - Gerando os arquivos compactados

Para efetuar esta ação estamos colocando o seguido código no construtor da minha classe “home” que é a classe que defini  em default_controller no arquivo de configuração routes.php. De modo que cada vez que a aplicação for carregada serão gerados dois novos arquivos com o CSS e JS. Se você preferir (ou achar mais 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 e minified.js

Passo 4 - Utilizando os arquivos compactados

Para utilizar os arquivos você simplesmente irá incluí-los em suas views conforme faria com qualquer outro arquivo .css e .js. Para simplificar esta tarefa eu construí uma view parcial e salvei em uma pasta chamada 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 em todo o website me preocupando apenas em construir o corpo das paginas propriamente dito.

A seguir está o código da view parcial html-header que carrega 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 todos os outros arquivos .js vem do resultado da compactação pelo Driver Minify que gerou o arquivo minified.js. Desta forma, quando quisermos uma nova funcionalidade 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 ele será automaticamente incluído no arquivo compactado.

Os arquivos relativos as correções do IE continuam sendo carregados do modo tradicional e poderão ser minimizados separadamente se desejado.

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

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