title: gulp-file-include and BrowserSync Doesn't Reflect the Changes to Browser
body: <p>I am trying to use <a href="https://www.npmjs.com/package/gulp-file-include" rel="nofollow noreferrer">gulp-file-include</a> for include some common sections like header or footer from <code>/src/includes</code> folder into any .html pages in a project tree along with <a href="https://www.npmjs.com/package/browser-sync" rel="nofollow noreferrer">BrowserSync</a> to refresh changes.</p>
  
  <p>When I use <code>gulp</code> command from command line it's compiling all files into <code>/dist</code> folder without problems (I hope). But after, if I change anything from <code>/src/index.html</code> it doesn't reflect changes to browser or write changes into <code>/dist/index.html</code>.</p>
  
  <p>I can't figure out exactly where the problem is. You can see the project from <a href="https://github.com/fatihturan/HTMLBase" rel="nofollow noreferrer">this Git repo</a> and here is my <code>gulpfile.js</code> content:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var gulp = require('gulp');
  var autoprefixer = require('gulp-autoprefixer');
  var plumber = require('gulp-plumber');
  var gutil = require('gulp-util');
  var concat = require('gulp-concat');
  var cleanCSS = require('gulp-clean-css');
  var rename = require("gulp-rename");
  var sass = require('gulp-sass');
  var uglify = require('gulp-uglify');
  var browserSync = require('browser-sync').create();
  var sourcemaps  = require("gulp-sourcemaps");
  var fileinclude = require("gulp-file-include");
  
  // File Paths
  var CSS_PATH = { src: "./src/sass/*.scss", dist: "./dist/css/"};
  var JS_PATH = { src: "./src/js/*.js", dist: "./dist/js/"};
  var HTML_PATH = { src: "./src/*.html", dist: "./dist/html/*.html"};
  var INCLUDES_PATH = "./src/includes/**/*.html";
  var JQUERY_PATH = "node_modules/jquery/dist/jquery.min.js";
  
  // Error Handling
  var gulp_src = gulp.src;
  gulp.src = function() {
    return gulp_src.apply(gulp, arguments)
      .pipe(plumber(function(error) {
        // Output an error message
        gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
        // emit the end event, to properly end the task
        this.emit('end');
      })
    );
  };
  
  // Styles
  gulp.task('styles', function() {
    return gulp.src(CSS_PATH["src"])
      .pipe(sass())
      .pipe(autoprefixer('last 2 versions'))
      .pipe(sourcemaps.init())
      .pipe(gulp.dest(CSS_PATH["dist"]))
      .pipe(cleanCSS())
      .pipe(sourcemaps.write())
      .pipe(concat("main.css", {newLine: ""}))
      .pipe(gulp.dest(CSS_PATH["dist"]))
      .pipe(browserSync.reload({ stream: true }))
  });
  
  // Scripts
  gulp.task('scripts', function() {
    return gulp.src([JS_PATH["src"], JQUERY_PATH])
      .pipe(uglify())
      .pipe(concat('main.min.js'))
      .pipe(gulp.dest(JS_PATH["dist"]));
  });
  
  // File Include
  gulp.task('fileinclude', function() {
    return gulp.src(HTML_PATH["src"])
      .pipe(fileinclude({
        prefix: '@@',
        basepath: 'src/includes'
      }))
      .pipe(gulp.dest('dist'));
  });
  
  // BrowserSync
  gulp.task('browserSync', function() {
    browserSync.init({
      server: {
        baseDir: 'dist/'
      },
      open: false,
      browser: "Google Chrome",
      notify: true,
      notify: {
          styles: {
              top: 'auto',
              bottom: '0',
              borderRadius: '4px 0 0 0',
              opacity: .9
          }
      },
      snippetOptions: {
        rule: {
          match: /&lt;\/body&gt;/i,
          fn: function (snippet, match) {
            return snippet + match;
          }
        }
      }
    })
  })
  
  // Watch task
  gulp.task('watch', ['fileinclude', 'browserSync'], function() {
    gulp.watch(CSS_PATH["src"], ['styles']);
    gulp.watch(JS_PATH["src"], ['scripts']);
    gulp.watch(INCLUDES_PATH, ['fileinclude']);
    gulp.watch([HTML_PATH["src"], HTML_PATH["src"]], browserSync.reload);
  });
  
  gulp.task('default', ['fileinclude', 'styles', 'scripts', 'browserSync', 'watch' ]);</code></pre>
  </div>
  </div>
  </p>