Question

如果对源文件进行更改，如何让Dartium自动重新加载您的Web客户端应用程序？

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

Answer 1

编辑您也可以跳过所有这些，只需在编辑器中点击 CTRL + R 即可。如果您在Dart编辑器之外使用工具（但仍然依赖于它来构建过程），或者希望在没有焦点转移到Dartium窗口的情况下进行代码和预览，则下面的脚本可能仍然有用。

剪掉击键并自动化你的猴子！

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

启动Dartium并安装LivePage扩展。（设置 | 扩展程序 | 获取更多扩展程序 | 来自www.fullondesign.co.uk的LivePage | 添加到chrome ）
运行您的项目。在Dartium中查看页面时，单击LivePage图标。将出现红色“实时”叠加层。这意味着LivePage正在观看html文件及其资产（例如css文件）以进行更改。
通过快速更改html文件并保存来测试。 Dartium中的页面应该更新。
在项目的 pubspec.yaml 所在的目录中创建 build.dart 文件。无论何时在项目中进行更改，Dart编辑器都会运行此文件（例如，当您保存对任何.dart文件的更改时）。
将以下代码放在build.dart中。更新'web/yourpage.html'以指向由LivePage监控的HTML文件。
现在更改一个.dart文件，保存并观看魔法展开。

简而言之：保存代码▶Dart编辑器触发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编辑器总是在监视你的文件，所以它会接受build.dart所做的更改，去“嘿，这个项目刚刚改变”，然后再次调用build.dart ......再次...... 。避免无限循环，如果文件至少在MIN_INTERVAL_MS过时，脚本只会触及该文件。

LivePage有一个功能，可以在更改时不引人注目地“重新注入”CSS和Javascript片段，而无需强制刷新整个页面。不幸的是，这里使用的强力技术（即覆盖html文件）会覆盖该行为。

Dart人员还提供了一个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();
  }
}

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

2 个答案: