My Current Grunt Setup

I’ve recently became a big fan of GruntJS. I previously had been using CodeKit to compile my frontend compenents (Javascript/SCSS). I first got started and introduced to Grunt after watching Chris Coyier screencast First Moments with Grunt”. Its a great watch if you are just getting started with Grunt.

In my current Grunt workflow I mainly just process my SCSS to CSS, concatenate and optimize my Javascript. Here’s how I lay out my Grunt.js file.

module.exports = function(grunt) {


    pkg: grunt.file.readJSON('package.json'),

    // Javascript: Combine app.js along with library files...
    uglify: {
      build: {
        src: ['public/js/lib/*.js','public/js/app.js'],
        dest: 'public/js/build/app.min.js'
    // SCSS: Using Compass, compile and output CSS...
    compass: {
      dist: {
        options: {
          sassDir: 'public/scss',
          cssDir: 'public/css/build',
          outputStyle: 'compressed'

    // Watch: This will run Grunt automatically when files change.
    watch: {
      scripts: {
        files: ['public/js/*.js','public/js/lib/*.js'],
        tasks: ['uglify'],
        options: {
          spawn: false,
      css: {
        files: ['public/scss/*.scss','public/scss/partials/*.scss'],
        tasks: ['compass'],
        options: {
          spawn: false,


  // Load the plugins

  // Tasks
  grunt.registerTask('default', ['uglify','compass','watch']);


I run Grunt from my project root and all assets are in a /public directory. Inside that /public directory I have /js and /css where assets live.


Watch: Compass: Uglify: