basic-grunt-setup.md

Basic Grunt Setup

I looked all over for some information on how to basically start a quick prototype server. This is what I wanted to do.

• Watch any file I change (so basically, exactly how LiveReload and CodeKit work) and refresh the screen
• Compile Sass (in a consistent, declarable format [compressed or whatever])
• Run a static server so I don't have to mess with VirtualHosts or explain to another front-end developer how to run my prototype.

So here you go, Internet. This is some very general purpose stuff that you should be able to figure out (even if this Node stuff leaves you scratching your head a lot of the time [like it does me]).

To install new Grunt modules, do it in the format ...

$ npm install [module-name] --save-dev

... which will add new lines to the devDependencies section of the packages.json file in a similar way that running pip install [something] and then pip freeze | requirements.txt does for Python projects.

Sources (basically, RTFM)

• Getting started
• Configuring tasks
• Sample Gruntfile (This was the most helpful thing I read.)
• 1000x this! (This is how I figured out how to get the server and the watch command to work at the same time.)

Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {
        options: {},
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'css/main.css': 'css/scss/main.scss',
        }
      }
    },
    jshint: {
      files: ['js/*.js'],
    },
    watch: {
      options: {
        livereload: true,
      },
      html: {
        files: ['index.html'],
      },
      js: {
        files: ['js/**/*.js'],
        tasks: ['jshint'],
      },
      sass: {
        options: {
          livereload: false,
        },
        files: ['css/scss/**/*.scss'],
        tasks: ['sass'],
      },
      css: {
        files: ['css/**/*.css'],
      },
    },
  });

  // Actually running things.
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // Default task(s).
  grunt.registerTask('default', ['connect', 'watch']);

};

package.json

{
  "name": "what-have-you",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.4",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt-contrib-sass": "~0.5.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-connect": "~0.5.0"
  }
}