ब्राउज़र में लाइव पूर्वावलोकन

Question

मैं HTML5 + CSS3 संपादन के लिए एक उपकरण की तलाश में हूं। वर्तमान में मैंने पाया है कि सबसे अच्छा आईडीई विजुअल स्टूडियो 2012 है। एक मामूली समस्या है। मैं जो बना रहा हूं उसके बारे में एक लाइव पूर्वावलोकन चाहता हूं। मेरे पास एकाधिक मॉनीटर हैं और यह ब्राउज़र पर स्विच किए बिना और F5 (या Ctrl + F5) को मारने के बिना मेरे कोड का नतीजा देखने के लिए सही होगा। फ़ायरफ़ॉक्स या क्रोम पर एक ऑटो-रीलोड एडन का उपयोग करके मैं इसे प्राप्त करने का एकमात्र तरीका है। लेकिन यह एक बहुत ही सुरुचिपूर्ण समाधान नहीं है। यह प्रक्रिया को बहुत धीमा कर सकता है क्योंकि यह इतने सारे अनावश्यक ताज़ा करता है।

किसी भी तरह ब्राउज़र (या एक उपकरण जो ब्राउज़र इंजन का उपयोग करता है) में ऐसा करने का सबसे अच्छा समाधान विभिन्न ब्राउज़रों में इसका परीक्षण करने के लिए किया जाएगा। इसके अलावा यह परिस्थितियों में मदद करता है कि मैं PHP या ASP.NET में सर्वर-साइड विकसित कर रहा हूं।

वैकल्पिक रूप से, अगर वहाँ एक बहुत अच्छा आईडीई (वी.एस. की तुलना में बेहतर) मैं इसे का उपयोग कर कोई फ़र्क नहीं पड़ेगा लेकिन कृपया ध्यान दें है, मैं इन की तलाश में हूँ:

• (जाहिर है)
लाइव पूर्वावलोकन
• Intellisense
• स्वत: पूर्ण सुविधाओं
• थीम समर्थन (विशेष रूप से काला) + अनुकूलन
• ज़ूम (उदाहरण के बंद करने टैग, कोटेशन, आदि के लिए) (महत्वपूर्ण नहीं है, लेकिन मैं उपकरण प्यार जो समर्थन सी + स्क्रॉल)

Answer 1

यदि आप लाइव रीलोड की तलाश में हैं तो इसे आजमाएं: LiveReload। यह मैक पर वास्तव में अच्छा काम करता है, लेकिन विंडोज़ के लिए अल्फा संस्करण भी है।

Answer 2

मैं व्यक्तिगत रूप से ग्रंट-कॉन्ट्रिब-घड़ी (https://github.com/gruntjs/grunt-contrib-watch) पसंद करता हूं क्योंकि यह अधिक लचीला लगता है। मैं Gruntfile.js में परिभाषित करता हूं कि कौन सी फाइलें बदलाव के लिए देखी जाएंगी और इस घटना पर सदस्यता लेंगे जो भी मैं करना चाहता हूं।

देव पर। पर्यावरण परियोजना पृष्ठों reloader स्क्रिप्ट पृष्ठ ताज़ा के रूप में जल्द बनाने के द्वारा चलाई अद्यतन घटना के रूप में घुरघुराना-योगदान-घड़ी

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

}; 

आप घुरघुराना चलाने के रूप में आपको लगता है कि