Grunt File With Live Reload for HTML, CSS3, Foundation 5

README.MD

Use this file when starting a new project.

To use it with other projects excluding foundation, remove the line that says the bower_components section.

Get the list of the Node Modules from the Foundation-SASS-Testing Folder

mygruntfile.js

/*jslint node: true */
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        sass: {
            dist: {
                options: {
                    includePaths: ['bower_components/foundation/scss'],
                    outputStyle: 'expanded',
                    sourcemap: 'none'
                },
                files: {
                    'css/app.css': 'scss/app.scss'
                }
            }
        }, //sass

        compass: {
            dev: {
                options: {
                    config: 'config.rb'
                }
            } // dev
        }, //compass

        watch: {
            options: {
                livereload: true,
                dateFormat: function(time) {
                        grunt.log.writeln('The watch task finished in ' + time + 'ms at ' + (new Date()).toString());
                        grunt.log.writeln('Waiting for more changes...');
                    } //date format function
            }, //options
            scripts: {
                files: ['*.js', 'js/*.js']
            }, // scripts
            //Live Reload of SASS
            sass: {
                files: 'scss/**/*.scss',
                tasks: ['sass']
            }, //sass
            css: {
                files: ['scss/*.scss'],
                tasks: ['compass']
            },
            html: {
                files: ['*.html']
            }
        }, //watch

        postcss: {
            options: {
                processors: [
                    require('autoprefixer-core')({
                        browsers: 'last 2 versions'
                    })
                ]
            }
        }, //post css

        jshint: {
            options: {
                reporter: require('jshint-stylish')
            },
            target: ['Gruntfile.js', 'js/*.js']
        } //jshint
    });

    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-autoprefixer');

    /** Default Task - Can be changed eg when working betwwen javascript and sass*/
    grunt.registerTask('build', ['jshint']);

    grunt.registerTask('default', ['build', 'watch', 'compass', 'jshint', 'postcss', 'sass', 'autoprefixer']);
}

Node_Modules

