Gulp：Trouble setting browserSyncとWatch

Question

私はGulpとNPMを学び、私が取り組んでいるPHPプロジェクト（XAMPPを使用）でBrowser-Syncを使って自分自身をテストすることにしました。私はブラウザ同期がPHPファイルで動作しないことを知っていますが、私は自分の.cssファイルで使用したいと思っていました。

私のプロジェクトのルートディレクトリにnpm、Gulp、Gulp-watch、Browser Syncがインストールされているようです。しかし

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 /エラーを示しています

は、私は次のとgulp.jsファイルを作成しました。

また、URLがhttp://localhost:3002/はなくhttp://localhost:myproejct

を示し、私はこれを読んで、私のbaseDirとは何かを持っていることがありそうしようとした：

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

誰も私が間違って何をやったか知っているだろうか？

Answer 1

あなたは、あなたが望むことをするために必要以上にやっています。ブラウザ同期は、ホスティングされているサイトの上にあるプロキシレイヤーとして使用できます。

私は、これはあなたが、必要なサイトの物理的なルートからそれを実行して、PHPサーバーアドレス

npm install browser-sync -g 

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

Answer 2

と mylocal.devに置き換えられます何だと思います docs

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

から、次の例を参照してください。

あなたのコードはうまく動作します。ターゲットのHTMLファイルがブラウザで手動で開かれていると仮定すると、Cannot Get/エラーの一般的な原因の1つは、Browsersyncのデフォルト期待値であるindex.html以外のインデックスファイルを使用することです。それはあなたが抱えている問題でしょうか？カスタムインデックスファイルが必要な場合は、indexオプションを設定することができます

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

FWIWを、あなたはまた、より効率的にこれを行うには、自分でgulp-watchをインストールするの重量を保存することができます（この例では、適応し、このBrowsersync docs exampleから簡体字） ：

カスタムURLを使用するよう

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をチェックしてください。