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!
