這一次我要讓每改一次程式、網頁內容，瀏覽器就自動瀏覽將內容同步變成我改過後結果，可以用 browser-sync，
這好處是只有更改才會 refresh，不用透過瀏覽器還要裝 auto-refresh 等外掛每固定時間更新頁面。
安裝 browser-sync
npm install -D browser-sync
編輯 gulpfile.js
// 加入
var browserSync = require('browser-sync').create();
// 把這個
gulp.task("default", ['connect-php']);
// 改成
gulp.task('default', ['connect-php'], function () {
browserSync.init();
gulp.watch(web_home+"**/*.*").on('change', browserSync.reload);
});
再執行 gulp 時它會跟你說要貼上一段 script 在 </body> 前面，才可讓自動 refresh 生效
$ gulp
[17:26:05] Using gulpfile D:\gulptest\gulpfile.js
[17:26:05] Starting 'connect-php'...
[17:26:05] Finished 'connect-php' after 12 ms
[17:26:05] Starting 'default'...
[17:26:05] Finished 'default' after 31 ms
[Browsersync] Copy the following snippet into your website, just before the closing </body> tag
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.24.4'><\/script>".replace("HOST", location.hostname));
//]]></script>
[Browsersync] Access URLs:
--------------------------------------
UI: http://localhost:3001
--------------------------------------
UI External: http://192.168.137.1:3001
--------------------------------------
[Browsersync] Reloading Browsers...
就這樣子
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<title>Index</title>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1">
</head>
<body>
<?php
echo 'wow';
?>
111111
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.24.4'><\/script>".replace("HOST", location.hostname));
//]]></script>
</body>
</html>
留言