Tự động làm mới trang khi tệp nguồn Dart thay đổi

Question

Làm cách nào để bạn có thể đặt Dartium tự động tải lại ứng dụng khách web của mình bất cứ khi nào có thay đổi đối với tệp nguồn?

liên quan: How do I make Firefox auto-refresh on file change?

Answer 1

EDIT:Bạn cũng có thể bỏ qua tất cả điều này và chỉ cần nhấn CTRL + R trong trình soạn thảo. Kịch bản bên dưới có thể vẫn hữu ích nếu bạn đang sử dụng công cụ bên ngoài Trình chỉnh sửa Dart (nhưng vẫn dựa vào nó cho quá trình xây dựng) hoặc muốn mã và xem trước mà không tập trung chuyển sang cửa sổ Dartium.

Cắt các tổ hợp phím và tự động hóa các chú khỉ của bạn!

Kỹ thuật này sử dụng dart.build để "chạm" tệp HTML của bạn bất cứ khi nào bạn thực hiện thay đổi cho dự án của mình, sau đó dựa vào tiện ích LivePage để làm mới trong trình duyệt.

1. Bật lên Dartium và cài đặt tiện ích mở rộng LivePage. (Cài đặt | Extensions | Khai thác thêm phần mở rộng | LivePage từ www.fullondesign.co.uk | Thêm vào Chrome)

2. Chạy dự án của bạn. Trong khi xem trang của bạn ở Dartium, hãy nhấp vào biểu tượng LivePage. Lớp phủ "Trực tiếp" màu đỏ sẽ xuất hiện. Điều này có nghĩa là LivePage đang xem tệp html và nội dung của tệp đó (ví dụ: tệp css) để thay đổi.

3. Kiểm tra, bằng cách thực hiện thay đổi nhanh đối với tệp html của bạn và lưu tệp đó. Trang trong Dartium nên cập nhật.

4. Tạo một build.dart tập tin trong thư mục tương tự như dự án của bạn pubspec.yaml. Trình chỉnh sửa Dart sẽ chạy tệp này bất cứ khi nào bạn thực hiện thay đổi trong dự án của mình (ví dụ: khi bạn lưu thay đổi vào bất kỳ tệp .dart nào của bạn).

5. Đặt mã bên dưới vào build.dart. Cập nhật 'web/yourpage.html' để trỏ đến tệp HTML đang được LivePage giám sát.

6. Bây giờ, hãy thay đổi một trong các tệp .dart của bạn, lưu nó và xem ma thuật mở ra.

Nói tóm lại: Lưu đang ▶ Dart biên tập gây build.dart ▶ chạm tập tin html ▶ LivePage làm mới 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(); 
    } 
} 

Nếu bạn cần phải khắc phục sự cố, bạn có thể chạy dart build.dart từ một dòng lệnh .

Chức năng touch() nối thêm hoặc xóa dấu cách ở cuối tệp. Lưu ý LivePage dường như không làm bất cứ điều gì nếu tất cả các bạn thay đổi là ngày sửa đổi.

Bởi vì trình chỉnh sửa Dart luôn giám sát các tệp của bạn, nó sẽ nhận thay đổi do build.dart thực hiện, đi "Hey, dự án này vừa mới thay đổi" và gọi lại build.dart ... và một lần nữa ... và lần nữa. Để tránh vòng lặp vô hạn, tập lệnh chỉ chạm vào tệp nếu tệp cũ của nó ít nhất là MIN_INTERVAL_MS.

LivePage có tính năng phô trương "chèn lại" các đoạn mã CSS và Javascript khi chúng thay đổi mà không phải làm mới toàn bộ trang. Thật không may, kỹ thuật bạo lực được sử dụng ở đây (tức là ghi đè lên tệp html) sẽ ghi đè hành vi đó.

Nhân vật Dart cũng cung cấp trang web_ui nói về công cụ, mặc dù lưu ý rằng bạn không thực sự cần phải cài đặt gói web_ui cho build.dart để hoạt động.

Answer 2

Dựa tắt kragerer câu trả lời Tôi đã cập nhật tập lệnh xây dựng của mình để hoạt động trong Dart 1.0. Cảm ơn bạn đã trả lời câu hỏi của bạn với giải pháp hợp lệ (vào thời điểm đó).

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(); 
    } 
}