MiniFront é um script em PHP para minimizar e unificar arquivos front-end (CSS e JavaScript), mas sem alterar os códigos em tempo de desenvolvimento, garantindo uma programação organizada e funcional para simples projetos WEB.
Durante o desenvolvimento você irá trabalhar com seus códigos normalmente, podendo separa-los conforme a organização do seu projeto. O MiniFront irá identificar o módulo WEB simulando a unificação dos seus arquivos. Quando fores publicar basta compilar e o SCFE irá unificar e minimizar os arquivos JS e CSS, garantindo performance do tempo de carregamento de suas páginas.
Exemplo / Documentação on-line
A estrutura de arquivos é livre, você utiliza conforme for melhor para o seu projeto.
Para isto é necessário um arquivo build.json, este deverá conter uma estrutura JSON com a sua hierarquia de diretorios e arquivos.
{
"version": "1",
"release": "1.0",
"css" : {
"main" : [
"sources/css/bootstrap.css",
"sources/css/bootstrap-responsive.css",
"sources/css/my-style.css"
]
},
"js": {
"codes": [
"sources/js/library/jquery.js",
"sources/js/library/bootstrap.js",
"sources/js/library/head.js",
"sources/js/library/strings.js",
"sources/js/plugins/jquery.plugin.maskedit.js",
"sources/js/api/api.js",
"sources/js/api/api.error.js",
"sources/js/api/api.http.js",
"sources/js/api/api.user.js"
]
}
}
No exemplo citado acima será gerado dois diretorios: css e js cada diretorio irá conter um arquivo css/main.css e js/codes.js cada um terá o conteúdo da sua respectiva lista de arquivos de forma unificada.
Para a build.json exemplificada acima devemos possuir a seguinte estrutura de arquivos.
seuprojeto/
├── sources/
│ ├── css
│ │ ├── bootstrap.css
│ │ ├── bootstrap-responsive.css
│ │ ├── my-style.css
│ ├── js
│ │ ├── api
│ │ │ ├── api.js
│ │ │ ├── api.error.js
│ │ │ ├── api.http.js
│ │ │ ├── api.user.js
│ │ ├── library
│ │ │ ├── jquery.js
│ │ │ ├── bootstrap.js
│ │ │ ├── head.js
│ │ │ ├── strings.js
│ │ ├── plugins
│ │ │ ├── jquery.plugin.maskedit.js
└── index.html
└── build.json
└── minifront.php
Observe: não criamos os diretórios de css e js, estes serão simulados pelo c em tempo de desenvolvimento e criados quando compilados.
Ao executar a aplicação teremos apenas um arquivo de JavaScript, mas durante o desenvolvimento os arquivos estão separados conforme suas caracteristicas, facilitando o desenvolvimento e manutenção.
Basta adicionar o ao seu HTML os nomes de cada arquivo definido na base do build.json. No nosso exemplo criamos dois arquivos principais js/codes.js e css/main.css
<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/codes.js"></script>
</body>
</html>
A partir do PHP 5.4.0 foi implementado um servidor web embutido para fins de desenvolvimento. Para executar o minifront basta executar o minifront.php como router.
php -S localhost:8000 minifront.php
PHP 5.4.7 Development Server started at Mon Oct 29 00:12:27 2012
Listening on http://localhost:8000
Document root is /var/www/minifront
Press Ctrl-C to quit.
Para executar no apache você deve criar um .htaccess (modo mod_rewrite deve estar habilitado), exemplo:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .(/)?$ minifront.php
</IfModule>
Para executar no Nginx você deve adicionar um location ao .conf da sua aplicação, exemplo:
location ~ (/<nome diretorio>/) {
if (-f $request_filename) {
break;
}
if (-d $request_filename) {
break;
}
rewrite ^(.*)$ /<nome diretorio>/minifront.php last;
break;
}
Desenvolvimento pronto! Agora vamos compilar e unificar os arquivos para colocarmos em produção.
Para Isto basta executar o scfe.php na linha de comando: $ php minifront.php
Iniciando compilacao de arquivos
===============================================================================|
verificando build...................................................... feito
- criando diretorio de cache ... feito
- [CSS] verificando arquivos
* unificando arquivo compiled/main.css
sources/css/bootstrap.css......................................... feito
sources/css/bootstrap-responsive.css.............................. feito
sources/css/my-style.css.......................................... feito
* comprimindo main.css............................................... feito
- [JS] verificando arquivos
* unificando arquivo compiled/codes.js
sources/js/library/jquery.js...................................... feito
sources/js/library/bootstrap.js................................... feito
sources/js/library/head.js........................................ feito
sources/js/library/strings.js..................................... feito
sources/js/plugins/jquery.plugin.maskedit.js...................... feito
sources/js/api/api.js............................................. feito
sources/js/api/api.error.js....................................... feito
sources/js/api/api.http.js........................................ feito
sources/js/api/api.user.js........................................ feito
* comprimindo codes.js............................................... feito
Feito! Publique os arquivos compilados e seja feliz.
Cleber Rodrigues
Copyright 2012 Twitter, Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.