Search code examples
gulpbrowser-sync

gulp browser sync didn't work, I have install npm browser sync but not working


I new using Gulp. I have install npm install -g browser-sync, but after finish instalation, I get warning code like this

    assert.js:350
    throw err;
    ^
AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:\PROJECT\TONJOO\test\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (D:\PROJECT\TONJOO\test\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (D:\PROJECT\TONJOO\test\gulpfile.js:12:6)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

I try to install again npm install -g browser-sync but it not help, Any wrong with my code?

you can check my code here: gulpfile.js

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

gulp.task('sass', function(){
    return gulp.src('app/scss/styles.scss')
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.stream());
});

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("./scss/styles.scss", ['sass']);
    gulp.watch("./*.html").on('change', browserSync.reload);
});

gulp.task('default', ['serve']);

Can you help me to solve this trouble? Thanks


Solution

  • To make sure you have browser-sync installed you'll have to take a look inside your package.json file. If you see browser-sync under 'Dependencies' then it's sucessfully installed.

    I think the error you get happens when you try to run the gulp tasks, and that is because you're using some old gulp syntax.

    [sass] becomes gulp.series('sass')
    

    Check out the changes below and see how you get on.

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var browserSync = require('browser-sync');
    
    gulp.task('sass', function(){
        return gulp.src('app/scss/styles.scss')
            .pipe(sass())
            .pipe(gulp.dest('app/css'))
            .pipe(browserSync.stream());
    });
    
    gulp.task('serve', function() {
    
        browserSync.init({
            server: "./"
        });
    
        gulp.watch("./scss/styles.scss",  gulp.series('sass'));
        gulp.watch("./*.html").on('change', browserSync.reload());
    });
    
    gulp.task('default', gulp.series('sass', 'serve'));
    

    That being said, browser-sync is currently not working very well for me either, it seems they have a big pileup of issues. I've resorted to using live-server instead.