question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught TypeError: ___browserSync___.io is not a function

See original GitHub issue

Browser Sync + Gulp

I am using Browser-sync with Gulp. There was no error so far, everything was good but recently I am getting this error in the console. The server starts and when I change the code I see the “reloading browser” text but it does not reload the page. No idea what to look and change, I really appreciate it if you can guide me to where to change or what could possibly cause this error. And of course tried to search for the same error but couldn’t find anything that related to this error.

Here is a ss of error: sync-err

Versions

node: v6.9.0 browser-sync:2.17.5, gulp: 3.9.1

OS: Windows 10

my gulpfile.js

var gulp = require("gulp");
var browserSync = require('browser-sync').create();

var plugins = require("gulp-load-plugins")({
    pattern: ['gulp-*', 'gulp.*', 'browser-sync', 'imagemin-jpeg-recompress', 'imagemin-pngquant'],
    replaceSting: /\bgulp[\-.]/,
    rename: { // Rename/shorten usage for plugin names
        'imagemin-jpeg-recompress': 'imageminJpeg',
        'imagemin-pngquant': 'imageminPng'
    }
});

var reload  = browserSync.reload;

gulp.task('sync', ['js', 'css', 'sass'], function () {
    // Change bold with your project's folder name
    browserSync.init({
        proxy: "localhost/bold/"
    });
});

// Js
// Concat + Minifiy Js Files and move to vendor folder
var jsFiles = ['assets/js/plugins/*.js'];
var jsDest = 'assets/js/';

gulp.task('js', function () {
    return gulp.src(jsFiles)
        .pipe(plugins.order([
            'jquery.min.js',
            'bootstrap.min.js',
            'imagesloaded.pkgd.min.js',
            '*.js',
        ]))
        .pipe(plugins.concat('plugins.js'))
        .pipe(gulp.dest(jsDest))
        .pipe(plugins.rename({ suffix:'.min' }))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(jsDest));
});

// Css
// Concat + Minifiy Css Files and move to vendor folder
var cssFiles = 'assets/css/plugins/*.css';
var cssDest = 'assets/css/';

gulp.task('css', function () {
    return gulp.src(cssFiles)
        .pipe(plugins.order([
            'bootstrap.min.css',
            '*.css'
        ]))
        .pipe(plugins.concat('plugins.css'))
        .pipe(gulp.dest(cssDest))
        .pipe(plugins.rename({ suffix:'.min' }))
        .pipe(plugins.cssmin({keepSpecialComments : 0 }))
        .pipe(gulp.dest(cssDest));
});

// Sass
var sassFile = 'assets/sass/style.scss';
var sassDest = 'assets/css/';
gulp.task('sass', function () {
    return gulp.src(sassFile)
        .pipe(plugins.sass({outputStyle: 'expanded'})) // expanded - compressed - compact - nested
        .pipe(plugins.autoprefixer({
            browsers: ['last 2 versions', 'ie 9'],
            cascade: false
        }))
        .pipe(gulp.dest(sassDest))
        .pipe(browserSync.stream());
});


// call - gulp htmlmin
// Html files minify 
// this will make your html files minified 
// make sure to copy all html files before using this
gulp.task('htmlmin', function () {
    return gulp.src('*.html')
        .pipe(plugins.htmlmin({
            collapseWhitespace: true,
            removeComments: true,
            minifyJS: true, // minify js too
            minifyCSS: true // minify css too
        }))
        .pipe(gulp.dest(''))
});

// Images - Optimize jpeg and png images
gulp.task('imagemin', function () {
    return gulp.src('assets/images/**/*')
        .pipe(plugins.imageminJpeg({loops: 3})())
        .pipe(plugins.imageminPng({quality: '65-80', speed: 4})())
        .pipe(gulp.dest('assets/images'));
});

// Default Task
gulp.task('default', ['js', 'css', 'sass', 'sync'], function() {
    // watch js files
    gulp.watch(jsFiles, ['js']);

    // watch scss files
    gulp.watch(['assets/sass/*.scss', 'assets/sass/*/*.scss'], ['sass']);

    // watch css files
    gulp.watch(cssFiles, ['css']);

    gulp.watch([
        '*.html',
        'assets/js/main.js'
    ]).on('change', reload);
});

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:8

github_iconTop GitHub Comments

5reactions
haosscommented, Oct 26, 2016

backup to 2.14.0 - all works fine

0reactions
patrickbussmanncommented, Nov 14, 2017

Is there any solution except downgrade?

Read more comments on GitHub >

github_iconTop Results From Across the Web

browserSync + Gulp, getting error => TypeError: _.contains is ...
Static Server + watching scss/html files gulp.task('serve', ['app-css'], function() { browserSync.init({ // server: ".
Read more >
BrowserSync/browser-sync - Gitter
Hello, I'm trying to get a boilerplate with mithril working, however its not picking up button clicks. Is this a known issue?
Read more >
Browsersync + Gulp.js
Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices.
Read more >
if is not a function (browserSync.active) when running gulp ...
When I run a gulp task for Zen I get TypeError: $.if is not a function at Gulp.
Read more >
BrowserSync does not work with a proxy on docker host.
for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync ... Uncaught TypeError: F is not a function...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found