Automatycznie odśwież stronę po zmianie plików źródłowych Dart

Question

W jaki sposób można spowodować, że Dartium automatycznie ponownie załaduje aplikację kliencką po każdej zmianie w pliku źródłowym?

pokrewne: How do I make Firefox auto-refresh on file change?

Answer 1

EDIT:Można również pominąć to wszystko i po prostu hit Ctrl + R w edytorze. Poniższy skrypt może być nadal przydatny, jeśli używasz narzędzi poza edytorem Dart (ale wciąż polegasz na nim w procesie tworzenia) lub chcesz kodować i wyświetlać podgląd bez przełączania ostrości do okna Dartium.

Wyciśnij klawisze i zautomatyzuj swoje małpy!

Ta technika używa pliku dart.build do "dotknięcia" pliku HTML za każdym razem, gdy wprowadzisz zmianę do projektu, a następnie korzysta z rozszerzenia LivePage, aby odświeżyć je w przeglądarce.

1. Podpisz Dartium i zainstaluj rozszerzenie LivePage. (Ustawienia | Rozszerzenia | Pobierz więcej rozszerzeń | Livepage z www.fullondesign.co.uk | Dodaj do Chrome)

2. Uruchom projekt. Przeglądając swoją stronę w Dartium, kliknij ikonę strony na żywo. Pojawi się czerwona nakładka "Na żywo". Oznacza to, że LivePage obserwuje plik html i jego zasoby (np. Plik css) w poszukiwaniu zmian.

3. Testuj, dokonując szybkiej zmiany w pliku html i zapisując go. Strona w Dartium powinna zostać zaktualizowana.

4. Tworzenie build.dart plik w tym samym katalogu, co plik projektu pubspec.yaml. Program Dart Editor będzie uruchamiał ten plik za każdym razem, gdy wprowadzisz zmiany w projekcie (np. Po zapisaniu zmian w dowolnym z plików .dart).

5. Wpisz poniższy kod w pliku build.dart. Zaktualizuj 'web/yourpage.html', aby wskazać plik HTML monitorowany przez usługę LivePage.

6. Teraz zmień jeden z plików .dart, zapisz go i obejrzyj magię.

W skrócie: Zapisz kodu ▶ Dart Editor wyzwala build.dart ▶ dotyka html plików ▶ Livepage odświeża 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(); 
    } 
} 

Jeśli trzeba rozwiązać, można uruchomić dart build.dart z linii poleceń .

Funkcja dodaje lub usuwa końcowe miejsce na końcu pliku. Uwaga: LivePage nie wydaje się nic robić, jeśli zmienisz datę modyfikacji.

Ponieważ edytor Dart zawsze monitoruje twoje pliki, odbiera zmianę wprowadzoną przez build.dart, idź "Hej, ten projekt właśnie się zmienił" i ponownie wywołaj build.dart ... i znowu ... i jeszcze raz. Aby uniknąć nieskończonych pętli , skrypt dotyka pliku tylko wtedy, gdy jest nieaktualny przez co najmniej MIN_INTERVAL_MS.

LivePage posiada funkcję, która dyskretnie "ponownie wstrzykuje" fragmenty kodu CSS i JavaScript, gdy się zmieniają, bez wymuszania odświeżenia całej strony. Niestety zastosowana tutaj technika brute force (tj. Nadpisanie pliku html) zastępuje to zachowanie.

Ludzie z Dart oferują również stronę web_ui, która mówi o oprzyrządowaniu, ale zauważ, że nie musisz instalować pakietu web_ui, aby build.dart działał.

Answer 2

Na podstawie odpowiedzi kragerer odpowiedziałem, że zaktualizowałem jego skrypt do pracy w Dart 1.0. Dziękuję za odpowiedź na twoje pytanie z ważnym (na czas) rozwiązaniem.

build.dart

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/index.html'; 

void main() { 
    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 != null && new DateTime.now().difference(file.lastModifiedSync()).inMilliseconds < interval.inMilliseconds) return; 
    RandomAccessFile f = file.openSync(mode: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(); 
    } 
}