在浏览器中实时预览

Question

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

最好的解决方案是在浏览器（或使用浏览器引擎的工具）中以某种方式执行此操作，以便在各种浏览器中对其进行测试。它还有助于我在 PHP 或 ASP.NET 中开发服务器端的情况。

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

• 实时预览（当然）
• 智能感知
• 自动完成功能（例如结束标签、引号等）
• 主题支持（尤其是黑色）+ 自定义
• 缩放（不是很重要，但我喜欢支持 C+Scroll 的工具）

Answer 1

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

在开发中。环境项目页面具有重新加载脚本，该脚本会在 grunt-contrib-watch 触发的更新事件后立即刷新页面

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

对我来说效果很好。这是我的 grunt 构建脚本

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

};

当你运行 grunt 时，你会得到类似的东西

Answer 2

如果您正在寻找实时重新加载，请尝试以下操作：LiveReload。它在 mac 上运行得非常好，但也有适用于 windows 的 alpha 版本。