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

概述每当对源文件进行更改时,如何让Dartium自动重新加载您的Web客户端应用程序？ 有关： How do I make Firefox auto-refresh on file change? 编辑：您也可以跳过所有这些,只需在编辑器中按CTRL R.如果您在Dart编辑器之外使用工具(但仍然依赖于它来构建过程),或者希望在没有焦点转移到Dartium窗口的情况下进行代码和预览,则下面的脚本可能仍 每当对源文件进行更改时,如何让Dartium自动重新加载您的Web客户端应用程序？

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

解决方法 编辑：您也可以跳过所有这些,只需在编辑器中按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工作.

总结

以上是内存溢出为你收集整理的html – Dart源文件更改时自动刷新页面全部内容，希望文章能够帮你解决html – Dart源文件更改时自动刷新页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。