gulp-file-include and BrowserSync Doesn't Reflect the Changes to Browser

Question

I am trying to use gulp-file-include for include some common sections like header or footer from /src/includes folder into any .html pages in a project tree along with BrowserSync to refresh changes.

When I use gulp command from command line it's compiling all files into /dist folder without problems (I hope). But after, if I change anything from /src/index.html it doesn't reflect changes to browser or write changes into /dist/index.html.

I can't figure out exactly where the problem is. You can see the project from this Git repo and here is my gulpfile.js content:

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: /<\/body>/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' ]);

Answer 1

I seem to have it working. I added the following to the end of the 'scripts' and 'fileinclude' tasks:

.pipe(browserSync.reload({ stream: true }))


//  File Include
gulp.task('fileinclude', function() {
  return gulp.src(HTML_PATH.src)
    .pipe(fileinclude({
      prefix: '@@',
      basepath: 'src/includes'
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({ stream: true }))
});

// Scripts
gulp.task('scripts', function() {
  // return gulp.src([JS_PATH["src"], JQUERY_PATH])
  return gulp.src(JS_PATH.src)
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(JS_PATH.dist))
    .pipe(browserSync.reload({ stream: true }))
});

so that the browser is reloaded after any changes to those two groups. I changed the 'watch' task to:

// Watch task

// gulp.task('watch', ['fileinclude', 'browserSync'], function() {
//  'browserSync' is already running from 'default' task so remove it from above
//  'fileinclude' is called below only where it is needed, not for changes to js/scss files

gulp.task('watch',  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);
  // the above looks for changes to the source and immediately reloads,
  //    before any changes are made to the dist/html

  // Watch for changes in the html src and run 'fileinclude'
  //  browserSync reload moved to end of 'fileinclude'

  gulp.watch([HTML_PATH.src], ['fileinclude']);
});

Edit: to handle the subsequent question about gulp failing to watch new files, I have made some changes to my original answer. But you should really be using gulp4.0 now IMO. Gulp3.9.x relied on a library that was problematic in watching for new, deleted or renamed files.

You will need two more plugins:

var watch = require("gulp-watch");
var runSequence = require("run-sequence");

The gulp-watch plugin is better at watching for new, etc. files, but doesn't take 'tasks' as arguments but instead it takes functions as arguments so that is why I used run-sequence. [You could rewrite your tasks as regular functions - but then you might as well shift to gulp4.0].

Then use this 'watch' task:

gulp.task('watch', function () {

  watch(CSS_PATH.src, function () {
    runSequence('styles');
  });
  watch(JS_PATH.src, function () {
    runSequence('scripts');
  });
  watch(INCLUDES_PATH,  function () {
    runSequence('fileinclude');
  });
  watch([HTML_PATH.src], function () {
    runSequence('fileinclude');
  });
});