Question

我在node，gulp和handlebars中构建一个Wordpress主题入门应用来创建模板。

我遇到了管道工，通知和gulp-sass插件一起工作的问题。

这是我的回购链接： https://github.com/elassol/wp-theme

每当我尝试使用我的gulp任务编译sass时，我都会收到错误：

插件＆＃39;水管工的错误＆＃39;信息：无法管道到未定义的

我有一个Pumbler错误函数，一个用于预处理sass的SASS TASK和一个gulp watch任务，用于在文件更改时触发sass taks。

＆＃13;

   

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']);
})

＆＃13;

任何想法我做错了什么或者至少指出了我正确的方向？

先谢谢大家！

Answer 1

自定义错误功能不会抛出错误。管道上有一些未定义的管道。 ~~它似乎是源映射行的未定义管道。你应该要求gulp-sourcemaps。~~

编辑后：在这种情况下你应该改变

  .pipe(sync.reload());

像这样排队

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

补充说明

在gulp任务中，应该有一个整个管道流。每个管道都应该返回流对象，以便将流传递给下一个管道。

代码的第一个版本;同步，代理流循环因为重载方法没有返回任何内容。和gulp因为这个原因抛出错误。 stream：true属性尝试注入流并返回传入的流。就是这个。

实际上你可以使用sync.stream（）而不是sync.reload（）。或者，如果你不想注入你的风格，你可以像这个例子一样申请

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

水管工，通知和自定义错误功能给我一个错误的插件＆＃39;管道工＆＃39;：消息：无法管道到未定义

1 个答案:

补充说明