当Dart源文件更改时自动刷新页面 [英] Automatically refresh page when Dart source files change

问题描述

相关：
http://stackoverflow.com/questions/1346716/firefox-auto-refresh-on-file-change\"> Firefox自动刷新文件更改

解决方案

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

剪下按键并自动化猴子！

这种技术使用dart.build文件，然后依靠 LivePage 扩展程序在浏览器中刷新它

1. 启动Dartium并安装LivePage扩展。 （ | | 获取更多扩展添加到Chrome ）




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




3. 通过快速更改您的html文件并保存它。




4. 在与项目 pubspec相同的目录中创建 build.dart 文件。 yaml 。




5. 将您的项目中的更改添加到项目中时，Dart Editor将运行此文件。下面的代码在build.dart。更新'web / yourpage.html'以指向LivePage正在监控的HTML文件。

简而言之：保存代码▶Dart编辑器触发build.dart▶触摸html文件▶LivePage刷新Dartium

  import dart： io'; 
 
 //这个数字需要足够高，以防止Dart编辑器进入
 //进入无限编译循环。如果发生这种情况，只需注释
 //调用touch（）并保存此文件。 
 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））; 
} 
 
 ///对[filename]的内容保存一个小的修改，除非
 ///已经在最后一个[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） 
 RandomAccessFile f = file.openSync（FileMode.APPEND）; 
 try {
 //如果文件没有以空格结尾，则追加一个，否则删除它
 int length = f.lengthSync（）; 
 f.setPositionSync（length  -  1）; 
 if（f.readByteSync（）== SPACE）{
 f.truncateSync（length  -  1）; 
} else {
 f.writeByteSync（SPACE）; 
} 
} finally {
 f.closeSync（）; 
} 
} 
  

如果需要排除故障，可以运行<$

touch（）函数在文件末尾追加或删除尾部空格。注意：如果所有更改的内容都是修改日期，LivePage似乎不会执行任何操作。

因为Dart编辑器总是在监视文件，通过build.dart，去嘿，这个项目只是改变了，并再次调用build.dart ...又一次又一次。为了避免
无限循环，只有当该文件已经陈旧至少 MIN_INTERVAL_MS 时，脚本才会触摸该文件。

LivePage有一个功能，当它们改变时，不会引人注目地重新注入CSS和JavaScript代码段，而不强制刷新整个页面。不幸的是，这里使用的强力技术（即覆盖html文件）会覆盖该行为。

Dart的用户还提供了一个web_ui 页面介绍工具，虽然注意，你实际上不需要安装web_ui包为build.dart工作。

How can you make Dartium automatically reload your web client application whenever a change is made to the source files?

Related: Firefox auto-refresh on file change

解决方案

EDIT: You can also skip all this and simply hit CTRL+R in the Editor. The script below may still be useful if you're using tooling outside of the Dart Editor (but are still relying on it for the build process) or want to code-and-preview without focus shifting to the Dartium window.

Cut out keystrokes and automate your monkeys!

This technique uses dart.build to "touch" your HTML file whenever you make a change to your project, then relies on the LivePage extension to refresh it in the browser.

1. Fire up Dartium and install the LivePage extension. (Settings | Extensions | Get more extensions | LivePage from www.fullondesign.co.uk | Add to chrome)

2. Run your project. While viewing your page in Dartium, click the LivePage icon. A red "Live" overlay will appear. This means LivePage is watching the html file and its assets (e.g. css file) for changes.

3. Test, by making a quick change to your html file and saving it. The page in Dartium should update.

4. Create a build.dart file in the same directory as your project's pubspec.yaml. The Dart Editor will run this file whenever you make a change in your project (e.g. when you save changes to any of your .dart files).

5. Put the code below in build.dart. Update 'web/yourpage.html' to point to the HTML file being monitored by LivePage.

6. Now change one of your .dart files, save it, and watch the magic unfold.

In short: Save code ▶ Dart Editor triggers build.dart ▶ touches html file ▶ LivePage refreshes 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();
  }
}

If you need to troubleshoot, you can run dart build.dart from a command line.

The touch() function either appends or removes a trailing space at the end of the file. Note LivePage doesn't seem to do anything if all you change is the modified date.

Because the Dart Editor is always monitoring your files, it will pick up the change made by build.dart, go "Hey, this project just changed" and call build.dart again... and again... and again. To avoid infinite loops, the script only touches the file if its been stale for at least MIN_INTERVAL_MS.

LivePage has a feature that unobtrusively "re-injects" CSS and Javascript snippets when they change, without forcing a refresh of the entire page. Unfortunately the brute force technique used here (i.e. overwriting the html file) overrides that behavior.

The Dart folks also provide a web_ui page that talks about tooling, although note you don't actually need to install the web_ui package for build.dart to work.

这篇关于当Dart源文件更改时自动刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！