Browser sync reload browse trước khi compile xong HTML khi dùng PUG, JADE

Browser sync reload browser trước khi compile xong HTML khi dùng PUG, JADE

Đây là một lỗi cực khó chịu khi sử dụng Browser sync cùng với các npm packages như gulp-pug, gulp-jade, gulp-html-tag-include để compile ra HTML. Nguyên nhân chính của vấn đề này chính là khi các page nhiều lên mỗi page sau khi được compile sẽ tương đương một file HTML như home.html, services.html, products.html …. và khi sửa bất kỳ 1 page nào đó nó sẽ complile tất cả các page hiện có. Nhưng điều đang nói ở đây chính là Browser sync nó luôn theo dõi sự thay đổi của các file HTML, chỉ cần 1 file có thay đổi nó sẽ reload lại trình duyệt ngay lập tức và tất nhiên page mà bạn sửa chưa được compile ra file HTML mới thì trình duyệt đã reload lại file HTML cũ vậy lên bạn sẽ chẳng thấy thay đổi nào.

Vấn đề thì nhức nhối vậy đó nhưng đến thời điểm hiện tại nhà phát triển Browser sync họ cũng chưa có giải pháp nào để khắc phục triệt đổ nó nó cả vậy nên chúng ta chỉ có thể sử lý nó 1 cách tạm thời vây. Giải pháp ở đây đơn giản chỉ là delay lại thời gian reload lại trang, đợi khi tất cả các page được compile xong thi ta cho Browser sync reload lại page.

Sử dụng tham số reloadDelay: 1000 để hoãn thời gian reload page lên 1000ms. Tùy theo số lượng các page các bạn làm nhiều hay ít các bạn có thể tăng giảm thời gian reloadDelay cho thích hợp.

Mặc dù chưa phải là cách giải quyết triệt để nhưng nó cũng là một cách khá ổn trong thời điểm hiện tại khi mà bạn muốn chơi với các công nghệ mới như PUG, JADE. Và mình sẽ cập nhật các giải pháp triệt để hơn khi mình tìm ra hoặc ai có giải pháp nào tốt hơn xin hãy comment bên dưới, xin trân thành cám ơn !