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) {

  grunt.initConfig({

    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
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 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.

Plugins

Watch: https://github.com/gruntjs/grunt-contrib-watch Compass: https://github.com/gruntjs/grunt-contrib-compass Uglify: https://github.com/gruntjs/grunt-contrib-uglify