Vista previa en vivo en el navegador

Question

Estoy buscando una herramienta para editar HTML5 + CSS3. Actualmente, el mejor IDE que he encontrado es Visual Studio 2012. Hay un pequeño problema. Quiero tener una vista previa en vivo de lo que estoy creando. Tengo varios monitores y sería perfecto para ver el resultado de mi código sin cambiar al navegador y presionar F5 (o Ctrl + F5). La única forma en que puedo lograr esto es mediante el uso de un complemento de recarga automática en Firefox o Chrome. Pero no es una solución muy elegante. Puede ralentizar bastante el proceso porque ejecuta tantas actualizaciones innecesarias.

La mejor solución sería hacer de alguna manera esto en el navegador (o una herramienta que utiliza motores de navegador) para probarlo en varios navegadores. También ayuda en situaciones que estoy desarrollando en el lado del servidor en PHP o ASP.NET.

otra parte, si hay un muy buen IDE (mejor que VS) No me importaría usarlo pero tenga en cuenta, estoy en busca de éstos:

• vista previa en vivo (por supuesto)
• características Intellisense
• Auto-completos (por ejemplo, las etiquetas de cierre, citas, etc.)
• Tema de apoyo (especialmente negro) + personalización
• zoom (no es vital pero amo herramientas que soportan C + desplazamiento)

Answer 1

Si está buscando recargar en vivo, intente esto: LiveReload. Funciona muy bien en mac, pero también hay una versión alfa para Windows.

Answer 2

Personalmente prefiero grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch) ya que parece ser más flexible. Defino en Gruntfile.js qué archivos se verán para un cambio y suscribir en este evento cualquier tarea que desee realizar.

En el dev. medio ambiente las páginas del proyecto tiene guión recargador que hacen que la actualización de la página tan pronto como evento de actualización disparada por ronco-contrib-ver

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

Funciona bien para mí. Aquí está mi ronco Creación de un 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"]); 

}; 

Ya que se corre ronco se obtiene algo por el estilo