Gruntfile.js

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
};