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

Question

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

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

Answer 1

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

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

这种技术使用dart.build在您对项目进行更改时"触摸"HTML文件,然后依赖LivePage扩展在浏览器中刷新它.

1. 启动Dartium并安装LivePage扩展.(设置 | 扩展 | 获取更多扩展 | LivePage来自www.fullondesign.co.uk | 添加到chrome)

2. 运行您的项目.在Dartium中查看页面时,单击LivePage图标.将出现红色"实时"叠加层.这意味着LivePage正在观看html文件及其资产(例如css文件)以进行更改.

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

4. 创建build.dart在同一目录作为项目的文件pubspec.yaml.无论何时在项目中进行更改,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.