Dart源文件更改时自动刷新页面

Question

无论何时只要对源文件进行更改，Dartium如何自动重新加载Web客户端应用程序？

相关： How do I make Firefox auto-refresh on file change?

Answer 1

编辑：你也可以跳过这一切，只需在编辑器中打CTRL + R。如果您在Dart编辑器外部使用工具（但仍依赖它用于构建过程），或者想要在没有焦点切换到Dartium窗口的情况下进行编码和预览，以下脚本仍可能有用。

切出击键并自动化您的猴子！

此技术使用dart.build在您更改项目时“触摸”HTML文件，然后使用LivePage扩展名在浏览器中刷新它。

1. 启动Dartium并安装LivePage扩展。 （设置 | 扩展 | 获取更多扩展 |从www.fullondesign.co.uk实况| 程序添加到Chrome）

2. 运行项目。在Dartium中查看您的页面时，单击LivePage图标。将出现一个红色的“Live”叠加层。这意味着LivePage正在监视html文件及其资产（例如css文件）以进行更改。

3. 测试，通过快速更改您的html文件并保存它。 Dartium中的页面应该更新。

4. 在同一目录作为项目的pubspec.yaml创建build.dart文件。只要您对项目进行了更改（例如，将更改保存到任何.dart文件时），Dart编辑器就会运行此文件。

5. 将下面的代码放在build.dart中。更新'web/yourpage.html'指向由LivePage监视的HTML文件。

6. 现在改变一个.dart文件，保存它，并观看魔法展开。

简而言之：保存代码▶飞镖编辑器触发build.dart ▶触摸HTML文件▶实况刷新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似乎不会执行任何操作。

因为DoubleClick编辑器时刻监控你的文件，它将搭载由build.dart作出改变，去“嘿，这个项目只是改变了”，并再次呼吁build.dart ......又一次......和再次。为了避免 无限循环，脚本只会接触该文件，如果它已经过时了至少MIN_INTERVAL_MS。

实况有悄悄“重内喷射” CSS和Javascript代码段，当他们改变，不强迫整个页面的刷新功能。不幸的是，这里使用的强力技术（即覆盖html文件）会覆盖该行为。

飞镖人员还提供了一个讨论工具的web_ui页面，但请注意，实际上并不需要安装web_ui软件包以使build.dart正常工作。

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