CODEWITHSUNDEEP
javascriptnode.jsmacosgulpbrowser-sync
geeksal
geeksal

Reputation: 5016

Task 'browser-sync' is not in your gulpfile

I just started to use browsersync. So I started learning about gulp. I installed gulp using npm install gulp -g command. After this I initialized my project directory with package.json file by following command npm init. I then installed gulp in my project directory by npm install gulp --save-dev command.I also installed browsersync by npm install browser-sync --save-dev command.

Now I tried to run browsersync using gulp by gulp browser-sync command which gives me an error Task 'browser-sync' is not in your gulpfile

Below is my gulpfiles.js file

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

// process JS files and return the stream.
gulp.task('js', function () {
  return gulp.src('js/*js')
    .pipe(browserify())
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
    browserSync.reload();
    done();
});

// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {

// Serve files from the root of this project
browserSync.init({
    server: {
        baseDir: "./"
    }
});

// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
  gulp.watch("js/*.js", ['js-watch']);
});

I had already tried including module.exports = gulp; line at beginning as well as at end of gulpfile.js but the error persist. My current gulp version is 3.9.1 on mac OSX 10.12.3

Please help I am stuck.

Upvotes: 1

Views: 1334

Answers (1)

Mor Paz
Mor Paz

Reputation: 2223

The problem is you called your task serve and not browserSync:

// use default task to launch Browsersync and watch JS files
// NOTE how this task is called serve:
gulp.task('serve', ['js'], function () {

// Serve files from the root of this project
browserSync.init({
    server: {
        baseDir: "./"
    }
});

You could just change its' name:

// use default task to launch Browsersync and watch JS files
// NOTE at the name of the task now
gulp.task('browser-sync', ['js'], function () {

// Serve files from the root of this project
browserSync.init({
    server: {
        baseDir: "./"
    }
});

Upvotes: 4

Related Questions