CODEWITHSUNDEEP
javascriptgulpgulp-browser-sync
Miami Larry
Miami Larry

Reputation: 29

Identifier 'browserSync' has already been declared

I keep getting an error "Identifier 'browserSync' has already been declared" but i cant see where the problem is.Here is my code

// Watch files
function watchFiles() {
    gulp.watch("*.js", gulp.series(scriptsLint, scripts, browserSyncReload));
    gulp.watch(["processHTML"], gulp.series(browserSyncReload));
  }

//Task Live Reload

function browserSync(done) {
    browserSync.init({
      server: './dist',
      port: 8080,
      ui: {
        port: 8081
      }
    })
    done()
  };

// BrowserSync Reload
function browserSyncReload(done) {
    browserSync.reload();
    done();
  }

// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.parallel(processHTML,js);
const watch = gulp.parallel(watchFiles, browserSync);

Upvotes: 0

Views: 1120

Answers (2)

Amit Beckenstein
Amit Beckenstein

Reputation: 1332

Your browserSync() function, declared in line 9, is named the same as another variable in its scope, browserSync (in line 10), and needs to be renamed.

// Watch files
function watchFiles() {
    gulp.watch("*.js", gulp.series(scriptsLint, scripts, browserSyncReload));
    gulp.watch(["processHTML"], gulp.series(browserSyncReload));
  }

//Task Live Reload

function browserSyncFunc(done) {
    browserSync.init({
      server: './dist',
      port: 8080,
      ui: {
        port: 8081
      }
    })
    done()
  };

// BrowserSync Reload
function browserSyncReload(done) {
    browserSync.reload();
    done();
  }

// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.parallel(processHTML,js);
const watch = gulp.parallel(watchFiles, browserSyncFunc /* I'm guessing you meant to use the browserSync function here, not the object */);

Upvotes: -1

dippas
dippas

Reputation: 60573

You need to rename your function browserSync to other name, because that's a keyword reserved for the BrowserSync library.

Something like this:

// Watch files
function watchFiles() {
    gulp.watch("*.js", gulp.series(scriptsLint, scripts, reload));
    gulp.watch(["processHTML"], gulp.series(reload));
  }

//Task Live Reload

function localServer(done) {
    browserSync.init({
      server: './dist',
      port: 8080,
      ui: {
        port: 8081
      }
    })
    done()
  };

// BrowserSync Reload
function reload(done) {
    browserSync.reload();
    done();
  }

// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.parallel(processHTML,js);
const watch = gulp.parallel(watchFiles, localServer);

Upvotes: 1

Related Questions