Build e Uglify delle applicazioni JavascriptMVC

02 Maggio 2012 Javascript
ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

JavascriptMVC integra un builder che permette di riunire i files js e css richiamati tramite steal() in 2 files unici per l'ambiente di produzione:

  • production.js
  • production.css

Questi 2 files vengono inoltre compressi. Per i files .js la compressione di default è eseguita tramite Google Closures ma è possibile velocizzare il processo utilizzando la libreria Uglify che permette di eseguire le stesse operazioni in circa 1/10 del tempo. L'unico requisito di tale libreria è l'utilizzo di NodeJS. In ambiente Windows è molto semplice: basta infatti scaricare il file node.exe dal sito principale (http://nodejs.org/#download) e copiarlo nella cartella dell'applicazione (ovvero nella stessa directory del file js.bat). Il file singolo è scaricabile dal link "Other relase files". Di seguito i passaggi da seguire per il build dell'applicazione. Ipotizziamo di aver creato un'applicazione con questa struttura:

  • - js
  • — myapp
  • —— directory_applicazione_1
  • —— directory_applicazione_2
  • —— myapp.js (file iniziale dell’applicazione)
  • —— build
  • ——— build.html
  • ——— build.js
  • — jquery
  • — steal
  • — js
  • — js.bat
  • — node.exe

I files all'interno della directory "build" servono per la configurazione del processo di build. Il file build.html serve per caricare il file principale dell'applicazione ed ha la seguente struttura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>todo Build Page</title>
</head>
<body>
<h1>todo Build Page</h1>
<p>This is a dummy page that loads your app so steal can
get all the files.
</p>
<script type='text/javascript'
src='../../steal/steal.js?myapp/myapp.js'>
</script>
</body>
</html>

Il file build.js invece permette di configurare la directory di destinazione e il tipo di compressione:

load('steal/rhino/rhino.js');
steal(
'steal/build',
'steal/build/scripts',
'steal/build/styles',
function(){
steal.build('myapp/build/build.html', {
to: 'myapp', //directory di destinazione dei files compressi
compressor: 'uglify' //tipo di compressione
});
});

A questo punto per completare la procedura (in ambiente Windows) è necessario lanciare il file "js.bat" tramite cmd oppure semplicemente con un doppio click sul file e scrivere: [code lang="shell"] load('myapp/build/build.js') In questo modo, se non vengono trovati errori, verrà creato il file production.js nella directory "myapp" (o in altra directory se configurato diversamente all'interno del file myapp/build/build.js), contenente tutti i files necessari per l'applicazione compressi e offuscati.

Commenti