水管工，通知和自定义错误功能使我在插件“水管工”中出现错误：消息：无法通过管道传递给未定义

Question

I'm building a Wordpress theme starter app in node, gulp and also handlebars to create templates.

I'm having an issue with plumber, notify and gulp-sass plugins working together.

Here is a link to my repo: https://github.com/elassol/wp-theme

every time I try to compile sass with my gulp task I get an error:

Error in plugin 'plumber' Message: Can't pipe to undefined

I have a Pumbler error function, a SASS TASK to preprocess sass and a gulp watch task to fire the sass taks when a file change.

 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({ // Customizing error title 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')) // inititalizr sourcemap before anyother pluging that alter files .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']); }) 

Any ideas what I'm doing wrong or at least point me to the right direction?

Thanks in advance people!

Answer 1

custom error function doesn't throw the error. there is some undefined pipe at pipeline. it seems undefined pipe at sourcemaps lines. u should require gulp-sourcemaps.

---

after edit: in this case u should change

  .pipe(sync.reload());

line like this

  .pipe(sync.reload({stream:true}));

additional explanion

in gulp task there should be a stream throught the pipeline. every pipe should return the stream object for pass the stream to next pipe.

at first version of your code; sync, broking the stream cycle because of reload method returns nothing. and gulp throwing an error for this reason. stream:true property try to inject the streams and returning the incoming stream back. this is it.

actually u can use sync.stream() instead of sync.reload(). or if u dont want to inject your styles u can apply like this example

https://www.browsersync.io/docs/gulp/#gulp-reload