5

ソースファイルに変更が加えられるたびに、DartiumにWebクライアントアプリケーションを自動的にリロードさせるにはどうすればよいですか？

関連： ファイルの変更時にFirefoxを自動更新するにはどうすればよいですか？

4

2 に答える 2

6

編集：これをすべてスキップ して、エディターでCTRL+Rを押すこともできます。以下のスクリプトは、Dart Editorの外部でツールを使用している場合（ただし、ビルドプロセスでは引き続きツールに依存している場合）、またはDartiumウィンドウにフォーカスを移動せずにコードとプレビューを実行したい場合に役立ちます。

キーストロークを切り取り、サルを自動化しましょう！

この手法では、dart.buildを使用して、プロジェクトに変更を加えるたびにHTMLファイルに「タッチ」し、LivePage拡張機能を使用してブラウザーで更新します。

  1. Dartiumを起動し、LivePage拡張機能をインストールします。（[設定] | [拡張機能] |その他の拡張機能を取得| www.fullondesign.co.ukからLivePage | chromeに追加）

  2. プロジェクトを実行します。Dartiumでページを表示しているときに、LivePageアイコンをクリックします。赤い「ライブ」オーバーレイが表示されます。これは、LivePageがhtmlファイルとそのア​​セット（cssファイルなど）の変更を監視していることを意味します。

  3. HTMLファイルにすばやく変更を加えて保存することにより、テストします。Dartiumのページが更新されます。

  4. プロジェクトのpubspec.yamlと同じディレクトリにbuild.dartファイルを作成します。Dart Editorは、プロジェクトに変更を加えるたびに（たとえば、.dartファイルに変更を保存するときに）このファイルを実行します。

  5. 以下のコードをbuild.dartに配置します。'web/yourpage.html'LivePageによって監視されているHTMLファイルを指すように更新します。

  6. 次に、.dartファイルの1つを変更して保存し、魔法が展開するのを確認します。

つまり、コードを保存する▶DartEditorがbuild.dartをトリガーする▶htmlファイルに触れる▶LivePageがDartiumを更新する

import 'dart:io';

// This number needs to be high enough to prevent the Dart Editor from going
// into an "infinite compile" loop.  If that happens, simply comment out the
// call to touch() below and save this file.
const int MIN_INTERVAL_MS = 5000;
const String HTML_FILE = 'web/yourpage.html';

void main() { 
  build(new Options().arguments, [HTML_FILE]);
  touch(HTML_FILE, new Duration(milliseconds:MIN_INTERVAL_MS));
}

/// Save a small, trivial change to the contents of [filename], unless
/// its already been modified within the last [interval].
void touch(String filename, [Duration interval]) {
  const int SPACE = 32;
  var file = new File(filename);
  if (?interval &&
      new Date.now()
      .difference(file.lastModifiedSync())
      .inMilliseconds < interval.inMilliseconds) return;
  RandomAccessFile f = file.openSync(FileMode.APPEND);
  try {
    // If the file doesn't end with a space, append one, otherwise remove it    
    int length = f.lengthSync();
    f.setPositionSync(length - 1);
    if (f.readByteSync() == SPACE) {
      f.truncateSync(length - 1);
    } else {
      f.writeByteSync(SPACE);
    }
  } finally {
    f.closeSync();
  }
}

トラブルシューティングが必要な場合はdart build.dart、コマンドラインから実行できます。

このtouch()関数は、ファイルの末尾の末尾のスペースを追加または削除します。注変更するのが変更日だけの場合、LivePageは何もしないようです。

Dart Editorは常にファイルを監視しているため、build.dartによって行われた変更を取得し、「ねえ、このプロジェクトは変更されました」に移動して、build.dartをもう一度呼び出します。無限ループを回避するために、スクリプトは、ファイルが少なくとも。の間古くなっている場合にのみファイルにアクセスしますMIN_INTERVAL_MS。

LivePageには、ページ全体を強制的に更新することなく、変更時にCSSおよびJavascriptスニペットを目立たないように「再挿入」する機能があります。残念ながら、ここで使用されているブルートフォース手法（つまり、htmlファイルの上書き）は、その動作をオーバーライドします。

Dartの人々は、ツールについて説明するweb_uiページも提供していますが、build.dartを機能させるために実際にweb_uiパッケージをインストールする必要はないことに注意してください。

于 2013-01-24T22:30:09.197 に答える
2

kragerer の回答に基づいて、Dart 1.0 で動作するようにビルド スクリプトを更新しました。有効な（その時点での）解決策で質問に答えてくれてありがとう。

build.dart

import 'dart:io';

// This number needs to be high enough to prevent the Dart Editor from going
// into an "infinite compile" loop.  If that happens, simply comment out the
// call to touch() below and save this file.
const int MIN_INTERVAL_MS = 5000;
const String HTML_FILE = 'web/index.html';

void main() {
  touch(HTML_FILE, new Duration(milliseconds:MIN_INTERVAL_MS));
}

/// Save a small, trivial change to the contents of [filename], unless
/// its already been modified within the last [interval].
void touch(String filename, [Duration interval]) {
  const int SPACE = 32;
  var file = new File(filename);
  if (interval != null && new DateTime.now().difference(file.lastModifiedSync()).inMilliseconds < interval.inMilliseconds) return;
  RandomAccessFile f = file.openSync(mode:FileMode.APPEND);
  try {
    // If the file doesn't end with a space, append one, otherwise remove it
    int length = f.lengthSync();
    f.setPositionSync(length - 1);
    if (f.readByteSync() == SPACE) {
      f.truncateSync(length - 1);
    } else {
      f.writeByteSync(SPACE);
    }
  } finally {
    f.closeSync();
  }
}
于 2014-01-09T04:33:47.460 に答える