html自动刷新时正在改源代码,html – Dart源文件更改时自动刷新页面

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

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

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

>启动Dartium并安装LivePage扩展. (设置|扩展|获取更多扩展| LivePage来自www.fullondesign.co.uk |添加到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工作.