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.
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=0
— https://docs.npmjs.com/cli/outdated
This should fix the issue.