ダーツソースファイルが変更されたときにページを自動的に更新

Question

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

関連： How do I make Firefox auto-refresh on file change?

Answer 1

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

キーストロークを切り取り、あなたの猿を自動化してください！

このテクニックでは、プロジェクトを変更するたびにdart.buildを使用してHTMLファイルを「タッチ」し、LivePage拡張子を使用してブラウザでリフレッシュします。

1. Dartiumを起動し、LivePage拡張機能をインストールします。

2. は、プロジェクトを実行します（設定 | 拡張 |をChromeに追加| www.fullondesign.co.ukからライブページ| は、より多くの延長部を取得します）。 Dartiumであなたのページを見ながら、LivePageアイコンをクリックしてください。赤色の「ライブ」オーバーレイが表示されます。これは、LivePageがhtmlファイルとそのア​​セット（例えばcssファイル）を見ていることを意味します。

3. htmlファイルをすばやく変更して保存してテストします。 Dartiumのページが更新されます。

4. は、プロジェクトのpubspec.yamlと同じディレクトリにbuild.dartファイルを作成します。ダーツエディタは、プロジェクトに変更を加えるたびに（たとえば、.dartファイルに変更を保存したときなど）いつでもこのファイルを実行します。

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

6. ここで、.dartファイルの1つを変更して保存し、魔法の展開を見てください。要するに

：▶タッチHTMLファイル▶ライブページには、トラブルシューティングする必要がある場合は、コマンドラインからdart 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/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(); 
    } 
} 

Dartiumをリフレッシュしbuild.dart 保存コード▶ダートエディタがトリガー。

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

ダーツエディタは常にファイルを監視しているため、build.dartの変更を受け取り、「このプロジェクトは変更されました」と表示され、build.dartをもう一度呼びます。再び。 無限ループを避けるために、スクリプトは、少なくともMIN_INTERVAL_MSの間は失効している場合にのみファイルに触れます。

LivePageには、CSSおよびJavaScriptのスニペットが変更されたときに目立たないように「再注入」する機能があり、ページ全体を更新する必要はありません。残念ながら、ここで使用されているブルートフォース技術（つまり、htmlファイルを上書きする）はその動作を無効にします。

ダーツの人々は、toolingについて語っているweb_uiのページも提供していますが、実際にはbuild.dartのweb_uiパッケージをインストールする必要はありません。

Answer 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(); 
    } 
}