Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: ___browserSync___.io is not a function #1234

Open
eony opened this issue Oct 19, 2016 · 8 comments
Open

Uncaught TypeError: ___browserSync___.io is not a function #1234

eony opened this issue Oct 19, 2016 · 8 comments

Comments

@eony
Copy link

eony commented Oct 19, 2016

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);
});
@zolotykh
Copy link

Also have this problem

@haoss
Copy link

haoss commented Oct 26, 2016

backup to 2.14.0 - all works fine

@danielehrhardt
Copy link

i have the same Problem and my current workaround is to to go back to 2.14.0 there all is working fine.
Is there a better solution?

@eony
Copy link
Author

eony commented Nov 7, 2017

Mine was affected by retina.js v3. So maybe yours was affected by another plugin. So this wasn't caused by the browsersync.

@danielehrhardt
Copy link

okay, but how did you fix this, or workaround it, did you remove the library?
And why do you say it is not caused by browsersync when it's working with a older version?

@eony
Copy link
Author

eony commented Nov 7, 2017

Mine was not working with the older versions too. So I just stop using retina.js. Remove plugins one by one see if it works for you or not. Try to find the problem then you can find a solution after that.

@danielehrhardt
Copy link

Yes okay :) Thank you for your help.

@patrickbussmann
Copy link

Is there any solution except downgrade?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants