CSS, JavaScript en HTML minificeren en samenvoegen

Total.js 5 · total5@0.0.19 performancecssjavascripthtmlminification Uitgevoerd met Total.js 5

Total.js minificeert wat het levert, zonder enige buildstap. Een .css- of .js-bestand uit public/ wordt zonder commentaar en witruimte verstuurd (de code wordt niet hernoemd of herstructureerd, alleen compacter gemaakt), en een tekenreeks die met $.html() wordt verstuurd of een gerenderde view verliest zijn HTML-commentaar en herhaalde spaties worden samengevoegd. Een bestand waarvan de naam .min. bevat (zoals library.min.js) wordt al als geminificeerd beschouwd en onveranderd verstuurd.

Drie instellingen in het bestand config regelen dit, allemaal standaard true: $minifyjs, $minifycss en $minifyhtml. Zet er een op false om dat type onveranderd te leveren, handig als je in de browser debugt.

MERGE(url, file1, file2, ...) registreert een virtueel bestand dat de geminificeerde samenvoeging van de opgegeven bestanden is. De browser doet één verzoek in plaats van vele. Bestandspaden zijn URL's van de map 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>');
}