Currently, I am developing a Wordpress theme starter application using node, gulp, and handlebars to generate templates.
I am running into an issue with the integration of plumber, notify, and gulp-sass plugins.
If you are interested in checking out my work so far, feel free to visit my repository: https://github.com/elassol/wp-theme
Every time I attempt to compile sass with my gulp task, I encounter an error:
Error in 'plumber' plugin: Unable to pipe to undefined
My code includes a Pumbler error function, a SASS TASK for preprocessing sass, and a gulp watch task to trigger the sass task upon file changes.
var gulp = require('gulp');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var sass = require ('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var browserSync = require('browser-sync');
var cache = require('gulp-cache');
var imageOpt = require('gulp-image-optimization');
var jshint = require('gulp-jshint');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var clean = require('gulp-clean');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var del = require('del');
var runSequence = require('run-sequence');
var sourcemaps = require('gulp-sourcemaps');
var fs = require('fs');
// ==========================================================
// Pumbler error function
// ==========================================================
function customPlumber(errTitle) {
return plumber({
errorHandler: notify.onError({
title: errTitle || "Error running Gulp",
message: "Error: <%= error.message %>",
sound: "Glass"
})
});
}
// ==========================================================
// STYLES TASK
// ==========================================================
gulp.task('sass', function(){
return gulp.src(paths.styles.src + '**/*.scss')
.pipe(customPlumber('Error Running Sass'))
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: ['theme/bower_components'],
precision: 2
}))
.pipe(autoprefixer({
browsers: ['ie 8-9', 'last 2 versions']
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.styles.build))
.pipe(browserSync.reload())
})
// ==========================================================
// WATCH TASK
// ==========================================================
gulp.task('watch', ['browserSync'], function(){
gulp.watch(basePaths.src + 'sass/**/*.scss', ['sass']);
gulp.watch(paths.scripts.src + '**/*.js', browserSync.reload);
gulp.watch('theme/*.html', browserSync.reload);
gulp.watch('theme/js/**/*.js', ['jshint']);
})If you have any insights on what I am doing wrong or could point me in the right direction, I would greatly appreciate it.
Thank you all in advance for your help!