Search code examples
gulpgulp-watch

gulp watch "TypeError: Object function (server)"


I can't get gulp watch to work. It gives me an error that starts with "TypeError: Object function (server)". Here's the full error (sorry for the screenshot): http://cl.ly/image/3p0j1F2L1S0I

Here's my gulp file:

var gulp = require('gulp'),

// Include plugins
  cache   = require('gulp-cache'),
  gutil   = require('gulp-util'),
  plumber = require('gulp-plumber'),
  notify  = require('gulp-notify'),
  rename  = require('gulp-rename'),

  compass   = require('gulp-compass'),
  minifycss = require('gulp-minify-css'),

  jshint = require('gulp-jshint'),
  uglify = require('gulp-uglify'),
  concat = require('gulp-concat'),

  imagemin   = require('gulp-imagemin'),

  livereload = require('gulp-livereload');



// Paths
// ============================================================
// var PATH = 'public_html/assets';



// Error Handling
// ============================================================
var onError = function (err) {
  gutil.beep();
  console.log( err );
};



// Styles Task
// ============================================================
gulp.task('styles-global', function() {
  return gulp.src('assets/scss/app.scss')
    .pipe( plumber({ errorHandler: onError }) )
    // .pipe(sass({ style: 'compressed' }))
    .pipe(compass({
      config_file: 'config.rb',
      css: 'assets/css',
      sass: 'assets/scss',
      image: 'assets/img'
    }))
    // .pipe(rename({suffix: '.min'}))
    // .pipe(minifycss())
    .pipe(gulp.dest('assets/css'))
    .pipe(livereload())
    .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('styles-base', function() {
  return gulp.src('assets/scss/base.scss')
    .pipe( plumber({ errorHandler: onError }) )
    // .pipe(sass({ style: 'compressed' }))
    .pipe(compass({
      config_file: 'config.rb',
      css: 'assets/css',
      sass: 'assets/scss',
      image: 'assets/img'
    }))
    // .pipe(rename({suffix: '.min'}))
    // .pipe(minifycss())
    .pipe(gulp.dest('assets/css'))
    .pipe(livereload())
    .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('styles-light', function() {
  return gulp.src('assets/scss/light.scss')
    .pipe( plumber({ errorHandler: onError }) )
    // .pipe(sass({ style: 'compressed' }))
    .pipe(compass({
      config_file: 'config.rb',
      css: 'assets/css',
      sass: 'assets/scss',
      image: 'assets/img'
    }))
    // .pipe(rename({suffix: '.min'}))
    // .pipe(minifycss())
    .pipe(gulp.dest('assets/css'))
    .pipe(livereload())
    .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('styles', ['styles-global', 'styles-base', 'styles-light']);




// JS Tasks
// ============================================================
gulp.task('scripts', function() {
  return gulp.src([
    'assets/js/plugins/jquery.hoverIntent.js',
    'assets/js/plugins/fancybox/jquery.fancybox.js',
    'assets/js/src/app.js'
  ])
    .pipe( plumber({ errorHandler: onError }) )
    .pipe(concat('app.js'))
    .pipe(gulp.dest('assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('assets/js'))
    .pipe(livereload())
    .pipe(notify({ message: 'JS task complete' }));
});


// HTML Tasks
// ============================================================
gulp.task('html', function() {
  return gulp.src('assets/tpl/**/*.html')
    .pipe(livereload());
});


// Default task
// -------------------------------------------------------------------
gulp.task('default', [], function() {
  gulp.start('styles', 'scripts');
  // gulp.start('styles', 'scripts', 'images');
});


// Watch task
// -------------------------------------------------------------------
gulp.task('watch', function() {
  gulp.watch('assets/scss/**/*.scss', ['styles']);
  gulp.watch('assets/js/**/*.js', ['scripts']);

  livereload.listen();
  gulp.watch('assets/tpl/**/*.html', ['html']).on('change', livereload.changed);
});

I have no idea how to fix. I'm running node.js version 0.10.33, gulp version 3.8.8. If I run the scripts or styles tasks, that runs fine. Just gulp watch that fails.


Solution

  • Be sure to check your gulp -v, make sure it is up to date and then you can check to make sure your packages are up to date npm outdated --depth=0https://docs.npmjs.com/cli/outdated

    This should fix the issue.