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!