POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.
Ze zkušeností doporučuji použít kvůli dvou důvodům:
- zmenšíte tím přenášená data
- a zbavíte se mnoha HTTP requestů.
Používám pro tyto účely Grunt s balíčky grunt-contrib-htmlmin, grunt-contrib-cssmin, grunt-contrib-uglify
(minifikuje JavaScript) a grunt-contrib-watch (sleduje změny souborů, okamžitě provádí operace pro minifikace a také sám díky livereloadu refreshne stránku).
Následující Gruntfile je ukázkou použití výše zmíněných balíčků:
module.exports = function(grunt) {
grunt.initConfig({
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'index.html': 'source.html', // 'destination': 'source'
}
}
},
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'dist/style.min.css': ['css/*.css']
}
}
},
uglify: {
options: {
mangle: false
},
target: {
files: {
'dist/script.min.js': ['js/*.js']
}
}
},
watch: {
options: {
// Start a live reload server on the default port 35729
livereload: true,
},
htmls: {
files: ['source.html'],
tasks: ['htmlmin'],
},
styles: {
files: ['css/*.css'],
tasks: ['cssmin'],
},
scripts: {
files: ['js/*.js'],
tasks: ['uglify'],
},
},
});
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['htmlmin', 'cssmin', 'uglify', 'watch']);
};
Pro okamžité použití můžete stáhnout můj projekt z GitHubu a pouze spustit (pokud už máte nainstalovaný Node.JS) dva příkazy v konzoli (první pro nainstalování balíčků a další pro spuštění Grunta:
npm install grunt
Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)