Podgląd na żywo w przeglądarce

Question

Szukam narzędzia do edycji HTML5 + CSS3. Obecnie najlepszym znalezionym IDE jest Visual Studio 2012. Jest jeden drobny problem. Chcę mieć podgląd na żywo tego, co tworzę. Mam wiele monitorów i byłoby idealnie widzieć wynik mojego kodu bez przełączania się do przeglądarki i wciskania F5 (lub Ctrl + F5). Jedyny sposób, w jaki mogę to osiągnąć, to użycie automatycznego dodatku do przeglądarki Firefox lub Chrome. Ale to nie jest bardzo eleganckie rozwiązanie. Może znacznie spowolnić proces, ponieważ uruchamia tyle niepotrzebnych odświeżeń.

Najlepszym rozwiązaniem byłoby jakoś to zrobić w przeglądarce (lub narzędziu, które używa silników przeglądarki), aby przetestować go w różnych przeglądarkach. Pomaga również w sytuacjach, w których pracuję po stronie serwera w PHP lub ASP.NET.

Ewentualnie, jeśli nie jest to bardzo dobry IDE (lepiej niż VS) Nie przeszkadza to jednak należy pamiętać, szukam dla nich:

• Live Preview (oczywiście)
• Intellisense
• Auto-kompletne funkcje (na przykład zamykania znaczników, cytatów, etc.)
• wsparcia Theme (szczególnie czarny) + dostosowywania
• zoom (nie istotne, ale kocham narzędzi, które wspierają C + przewijania)

Answer 1

Jeśli szukasz przeładowania na żywo, spróbuj tego: LiveReload. Działa naprawdę fajnie na Macu, ale jest też wersja alfa dla Windows.

Answer 2

Ja osobiście wolę pomruk contrib-watch (https://github.com/gruntjs/grunt-contrib-watch), ponieważ wydaje się bardziej elastyczny. W pliku Gruntfile.js określam, które pliki będą śledzone w celu zmiany i zasubskrybują w tym wydarzeniu wszelkie zadania, które chcę wykonać.

Na dev. Środowisko stron projekt ma skrypt Reloader które sprawiają, że odświeżenie strony jak najszybciej zdarzenia update wypalonej przez grunt-contrib-Watch

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

To działa dobrze dla mnie. Oto mój grunt build skrypt

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

}; 

Jak uruchomić chrząknięcie masz coś takiego