在浏览器中进行实时预览

我正在寻找HTML5 + CSS3编辑工具。目前我发现的最好的IDE是Visual Studio 2012.有一个小问题。我想要对我正在创建的内容进行实时预览。我有多个显示器，如果没有切换到浏览器并点击F5（或Ctrl + F5），我将看到我的代码的结果是完美的。我能做到的唯一方法就是在Firefox或Chrome上使用自动重新加载插件。但它不是一个非常优雅的解决方案。它几乎可以减慢进程速度，因为它运行了许多不必要的刷新。在浏览器中进行实时预览

最好的解决方案是以某种方式在浏览器（或使用浏览器引擎的工具）中在不同的浏览器中测试它。另外它有助于我在PHP或ASP.NET中开发服务器端的情况。

或者，如果有一个很好的IDE（VS相比更好），我不会介意使用它，但请注意，我在寻找这些：

实时预览
智能感知
自动完成功能（例如关闭标签，报价单等）
主题支持（尤其是黑色）+定制
变焦（不是很重要，但我喜欢的工具支持C +滚动）

来源

2012-08-18 Alireza Noori

如果您正在寻找现场重新加载，请尝试以下操作：LiveReload。它在Mac上运行得非常好，但也有一个Windows版本的alpha版本。

来源

2012-08-18 15:01:08

从我读这就是我想要的。尽管我必须测试它。该网站关闭了几个小时... – 2012-08-18 18:23:46

我认为它现在正在工作，所以检查出来;-) – 2012-08-21 16:08:47

我不能让它在Windows上工作。我插入了JS并使用了浏览器扩展。没有工作。但它看起来像我正在寻找的东西。 – 2012-08-21 20:30:54

我个人更喜欢grunt-contrib-watch（https://github.com/gruntjs/grunt-contrib-watch），因为它似乎更灵活。我在Gruntfile.js中定义了哪些文件将被监视以进行更改，并在此事件中订阅我想执行的任何任务。

在dev上。环境项目的网页有reloader脚本，使页面刷新，只要通过发射更新事件咕噜-的contrib手表

<script src="http://localhost:35729/livereload.js"></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"]); 

};

当你运行咕噜你会得到类似的东西

enter image description here

来源

2013-07-12 12:35:09

在浏览器中进行实时预览

回答

相关问题