Ever since I started using GruntJS in my development workflow, it's pretty much the first thing I set up for every new project. One of the annoying things about starting a new project from scratch is creating the Gruntfile.js and setting up the configurations you've applied to each task. This is why I have decided to post my Gruntfile.js template below with explanations about each task's configuration.

module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { // This is the uglify task which is dynamically mapped to all of my js files for minification dynamic_mappings: { files: [ { expand: true, // Enable dynamic expansion. cwd: 'js', // Src matches are relative to this path. src: ['*.js'], // Actual pattern(s) to match. dest: 'min/js', // Destination path prefix. ext: '.min.js', // Dest filepaths will have this extension. extDot: 'first' // Extensions in filenames begin after the first dot } ] } }, compass: { // The compass task runs the compass preprocessor on all of my scss files dist: { options: { config: 'config.rb', // This maps to my config.rb file sourcemap: true // This generates a sourcemap file so that you can edit scss directly in DevTools } } }, htmlmin: { // HTML minification task dynamically mapped multiple: { options: { removeComments: true, // Removes comments collapseWhitespace: true // Removes whitespace }, files: [{ expand: true, // Enable dynamic expansion cwd: 'html', // Src matches are relative to this path src: ['*.html', '**/*.html'], // Patterns to match dest: 'min/' // Destination path prefix }] } }, browserSync: { // BrowserSync creates a localhost and auto-updates browser when files are changed bsFiles: { src : [ // Patterns to match 'html/*.html', 'html/**/*.html', 'js/*.js', 'sass/*.scss', 'sass/**/*.scss', 'config.rb' ] }, options: { watchTask: true, // Makes it compatible with the watch task server: './min' // This is what folder you want to serve up as the site when the localhost launches } }, watch: { // Watch task will watch your files for updates and run a task when they change js: { files: ['js/*.js'], // Which js files to watch tasks: ['newer:uglify'] // Runs the uglify task through newer so that only changed files are updated }, css: { files: ['sass/*.scss', 'sass/**/*.scss', 'config.rb'], // Which scss files to watch tasks: ['compass'] // Runs the compass task when files are updated }, html: { files: ['html/*.html', 'html/**/*.html'], // Which html files to watch tasks: ['newer:htmlmin'] // Runs htmlmin task through newer so that only changed files are updated } } }); // Loads all of the tasks from the node modules grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.loadNpmTasks('grunt-newer'); grunt.loadNpmTasks('grunt-browser-sync'); // Default task(s). grunt.registerTask('default', ['browserSync','watch']); // Typing 'grunt' into Terminal will run browserSync first // and then watch all of my files };