Gulp：麻煩設置browserSync和手錶

我正在學習Gulp和NPM，並決定使用Browser-Sync來測試我正在使用的PHP項目（使用XAMPP）。我知道Browser-Sync不適用於PHP文件，但我想用它與我的.css文件（以及稍後添加Sass）。Gulp：麻煩設置browserSync和手錶

我把npm，gulp，gulp-watch和Browser Sync安裝到我的項目的根目錄下，一切都很正常。

然後我創建了下面的一個gulp.js文件：

var gulp = require('gulp'), 
watch = require('gulp-watch'), 
browserSync = require('browser-sync').create(); 

gulp.task('watch', function() { 
    browserSync.init({ 
     server: { 
      baseDir: "./" 
     } 
    }); 

    watch('css/*.css', function() { 
     browserSync.reload(); 
    }); 

});

然而，當我gulp watch一個新的瀏覽器窗口中打開不只是顯示了Cannot GET /錯誤。

此外，URL顯示http://localhost:3002/而不是http://localhost:myproejct

我讀這可能是與我的baseDir這樣嘗試：

baseDir: "" 
baseDir: "./" 
baseDir: "../myproject"

會有人知道我做了什麼錯？

來源

2016-09-16 MeltingDog

你正在做的事情遠遠超出你想做的事。您可以使用瀏覽器同步作爲託管網站頂部的代理層。

請參閱從docs

# Proxy a PHP app + serve static files & watch them 
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public'

我覺得這下面的例子中，你需要什麼，從你的網站的物理根運行它，用你的PHP服務器地址替換mylocal.dev

npm install browser-sync -g 

browser-sync start --proxy 'mylocal.dev' --serveStatic 'css' --files 'css/*.css'

來源

2016-09-16 13:12:20 ndonohoe

你的代碼適合我。假設您的目標HTML文件在手動打開瀏覽器的情況下工作：Cannot Get/錯誤的一個常見原因是使用除瀏覽器同步的默認期望值index.html以外的索引文件。這可能是你遇到的問題嗎？如果你需要一個自定義的索引文件，你可以設置index選項：

browserSync.init({ 
    server: { 
     baseDir: 'mybasedirectorypath', 
     index: 'notindex.html' 
    } 
});

FWIW，你也可以做到這一點更有效，並保存自己安裝gulp-watch的重量（這個例子改編並從這個Browsersync docs example簡體）：

var gulp = require('gulp'), 
    browserSync = require('browser-sync').create(); 

gulp.task('watch', function() { 
    browserSync.init({ 
     server: { 
      baseDir: './' 
     } 
    }); 
    gulp.watch('css/*.css').on('change',browserSync.reload) 
});

對於使用自定義網址，請https://github.com/BrowserSync/browser-sync/issues/646其中有一些解決方案。

來源

2016-09-16 17:53:08 henry

Gulp：麻煩設置browserSync和手錶

回答

相關問題