Live preview in browser

Question

I'm looking for a tool for HTML5 + CSS3 editing. Currently the best IDE I have found is Visual Studio 2012. There is one slight problem. I want to have a live preview of what I'm creating. I have multiple monitors and it would be perfect to see the result of my code without switching to browser and hitting F5 (or Ctrl+F5). The only way I could achieve this is by using a auto-reload addon on Firefox or Chrome. But it isn't a very elegant solution. It can pretty much slow down the process because it runs so many unnecessary refreshes.

The best solution would be to somehow do this in browser (or a tool which uses browser engines) to test it in various browsers. Also it helps in situations that I'm developing server-side in PHP or ASP.NET.

Alternatively, if there is a very good IDE (better than VS) I wouldn't mind using it but please note, I'm looking for these:

• Live preview (of course)
• Intellisense
• Auto-complete features (for instance closing tags, quotations, etc.)
• Theme support (especially black) + Customization
• Zoom (not vital but I love tools which support C+Scroll)

Answer 1

If you are looking for live reload try this: LiveReload. It works really nice on mac, but there is a alpha version for windows too.

Answer 2

I personally prefer grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch) as it seems more flexible. I define in the Gruntfile.js which files shall be watched for a change and subscribe on this event any tasks I want to perform.

On the dev. environment the project pages has reloader script that make the page refresh as soon as update event fired by grunt-contrib-watch

<script src="http://localhost:35729/livereload.js"></script>

It works fine to me. Here is my grunt build script

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks("grunt-contrib-jshint");
  grunt.loadNpmTasks('grunt-jscs');

  grunt.initConfig({
     // Lint all the files in js folder
     jshint: {
      options: {
        jshintrc: ".jshintrc"
      },
      all: ["js/**/*.js"]
     },
     // Validate against jQuery coding standard
     jscs: {
        options: {
            "standard": "Jquery"
        },
        all: ["js"]
     },
     // Preprocess SASS
     compass: {
        dist: {
          options: {
            sassDir: 'sass',
            cssDir: 'css'
          }
        }
     },
     watch: {
        options: {
          livereload: true
        },
        css: {
            files: ['sass/**/*.sass'],
            tasks: ['compass']
        },
        js: {
            files: ['js/**/*.js'],
            tasks: ['jshint', 'jscs']
        }
      }
  });

  grunt.registerTask("lint", ["jshint", "jscs"]);
  grunt.registerTask("default", ["watch"]);

};

As you run grunt you get something like that