browserSync.reload doesn't execute using Gulp task

Question

I am struggling with a problem on Gulp task for plenty hours. I couldn't figure out how to make it work.

Let me show first my project structure:

project/
|
|-- Gulp/
|   |-- Base/
|       |-- start-server.js
|       |-- sass.js
|           ...
|   |-- Watch/
|       |-- watch-sass.js
|           ...
|   |-- config.js
|       ...
|-- gulpfile.js
|   ...

Also let me show code of each file mentioned in this structure. gulpfile.js

/*jslint node: true */
"use strict";

var requireDir    = require('require-dir'); // Node module to require whole directories

// ***** Require all tasks from Gulp folder *****
requireDir('./Gulp', {
  recurse: true
});

Gulp/config.js

module.exports = {
  paths: {
    Project: {
      dir:            './',
      src:            './www',
      dist:           './dist'
    },

    HTML: {
      all:            './www/Views/**/**/*.html',
      dir:            './www/Views',
      entry:          './www/Views/index.html'
    },

    Sass: {
      all:            './www/StyleSheets/Sass/**/**/*.scss',
      dir:            './www/StyleSheets/Sass',
      entry:          './www/StyleSheets/Sass/main.scss',
      map:            '../../../dist/maps/sass',
      vendor:         './www/StyleSheets/Sass/Vendor/**/*.scss'
    },

    CSS: {
      all:            './www/StyleSheets/CSS/**/**/*.css',
      dir:            './www/StyleSheets/CSS',
      entry:          './www/StyleSheets/CSS/main.css',
      map:            '../../../dist/maps/css',
      vendor:         './www/StyleSheets/CSS/Vendor/**/*.css'
    },

    JS: {
      all:            './www/JavaScripts/**/**/*.js',
      dir:            './www/JavaScripts',
      entry:          './www/JavaScripts/app.js',
      map:            '../../../dist/maps/js',
      vendor:         './www/JavaScripts/Vendor/**/*.js'
    },
    // ...
  }
};

Gulp/Base/auto-reload.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync').create();
// ***END*** IMPORTS ***END***

// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
  browserSync.init({
    server: {
      baseDir: config.paths.Project.dir
    },
    open: true
  });
});

Gulp/Base/sass.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var sass          = require('gulp-sass'),
    browserSync   = require('browser-sync'),
    notify        = require('gulp-notify'),
    sourceMaps    = require('gulp-sourcemaps');
// ***END*** IMPORTS ***END***

// ***** Sass compiler *****
gulp.task('sass', function () {
  return gulp.src(config.paths.Sass.all)
    .pipe(sourceMaps.init())
    .pipe(sass({
      style: 'compressed'
    }))
    .on("error", notify.onError(function (error) {
      return "Error: " + error.message;
    }))
    .pipe(sourceMaps.write(config.paths.Sass.map))
    .pipe(gulp.dest(config.paths.CSS.dir))
    .pipe(browserSync.reload({
      stream: true
    }));
});

Gulp/Watch/watch-sass.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync'),
    runSequence   = require('run-sequence');
// ***END*** IMPORTS ***END***

// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['start-server'], function () {
  gulp.watch(config.paths.Sass.all, ['sass', browserSync.reload]);
});

PROBLEM DESCRIPTION:

In the last file Gulp/Watch/watch-sass.js the function browserSync.reload doesn't work. the task 'watch-sass', 'start-server' and then 'sass' is working, it executes without problems. However it doesn't auto-refresh page using browserSync.reload after finishing compiling *.scss files and I cannot figure out why. Anyone can help me?

Funk Soul Ninja · Answer 1 · 2016-10-16T01:48:07.910

0

I'm a bit new to gulp, but it looks like you don't have gulp-watch installed or imported. Install/import it.

var watch = require("gulp-watch");

Then replace gulp.watch with watch:

// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['auto-reload'], function () {
    watch(config.paths.Sass.all, ['sass'], function() {
        browserSync.reload();
    });
});

If not the above, maybe you could compare your code to my gulp files found here: https://github.com/FunkSoulNinja/travel-site

edited Oct 16 '16 at 01:48

answered Oct 15 '16 at 01:57

Funk Soul Ninja

2,113
3
17
27

That's not the case. The watch function is in the core of Gulp so you don't need to require anything else than gulp just for it. Also the watch is already working without problems as explained, only thing that doesn't work is reloading the page automatically after compiling Sass files. – xeho91 Oct 15 '16 at 07:13
Hmm. I suppose I write my gulp files differently. Isn't the array where you have ['sass', browserSync] Only for gulp task dependencies? Or is that some sort of shortcut? (I'm talking about where you place the browserSync.reload). – Funk Soul Ninja Oct 15 '16 at 08:19
browserSync.reload is one of gulp task depedencies. Using these tasks in Array allows you to run all of these tasks at same time. At least from what I learned so far. – xeho91 Oct 15 '16 at 13:23

xeho91 · Answer 2 · 2016-10-15T13:30:25.987

I found out that if I put gulp task 'start-server' in 'watch-sass.js' file instead of separating it to his own file, it works.

The code for watch-sass.js looks like this:

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync').create(),
    runSequence   = require('run-sequence');
// ***END*** IMPORTS ***END***

// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
  browserSync.init({
    server: {
      baseDir: config.paths.Project.dir
    },
    open: true
  });
});

// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['start-server'], function () {
  gulp.watch(config.paths.Sass.all, function () {
    runSequence(
      'sass',
      'useref-css',
      'move-index',
      browserSync.reload
    );
  });
});

The function browserSync.reload works. At least in this method. Although I wanted to have 'start-server' task in separated file and I don't know how to do it.

So, based on this method I wanted to do something similar for JS files. I named the task and file 'watch-js.js'. The code is almost extactly same, just different config paths and tasks in runSequence. watch-js.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync').create(),
    runSequence   = require('run-sequence');
// ***END*** IMPORTS ***END***

// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
  browserSync.init({
    server: {
      baseDir: config.paths.Project.dir
    },
    open: true
  });
});

// ***** Gulp watch JS files *****
gulp.task('watch-js', ['start-server'], function () {
  gulp.watch(config.paths.JS.all, function () {
    runSequence(
      'useref-js',
      'move-index',
      browserSync.reload
    );
  });
});

Aaaand here comes the surprise. Running this task, using same method the function browserSync.reload is NOT being executed! I excepted it to work the same as in watch-sass, where it works. I'm really lost now, anyone more experienced could help me what wrong I am doing?

browserSync.reload doesn't execute using Gulp task

2 Answers2