6

HTML5 + CSS3 編集用のツールを探しています。現在、私が見つけた最適な IDE は Visual Studio 2012 です。わずかな問題が 1 つあります。作成中のライブ プレビューを表示したい。複数のモニターを使用しており、ブラウザーに切り替えて F5 (または Ctrl+F5) を押すことなく、コードの結果を確認できれば完璧です。これを実現する唯一の方法は、Firefox または Chrome で自動再読み込みアドオンを使用することです。しかし、それは非常にエレガントなソリューションではありません。不要な更新が非常に多く実行されるため、プロセスがかなり遅くなる可能性があります。

最良の解決策は、ブラウザ (またはブラウザ エンジンを使用するツール) で何らかの方法でこれを実行し、さまざまなブラウザでテストすることです。また、PHP または ASP.NET でサーバー側を開発している場合にも役立ちます。

または、非常に優れた IDE (VS よりも優れている) があれば、それを使用してもかまいませんが、これらを探していることに注意してください。

  • ライブプレビュー（もちろん）
  • インテリセンス
  • オートコンプリート機能 (閉じタグ、引用など)
  • テーマのサポート (特に黒) + カスタマイズ
  • ズーム (必須ではありませんが、C+Scroll をサポートするツールが大好きです)
4

2 に答える 2

3

ライブリロードをお探しの場合は、LiveReloadをお試しください。Macでは非常にうまく機能しますが、Windows用のアルファ版もあります。

于 2012-08-18T15:01:08.420 に答える
1

個人的には grunt-contrib-watch ( https://github.com/gruntjs/grunt-contrib-watch ) の方が柔軟に見えるので好みです。変更を監視するファイルを Gruntfile.js で定義し、実行したいタスクをこのイベントでサブスクライブします。

開発中。環境のプロジェクト ページには、grunt-contrib-watch によって発生した更新イベントが発生するとすぐにページを更新するリローダー スクリプトがあります。

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

};

grunt を実行すると、そのようなものが得られます

ここに画像の説明を入力

于 2013-07-12T12:35:09.347 に答える