├─┬ autoprefixer-core@5.2.1
│ ├── browserslist@0.4.0
│ ├── caniuse-db@1.0.30000273
│ ├── num2fraction@1.1.0
│ └─┬ postcss@4.1.16
│   ├── es6-promise@2.3.0
│   ├── js-base64@2.1.9
│   └─┬ source-map@0.4.4
│     └── amdefine@1.0.0
├─┬ grunt@0.4.5
│ ├── async@0.1.22
│ ├── coffee-script@1.3.3
│ ├── colors@0.6.2
│ ├── dateformat@1.0.2-1.2.3
│ ├── eventemitter2@0.4.14
│ ├── exit@0.1.2
│ ├─┬ findup-sync@0.1.3
│ │ ├─┬ glob@3.2.11
│ │ │ ├── inherits@2.0.1
│ │ │ └─┬ minimatch@0.3.0
│ │ │   ├── lru-cache@2.6.5
│ │ │   └── sigmund@1.0.1
│ │ └── lodash@2.4.2
│ ├── getobject@0.1.0
│ ├─┬ glob@3.1.21
│ │ ├── graceful-fs@1.2.3
│ │ └── inherits@1.0.0
│ ├─┬ grunt-legacy-log@0.1.2
│ │ ├── grunt-legacy-log-utils@0.1.1
│ │ ├── lodash@2.4.2
│ │ └── underscore.string@2.3.3
│ ├── grunt-legacy-util@0.2.0
│ ├── hooker@0.2.3
│ ├── iconv-lite@0.2.11
│ ├─┬ js-yaml@2.0.5
│ │ ├─┬ argparse@0.1.16
│ │ │ ├── underscore@1.7.0
│ │ │ └── underscore.string@2.4.0
│ │ └── esprima@1.0.4
│ ├── lodash@0.9.2
│ ├─┬ minimatch@0.2.14
│ │ ├── lru-cache@2.6.5
│ │ └── sigmund@1.0.1
│ ├─┬ nopt@1.0.10
│ │ └── abbrev@1.0.7
│ ├── rimraf@2.2.8
│ ├── underscore.string@2.2.1
│ └── which@1.0.9
├─┬ grunt-contrib-compass@1.0.3
│ ├── async@0.9.2
│ ├─┬ bin-version-check@2.1.0
│ │ ├─┬ bin-version@1.0.1
│ │ │ └─┬ find-versions@1.1.3
│ │ │   ├── array-uniq@1.0.2
│ │ │   ├── get-stdin@4.0.1
│ │ │   ├─┬ meow@3.3.0
│ │ │   │ ├─┬ camelcase-keys@1.0.0
│ │ │   │ │ ├── camelcase@1.2.1
│ │ │   │ │ └── map-obj@1.0.1
│ │ │   │ ├─┬ indent-string@1.2.2
│ │ │   │ │ └─┬ repeating@1.1.3
│ │ │   │ │   └─┬ is-finite@1.0.1
│ │ │   │ │     └── number-is-nan@1.0.0
│ │ │   │ └── object-assign@3.0.0
│ │ │   └── semver-regex@1.0.0
│ │ ├── minimist@1.1.3
│ │ ├── semver@4.3.6
│ │ └── semver-truncate@1.0.0
│ ├── dargs@2.1.0
│ ├── onetime@1.0.0
│ └── tmp@0.0.24
├─┬ grunt-contrib-jshint@0.11.2
│ ├── hooker@0.2.3
│ └─┬ jshint@2.8.0
│   ├─┬ cli@0.6.6
│   │ └─┬ glob@3.2.11
│   │   ├── inherits@2.0.1
│   │   └─┬ minimatch@0.3.0
│   │     ├── lru-cache@2.6.5
│   │     └── sigmund@1.0.1
│   ├─┬ console-browserify@1.1.0
│   │ └── date-now@0.1.4
│   ├── exit@0.1.2
│   ├─┬ htmlparser2@3.8.3
│   │ ├── domelementtype@1.3.0
│   │ ├── domhandler@2.3.0
│   │ ├─┬ domutils@1.5.1
│   │ │ └─┬ dom-serializer@0.1.0
│   │ │   ├── domelementtype@1.1.3
│   │ │   └── entities@1.1.1
│   │ ├── entities@1.0.0
│   │ └─┬ readable-stream@1.1.13
│   │   ├── core-util-is@1.0.1
│   │   ├── inherits@2.0.1
│   │   ├── isarray@0.0.1
│   │   └── string_decoder@0.10.31
│   ├── lodash@3.7.0
│   ├─┬ minimatch@2.0.10
│   │ └─┬ brace-expansion@1.1.0
│   │   ├── balanced-match@0.2.0
│   │   └── concat-map@0.0.1
│   ├── shelljs@0.3.0
│   └── strip-json-comments@1.0.4
├─┬ grunt-contrib-watch@0.6.1
│ ├── async@0.2.10
│ ├─┬ gaze@0.5.1
│ │ └─┬ globule@0.1.0
│ │   ├─┬ glob@3.1.21
│ │   │ ├── graceful-fs@1.2.3
│ │   │ └── inherits@1.0.0
│ │   ├── lodash@1.0.2
│ │   └─┬ minimatch@0.2.14
│ │     ├── lru-cache@2.6.5
│ │     └── sigmund@1.0.1
│ ├── lodash@2.4.2
│ └─┬ tiny-lr-fork@0.0.5
│   ├── debug@0.7.4
│   ├── faye-websocket@0.4.4
│   ├─┬ noptify@0.0.3
│   │ └─┬ nopt@2.0.0
│   │   └── abbrev@1.0.7
│   └── qs@0.5.6
├─┬ grunt-postcss@0.5.5
│ ├── bluebird@2.9.34
│ ├─┬ chalk@1.1.1
│ │ ├── ansi-styles@2.1.0
│ │ ├── escape-string-regexp@1.0.3
│ │ ├─┬ has-ansi@2.0.0
│ │ │ └── ansi-regex@2.0.0
│ │ ├─┬ strip-ansi@3.0.0
│ │ │ └── ansi-regex@2.0.0
│ │ └── supports-color@2.0.0
│ ├── diff@1.4.0
│ └─┬ postcss@4.1.16
│   ├── es6-promise@2.3.0
│   ├── js-base64@2.1.9
│   └─┬ source-map@0.4.4
│     └── amdefine@1.0.0
├─┬ grunt-sass@0.18.1
│ ├─┬ each-async@1.1.1
│ │ ├── onetime@1.0.0
│ │ └── set-immediate-shim@1.0.1
│ └── object-assign@2.1.1
├─┬ jshint-stylish@2.0.1
│ ├─┬ chalk@1.1.1
│ │ ├── ansi-styles@2.1.0
│ │ ├── escape-string-regexp@1.0.3
│ │ ├─┬ has-ansi@2.0.0
│ │ │ └── ansi-regex@2.0.0
│ │ ├─┬ strip-ansi@3.0.0
│ │ │ └── ansi-regex@2.0.0
│ │ └── supports-color@2.0.0
│ ├── log-symbols@1.0.2
│ ├── plur@1.0.0
│ ├─┬ string-length@1.0.1
│ │ └─┬ strip-ansi@3.0.0
│ │   └── ansi-regex@2.0.0
│ └── text-table@0.2.0
└─┬ node-sass@2.0.1
  ├─┬ chalk@0.5.1
  │ ├── ansi-styles@1.1.0
  │ ├── escape-string-regexp@1.0.3
  │ ├─┬ has-ansi@0.1.0
  │ │ └── ansi-regex@0.2.1
  │ ├─┬ strip-ansi@0.3.0
  │ │ └── ansi-regex@0.2.1
  │ └── supports-color@0.2.0
  ├─┬ cross-spawn@0.2.9
  │ └── lru-cache@2.6.5
  ├─┬ gaze@0.5.1
  │ └─┬ globule@0.1.0
  │   ├─┬ glob@3.1.21
  │   │ ├── graceful-fs@1.2.3
  │   │ └── inherits@1.0.0
  │   ├── lodash@1.0.2
  │   └─┬ minimatch@0.2.14
  │     ├── lru-cache@2.6.5
  │     └── sigmund@1.0.1
  ├── get-stdin@4.0.1
  ├─┬ meow@3.3.0
  │ ├─┬ camelcase-keys@1.0.0
  │ │ ├── camelcase@1.2.1
  │ │ └── map-obj@1.0.1
  │ ├─┬ indent-string@1.2.2
  │ │ └─┬ repeating@1.1.3
  │ │   └─┬ is-finite@1.0.1
  │ │     └── number-is-nan@1.0.0
  │ ├── minimist@1.1.3
  │ └── object-assign@3.0.0
  ├─┬ mkdirp@0.5.1
  │ └── minimist@0.0.8
  ├─┬ mocha@2.2.5
  │ ├── commander@2.3.0
  │ ├─┬ debug@2.0.0
  │ │ └── ms@0.6.2
  │ ├── diff@1.4.0
  │ ├── escape-string-regexp@1.0.2
  │ ├─┬ glob@3.2.3
  │ │ ├── graceful-fs@2.0.3
  │ │ ├── inherits@2.0.1
  │ │ └─┬ minimatch@0.2.14
  │ │   ├── lru-cache@2.6.5
  │ │   └── sigmund@1.0.1
  │ ├── growl@1.8.1
  │ ├─┬ jade@0.26.3
  │ │ ├── commander@0.6.1
  │ │ └── mkdirp@0.3.0
  │ ├─┬ mkdirp@0.5.0
  │ │ └── minimist@0.0.8
  │ └── supports-color@1.2.1
  ├── nan@1.9.0
  ├─┬ npmconf@2.1.2
  │ ├─┬ config-chain@1.1.9
  │ │ └── proto-list@1.2.4
  │ ├── inherits@2.0.1
  │ ├── ini@1.3.4
  │ ├─┬ nopt@3.0.3
  │ │ └── abbrev@1.0.7
  │ ├─┬ once@1.3.2
  │ │ └── wrappy@1.0.1
  │ ├─┬ osenv@0.1.3
  │ │ ├── os-homedir@1.0.1
  │ │ └── os-tmpdir@1.0.1
  │ └── uid-number@0.0.5
  ├── object-assign@2.1.1
  ├── replace-ext@0.0.1
  ├─┬ request@2.60.0
  │ ├── aws-sign2@0.5.0
  │ ├─┬ bl@1.0.0
  │ │ └─┬ readable-stream@2.0.2
  │ │   ├── core-util-is@1.0.1
  │ │   ├── inherits@2.0.1
  │ │   ├── isarray@0.0.1
  │ │   ├── process-nextick-args@1.0.2
  │ │   ├── string_decoder@0.10.31
  │ │   └── util-deprecate@1.0.1
  │ ├── caseless@0.11.0
  │ ├─┬ combined-stream@1.0.5
  │ │ └── delayed-stream@1.0.0
  │ ├── extend@3.0.0
  │ ├── forever-agent@0.6.1
  │ ├─┬ form-data@1.0.0-rc3
  │ │ └── async@1.4.2
  │ ├─┬ har-validator@1.8.0
  │ │ ├── bluebird@2.9.34
  │ │ ├─┬ chalk@1.1.0
  │ │ │ ├── ansi-styles@2.1.0
  │ │ │ ├── escape-string-regexp@1.0.3
  │ │ │ ├─┬ has-ansi@2.0.0
  │ │ │ │ └── ansi-regex@2.0.0
  │ │ │ ├─┬ strip-ansi@3.0.0
  │ │ │ │ └── ansi-regex@2.0.0
  │ │ │ └── supports-color@2.0.0
  │ │ ├─┬ commander@2.8.1
  │ │ │ └── graceful-readlink@1.0.1
  │ │ └─┬ is-my-json-valid@2.12.1
  │ │   ├── generate-function@2.0.0
  │ │   ├─┬ generate-object-property@1.2.0
  │ │   │ └── is-property@1.0.2
  │ │   ├── jsonpointer@1.1.0
  │ │   └── xtend@4.0.0
  │ ├─┬ hawk@3.1.0
  │ │ ├── boom@2.8.0
  │ │ ├── cryptiles@2.0.4
  │ │ ├── hoek@2.14.0
  │ │ └── sntp@1.0.9
  │ ├─┬ http-signature@0.11.0
  │ │ ├── asn1@0.1.11
  │ │ ├── assert-plus@0.1.5
  │ │ └── ctype@0.5.3
  │ ├── isstream@0.1.2
  │ ├── json-stringify-safe@5.0.1
  │ ├─┬ mime-types@2.1.4
  │ │ └── mime-db@1.16.0
  │ ├── node-uuid@1.4.3
  │ ├── oauth-sign@0.8.0
  │ ├── qs@4.0.0
  │ ├── stringstream@0.0.4
  │ ├── tough-cookie@2.0.0
  │ └── tunnel-agent@0.4.1
  ├─┬ sass-graph@1.3.0
  │ ├─┬ commander@2.8.1
  │ │ └── graceful-readlink@1.0.1
  │ ├─┬ glob@4.5.3
  │ │ ├─┬ inflight@1.0.4
  │ │ │ └── wrappy@1.0.1
  │ │ ├── inherits@2.0.1
  │ │ ├─┬ minimatch@2.0.10
  │ │ │ └─┬ brace-expansion@1.1.0
  │ │ │   ├── balanced-match@0.2.0
  │ │ │   └── concat-map@0.0.1
  │ │ └─┬ once@1.3.2
  │ │   └── wrappy@1.0.1
  │ └── lodash@2.4.2
  ├── semver@4.3.6
  └── shelljs@0.3.0