Gruntfile template (CoffeeScript) for general web development

Gruntfile.coffee

module.exports = (grunt) ->
  
  # Package
  # =======
  pkg = require './package.json'

  # Variables
  # =======
  dir_js = 'js/'
  dir_css = 'css/'
  dir_less = 'less/'
  dir_sass = 'sass/'
  dir_images = 'images/'
  dir_bower = 'bower_components/'


  # Configuration
  # =============
  grunt.initConfig

    # Package
    # -------
    pkg: pkg

    # Minify - scripts
    # --------------------
    uglify:

      # uglify:frontend
      frontend:
        files:
          "dist/app.min.js" : [
            # bower files
            dir_bower + 'jquery/jquery.js'
            dir_bower + 'bootstrap/dist/js/bootstrap.js'
            dir_bower + 'fancybox/source/jquery.fancybox.pack.js'
            # custom files
            dir_js + 'base.js'
          ]

    # Minify - stylesheets
    # --------------------
    cssmin:

      # cssmin:frontend
      frontend:
        options: 
          keepSpecialComments: 0
        files: 
          'dist/app.min.css': [
            # bower files
            dir_bower + 'bootstrap/dist/css/bootstrap.css'
            dir_bower + 'bootswatch/cerulean/bootstrap.css'
            dir_bower + 'fancybox/source/jquery.fancybox.css'
            # custom files
            dir_css + 'base.css'
          ]

    # Optimize images
    # --------------------
    imagemin:

      # imagemin:png
      png:
        options:
          optimizationLevel: 7
        files: [
          # Set to true to enable the following options…
          expand: true

          # cwd is 'current working directory'
          cwd: dir_images
          src: ['**/*.png']

          # Could also match cwd line above. i.e. project-directory/img/
          dest: 'dist/images/'
          ext: '.png'
        ]

      # imagemin:jpg
      jpg:
        options:
          progressive: true
        files: [
          # Set to true to enable the following options…
          expand: true

          # cwd is 'current working directory'
          cwd: dir_images
          src: ['**/*.jpg']

          # Could also match cwd. i.e. project-directory/img/
          dest: 'dist/images/'
          ext: '.jpg'
        ]

    # Watch
    # --------------------
    watch: 

      # options
      options:
        livereload: true

      # watch:js
      scripts:
        files: [dir_js + '*.js']
        tasks: ['uglify']
        options: 
          spawn: false

      # watch:css 
      css:
        files: [dir_css + '*.css']
        tasks: ['cssmin']
        options: 
          spawn: false

      # watch:images
      images: 
        files: [dir_images + '**/*.{png,jpg,gif}', dir_images + '*.{png,jpg,gif}']
        tasks: ['imagemin']
        options: 
          spawn: false

      # watch:html
      html:
        files: ['./**/*.html']
        tasks: []
        options: 
          spawn: false

      # watch:php
      php:
        files: ['./**/*.php']
        tasks: []
        options: 
          spawn: false
  
  # Dependencies
  # ============
  for name of pkg.devDependencies when name.substring(0, 6) is 'grunt-'
    grunt.loadNpmTasks name

  # Default
  # -------
  grunt.registerTask 'default', [
    'uglify'
    'cssmin'
    'imagemin'
    'watch'
  ]

package.json

{
  "name": "Grunt sample",
  "version": "0.0.1",
  "author": "Michael Chan (waifung0207)",
  "devDependencies": {
    "grunt": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-copy": "latest",
    "grunt-contrib-imagemin": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-htmlmin": "latest",
    "grunt-contrib-coffee": "latest",
    "grunt-contrib-watch": "latest"
  }
}