CSS, JavaScript und HTML minifizieren und zusammenführen

Total.js 5 · total5@0.0.19 performancecssjavascripthtmlminification Mit Total.js 5 ausgeführt

Total.js minifiziert, was es ausliefert, ohne jeden Build-Schritt. Eine .css- oder .js-Datei aus public/ wird ohne Kommentare und Leerraum gesendet (der Code wird nicht umbenannt oder umstrukturiert, nur verdichtet), und eine mit $.html() gesendete Zeichenkette oder eine gerenderte View verliert ihre HTML-Kommentare, und wiederholte Leerzeichen werden zusammengefasst. Eine Datei, deren Name .min. enthält (etwa library.min.js), gilt bereits als minifiziert und wird unverändert gesendet.

Drei Einstellungen in der Datei config steuern das, alle standardmäßig true: $minifyjs, $minifycss und $minifyhtml. Setze eine auf false, um diesen Typ unverändert auszuliefern, was beim Debuggen im Browser praktisch ist.

MERGE(url, file1, file2, ...) registriert eine virtuelle Datei, die die minifizierte Verkettung der angegebenen Dateien ist. Der Browser stellt eine Anfrage statt vieler. Dateipfade sind URLs des Ordners 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>');
}