前篇 安裝使用 Nodejs + Gulp 並搭配 PHP

這一次我要讓每改一次程式、網頁內容,瀏覽器就自動瀏覽將內容同步變成我改過後結果,可以用 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>

 

Related posts 相關文章
安裝使用 Nodejs + Gulp 並搭配 PHP
More...

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。