Question

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

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

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

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

Answer 1

如果您正在寻找实时重新加载，请尝试：LiveReload。它在Mac上运行得非常好，但是Windows也有alpha版本。

Answer 2

我个人更喜欢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"]);

};

当你经常咕噜咕噜时，你会得到类似的东西

enter image description here

在浏览器中实时预览

2 个答案: