[指南] 前端自動化開發 Gulp + PHP + Browserify @地瓜大的飛翔旅程

章節連結

設定
相關文章

雖說使用 Gulp 搭配 Browserify 可以成功在前端開發時啟用 Hot Reload，不過若你在網址列開啟時輸出的是 Cannot Get / 的字樣，那麼你的後端伺服器就有一定機率是 PHP，那就得先額外先連上 PHP 伺服器後，再執行 Browserify 即可。

設定

1. 在 Server 端設定好 Apache 的網址轉發後，用 gulp-connect-php 輸入設定值
2. 連線上後，使用 callback 呼叫 browserSync 即可
3. 若你要在更改某些檔案後做 reload，你要在所需要的 task 後方加上 browserSync.stream({ stream: true })
4. PHP 的檔案內，一定要有 <body></body> 這對標籤當作掛載點，否則會無法正常發揮功能

const browserSync = require('browser-sync').create();
const connectPHP = require('gulp-connect-php');

gulp.task('browser-sync-php', function () {
  connectPHP.server(
    {
      port: 6666,
      keepalive: true,
      base: '<啟用時的載入資料夾位置>',
      open: true,
    },
    function () {
      browserSync.init({
        proxy: '<proxy Address>',
      });
    }
  );
});