Optimisation is usually the last thing to pay attention to. If however, you already have a separate public folder that you are serving from you might as well get get some performance improvements for a nominal amount of effort.
For a complete overview I would recommend this Yeoman blog post that details various optimisations and there task runner implementations.
Performance Optimisation Tasks
If you have a slow legacy project or are at a hackathon you don’t want to spend lots of energy configuring your site to be completely optimised.
I have collected my own Grunt and Gulp tasks that do some best guess optimisation on a directory here.
Gruntfile
module.exports = function(grunt) {
grunt.initConfig({
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'public/',
src: ['**/*.{png,jpg,gif}'],
dest: 'public/'
}]
}
},
uglify: {
dist: {
files: {
'public/js/main.js': ['public/js/*.js']
}
}
},
cssmin: {
dist: {
files: {
'public/css/main.css': ['public/css/*.css']
}
}
},
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
cwd: 'public/',
src: ['**/*.html'],
dest: 'public/',
}, ]
},
},
copy: {
dist: {
files: [{
expand: true,
cwd: 'test/',
src: ['*'],
dest: 'public/'
}, ]
}
},
clean: ['public']
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('build', ['clean', 'copy', 'imagemin', 'uglify', 'cssmin', 'htmlmin']);
};
Gulpfile
var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
minifyCSS = require('gulp-minify-css');
gulp.task('uglify', function() {
gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public/'));
});
gulp.task('imagemin', function() {
gulp.src('public/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('public/imgs/'));
});
gulp.task('minifyCSS', function() {
gulp.src('./public/**/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('./public/'));
});
gulp.task('htmlmin', function() {
var opts = {
comments: false
};
gulp.src('./public/**/*.html')
.pipe(htmlmin(opts))
.pipe(gulp.dest('./public/'));
});
gulp.task('build', ['uglify', 'minifyCSS', 'htmlmin', 'imagemin']);