Live-Vorschau im Browser

Question

Ich bin auf der Suche nach einem Werkzeug für HTML5 + CSS3 Bearbeitung. Derzeit ist Visual Studio 2012 die beste IDE, die ich gefunden habe. Es gibt ein kleines Problem. Ich möchte eine Live-Vorschau dessen haben, was ich erstelle. Ich habe mehrere Monitore und es wäre perfekt, das Ergebnis meines Codes zu sehen, ohne zum Browser zu wechseln und F5 (oder Strg + F5) zu drücken. Die einzige Möglichkeit, dies zu erreichen, ist ein Auto-Reload-Addon in Firefox oder Chrome. Aber es ist keine sehr elegante Lösung. Es kann den Prozess ziemlich verlangsamen, weil es so viele unnötige Aktualisierungen durchführt.

Die beste Lösung wäre, dies im Browser (oder einem Tool, das Browser-Engines verwendet) zu tun, um es in verschiedenen Browsern zu testen. Außerdem hilft es in Situationen, in denen ich serverseitig PHP oder ASP.NET entwickle.

Alternativ kann, wenn es eine sehr gute IDE (besser als VS) ist, würde ich nicht verwenden es dagegen, aber bitte beachten Sie, ich suche für diese:

• Live-Vorschau (natürlich)
• Intellisense
• Auto-complete-Funktionen (zum Beispiel Schließen-Tags, Angebote, etc.)
• Theme-Unterstützung (vor allem schwarz) + Customization
• Zoom (nicht unbedingt notwendig, aber ich liebe Tools, die Unterstützung C + Scroll)

Answer 1

Wenn Sie nach Live-Nachladen suchen, versuchen Sie dies: LiveReload. Es funktioniert wirklich gut auf Mac, aber es gibt auch eine Alpha-Version für Windows.

Answer 2

Ich persönlich bevorzuge grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch), da es flexibler scheint. Ich definiere in der Gruntfile.js, welche Dateien für eine Änderung beobachtet werden sollen, und abonnieren bei diesem Ereignis alle Aufgaben, die ich ausführen möchte.

Auf dem Dev. Umwelt die Projektseiten hat reloader Skript, das die Aktualisierung der Seite, sobald Aktualisierungsereignis durch Grunzen-contrib-beobachten

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

Es funktioniert gut für mich gefeuert zu machen. Hier ist mein Grunzen Build-Skript

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"]); 

}; 

Wie Sie grunzen laufen Sie so etwas wie dieses