Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>EDIT:</strong> <em>You can also skip all this and simply hit <strong>CTRL+R</strong> 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.</em></p> <p>Cut out keystrokes and automate your monkeys!</p> <p>This technique uses dart.build to "touch" your HTML file whenever you make a change to your project, then relies on the <a href="https://chrome.google.com/webstore/detail/livepage/pilnojpmdoofaelbinaeodfpjheijkbh">LivePage</a> extension to refresh it in the browser.</p> <ol> <li><p>Fire up Dartium and install the LivePage extension. (<em>Settings</em> | <em>Extensions</em> | <em>Get more extensions</em> | <em>LivePage from www.fullondesign.co.uk</em> | <em>Add to chrome</em>)</p></li> <li><p>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.</p></li> <li><p>Test, by making a quick change to your html file and saving it. The page in Dartium should update.</p></li> <li><p>Create a <strong>build.dart</strong> file in the same directory as your project's <strong>pubspec.yaml</strong>. 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).</p></li> <li><p>Put the code below in build.dart. Update <code>'web/yourpage.html'</code> to point to the HTML file being monitored by LivePage.</p></li> <li><p>Now change one of your .dart files, save it, and watch the magic unfold.</p></li> </ol> <p>In short: <strong>Save code &#9654; Dart Editor triggers build.dart &#9654; touches html file &#9654; LivePage refreshes Dartium</strong></p> <pre><code>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 &amp;&amp; new Date.now() .difference(file.lastModifiedSync()) .inMilliseconds &lt; 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(); } } </code></pre> <p>If you need to troubleshoot, you can run <code>dart build.dart</code> from a command line.</p> <p>The <code>touch()</code> 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.</p> <p>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 <code>MIN_INTERVAL_MS</code>.</p> <p>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.</p> <p>The Dart folks also provide a <a href="http://www.dartlang.org/articles/dart-web-components/tools.html">web_ui</a> page that talks about tooling, although note you don't actually need to install the web_ui package for build.dart to work.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload