title: Using Gulp's browser-sync with MAMP in localhost testing environment
body: <p>I have searched around but no posts pinpointed the pitholes to avoid when using Gulp's BrowserSync with a localhost testing environment. So here is this post.</p>
  
  <p>I am using gulp browser-sync, doing testing with MAMP. Right now I cannot get my browser-sync watch to work. I want to reload browser whenever I save my files.</p>
  
  <p>Under MAMP settings,</p>
  
  <ol>
  <li>Apache port: 80</li>
  <li>Nginx port: 80</li>
  <li>MySQL port: 3306</li>
  </ol>
  
  <p>gulpfile.js</p>
  
  <pre><code>var gulp = require('gulp');
  var browserSync = require('browser-sync'); // create a browser sync instance.
  
  //tasks for development
  // Start browserSync server
  gulp.task('browserSync', function() {
    browserSync({
      server: {
          baseDir: "app"
      },
      proxy: "localhost:8080" // can be [virtual host, sub-directory, localhost with port]
  });
  
  gulp.task('watch', ['browserSync'], function () {
    gulp.watch('app/*.{php,css,js}', browserSync.reload);
  });
  </code></pre>
  
  <p>Since we are talking about MAMP here, my directory is in htdocs/test as shown below:
  <a href="https://i.stack.imgur.com/D91uU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/D91uU.png" alt="enter image description here"></a></p>
  
  <p>Also, my index.php file is inside /app</p>
  
  <p>I am thinking I have made mistakes on many levels but right now any combination of my solutions doesnt seem to help and Ive spent hours on this. Any suggestions?</p>