Xem trước trực tiếp trong trình duyệt

Question

Tôi đang tìm một công cụ để chỉnh sửa HTML5 + CSS3. Hiện nay IDE tốt nhất tôi đã tìm thấy là Visual Studio 2012. Có một vấn đề nhỏ. Tôi muốn có bản xem trước trực tiếp về những gì tôi đang tạo. Tôi có nhiều màn hình và nó sẽ là hoàn hảo để xem kết quả của mã của tôi mà không cần chuyển sang trình duyệt và nhấn F5 (hoặc Ctrl + F5). Cách duy nhất tôi có thể đạt được điều này là bằng cách sử dụng một addon tự động tải lại trên Firefox hoặc Chrome. Nhưng nó không phải là một giải pháp rất thanh lịch. Nó có thể làm chậm quá trình này khá nhiều vì nó chạy quá nhiều lần làm mới không cần thiết.

Giải pháp tốt nhất là bằng cách nào đó thực hiện điều này trong trình duyệt (hoặc một công cụ sử dụng công cụ trình duyệt) để kiểm tra trong các trình duyệt khác nhau. Ngoài ra nó giúp trong các tình huống mà tôi đang phát triển phía máy chủ trong PHP hoặc ASP.NET.

Ngoài ra, nếu có một IDE rất tốt (tốt hơn so với VS) Tôi không ngại sử dụng nó nhưng xin lưu ý, tôi đang tìm kiếm những:

• Xem trước trực tiếp (tất nhiên)
tính năng
• Intellisense
• Auto-complete (đối với thẻ dụ bế mạc, trích dẫn, vv)
• hỗ trợ chủ đề (đặc biệt là màu đen) + Customization
• zoom (không quan trọng nhưng tôi yêu công cụ có hỗ trợ C + Scroll)

Answer 1

Nếu bạn đang tìm kiếm tải lại trực tiếp, hãy thử cách này: LiveReload. Nó hoạt động thực sự tốt đẹp trên mac, nhưng có một phiên bản alpha cho các cửa sổ quá.

Answer 2

Cá nhân tôi thích xem đồng hồ grunt-contrib (https://github.com/gruntjs/grunt-contrib-watch) vì nó có vẻ linh hoạt hơn. Tôi định nghĩa trong Gruntfile.js mà các tập tin sẽ được theo dõi cho một sự thay đổi và đăng ký vào sự kiện này bất kỳ nhiệm vụ nào tôi muốn thực hiện.

Trên dev. môi trường các trang dự án có kịch bản tải lại làm cho trang làm mới ngay sau khi sự kiện cập nhật được kích hoạt bởi grunt-contrib-watch

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

Nó hoạt động tốt với tôi. Dưới đây là grunt tôi xây dựng kịch bản

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

}; 

Như bạn chạy grunt bạn sẽ có được một cái gì đó như thế