5

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

相关： 如何让 Firefox 在文件更改时自动刷新？

4

2 回答 2

6

编辑： 您也可以跳过所有这些，只需在编辑器中按CTRL+R 。如果您在 Dart 编辑器之外使用工具（但在构建过程中仍然依赖它）或者想要在不将焦点转移到 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 文件时），Dart 编辑器就会运行此文件。

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

  6. 现在更改您的 .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 工作。

于 2013-01-24T22:30:09.197 回答
2

根据kragerer 的回答，我已经更新了他的构建脚本以在 Dart 1.0 中工作。感谢您使用有效的（当时）解决方案回答您的问题。

构建.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 回答