Usando JSBuilder 2
Este artigo objetiva apresentar como utilizar o aplicativo JSBuilder 2 para gerar arquivos javascript únicos e compactados.
Visão Geral
Com ele é possível:
- Compactar JS e CSS (remoção de tabs, espaços, comentários, etc);
- Agrupar vários JS em arquivos distintos (módulos, arquivo único, etc). Também é possível criar arquivos de outros arquivos gerados. Ex: Posso gerar um js único para cada módulo e um arquivo que contenha todos os módulos. Este recurso pode facilitar o Debug.
- Organizar a ordem dos arquivos dentro dos arquivos únicos;
- Usar um arquivo JSON como configuração;
- Criar arquivos de Debug;
- Funciona bem com ISO-8859-1 e UTF-8
Problemas Encontrados:
- Não possui Interface Gráfica, tudo deve ser definido manualmente em um arquivo json;
- Não gera Documentação automaticamente;
Os arquivos base
Será utilizada como exemplo a estrutura de arquivos abaixo:
index.html teste.jsb2 js/ modulo1/ model.js view.js controller.js modulo2/ model.js view.js controller.js index.js
Download
Antes de mais nada você deve fazer o download do JSBuiler 2.
Aqui você também pode baixar os arquivos utilizados neste exemplo (JS’s, .jsb2, index.htm, JSBuilder2 e arquivos gerados):
Arquivos JSBuilder 2 (855,8 KiB, 34 hits)
O JSON de configuração
Para começar a utilizar o JSBuilder você deverá criar um arquivo de configuração com a extensão “.jsb2″.
Abaixo segue o exemplo de um arquivo de configuração (comentado) para a estrutura de diretórios exibida acima:
IMPORTANTE -> Os comentários são apenas para fins de tutorial. Para usar este arquivo os comentários devem ser removidos
{ //Nome do projeto projectName: 'Teste', //Diretório aonde serão gerados os arquivos deployDir: 'deploy', //Texto da licença licenseText: "Este arquivo está sob Domínio Público \n\nIsto permite que você possa utilizar este conteúdo livremente.", //pacotes dos arquivos pkgs: [ /** * Gera um arquivo único para o módulo 1 */ { //nome do arquivo name: 'Módulo 1', //nome do arquivo a ser gerado file: 'modulo1.js', //Indica se deve gerar arquivo de debug isDebug: true, //Arquivos incçuídos fileIncludes: [{ //Nome do arquivo a ser incluído text: 'model.js', //Caminho do arquivo. path: 'js/modulo1/' },{ text: 'view.js', path: 'js/modulo1/' },{ text: 'controller.js', path: 'js/modulo1/' }] }, /** * Gera um arquivo único para o módulo 2 */ { name: 'Módulo 2', file: 'modulo2.js', isDebug: true, fileIncludes: [{ text: 'model.js', path: 'js/modulo2/' },{ text: 'view.js', path: 'js/modulo2/' },{ text: 'controller.js', path: 'js/modulo2/' }] }, /** * Gera um arquivo único para o Index */ { name: 'INDEX', file: 'index.js', isDebug: true, fileIncludes: [{ text: 'index.js', path: 'js/' }] }, /** * Gera um arquivo único que agrupa os três arquivos gerados acima. */ { name: 'All', file: 'all.js', isDebug: true, //Indica se os pacotes de dependência (pckgDeps) devem ser incluídos neste arquivo (all.js) includeDeps: true, //Indica os pacotes (arquivos) de dependência pkgDeps: [ 'index.js', 'modulo1.js', 'modulo2.js' ], //Neste caso não inclui mais nenhum arquivo além dos pacotes fileIncludes: [] } ], /** * Indica onde estão e para onde vão os arquivos base para a geração. * Todos os arquivos usados (neste caso por exemplo: "modulo1/model.js", "modulo2/controller.js", etc) * são copiados também para o diretório que será criado com os arquivos compactados */ resources: [{ //raiz dos arquivos javascript src: 'js/', //raiz dentro do diretório gerado (aonde serão colocadas as cópias dos arquivos originais) dest: 'src/', //Filtros (arquivos que devem ser copiados destas pastas) filters: ".*\\.js" }] }
IMPORTANTE: Para que os arquivos orginais não sejam copiados para o diretório de Implementação você pode deixar o array resources vazio (Ex: resources: []).
Executando o arquivo
O JSBuilder é um programa JAVA que deve ser executado em linha de compando (aqui feito no Windows):
java -jar C:\JSBuilder2\JSBuilder2.jar --projectFile C:\xampp\htdocs\dev\teste\jsbuilder\teste.jsb2 --homeDir C:\xampp\htdocs\dev\teste\jsbuilder\deploy\
IMPORTANTE: É obrigatório indicar o caminho completo do “projectFile” e do “homeDir”.
Os erros mais comuns que ocorreram comigo foram:
- Erro de sintaxe do JSON:
- “Expected a ‘,’ or ‘]’ at character 1332″ -> Esqueci uma vírgula ou faltou fechar um array;
- “Expected a ‘,’ or ‘]’ at character 1332″ -> Deixei um comentário no ínicio do JSON.
- Erro de caminho de arquivo:
- “Unable to access jarfile C:\JSBuider2.jar” -> Caminho do JSBuilder errado;
- “java.io.FileNotFoundException: C:\teste.jsb2″ -> Erro no endereço do arquivo de configuração.
Arquivos Gerados
Após a geração, a estrutura dos arquivos ficou da seguinte maneira:
index.html
teste.jsb2
js/
modulo1/
model.js
view.js
controller.js
modulo2/
model.js
view.js
controller.js
index.js
deploy/
/src
modulo1/
model.js
view.js
controller.js
modulo2/
model.js
view.js
controller.js
index.js
all.js
all-debug.js
index.js
index-debug.js
modulo1.js
modulo1-debug.js
modulo2.js
modulo2-debug.js
Conclusão
Além das opões aqui apresentadas existem algumas outras nas quais não me aprofundei. Você pode conhecer todas na página do JSBuilder ou nos fóruns do ExtJS.
Nos arquivos que coloquei para download também está presente o arquivo jsb2 usado para geração do código do ExtJS (pego pelo fórum).
Este tutorial foi desenvolvido como parte do meu trabalho na empresa IASOFT.
Não garanto que poderei ajudar tirando dúvidas ou corrigindo erros, mas farei o possível.
Comentários Recentes