Minificare e unire CSS, JavaScript e HTML

Total.js 5 · total5@0.0.19 performancecssjavascripthtmlminification Eseguita con Total.js 5

Total.js minifica ciò che serve senza alcun passaggio di build. Un file .css o .js di public/ viene inviato senza commenti e spazi bianchi (il codice non viene rinominato né ristrutturato, solo compattato), e una stringa inviata con $.html() o una vista renderizzata perde i commenti HTML e gli spazi ripetuti vengono ridotti. Un file il cui nome contiene .min. (come library.min.js) è considerato già minificato e viene inviato così com'è.

Tre impostazioni del file config lo controllano, tutte true per impostazione predefinita: $minifyjs, $minifycss e $minifyhtml. Imposta una a false per servire quel tipo senza modifiche, utile quando fai il debug nel browser.

MERGE(url, file1, file2, ...) registra un file virtuale che è la concatenazione, minificata, dei file indicati. Il browser fa una richiesta invece di molte. I percorsi dei file sono URL della cartella public/.

public/css/app.css

/* the page style */
body {
	margin: 0;
	color: #000000;
}

public/js/app.js

// greeting
function hello(name) {
	var message = 'Hello ' + name;
	return message;
}

public/js/library.min.js

function   untouched ( ) { return  1 }

public/js/two.js

function two() { return 2; }

controllers/minify.js

exports.install = function() {
	ROUTE('GET /page/', page);
	MERGE('/all.js', '/js/app.js', '/js/two.js');
};

function page($) {
	$.html('<!DOCTYPE html>\n<html>\n  <body>\n    <!-- a note -->\n    <p>  Hello   world  </p>\n  </body>\n</html>');
}