2

我正在节点、gulp 和把手中构建一个 Wordpress 主题启动器应用程序来创建模板。

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

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

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

插件“管道工”消息中的错误：无法通过管道传输到未定义

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

   

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

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

在此先感谢人们！

4

1 回答 1

1

自定义错误函数不会引发错误。管道中有一些未定义的管道。在 sourcemaps 行似乎未定义管道。你应该需要 gulp-sourcemaps。

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

  .pipe(sync.reload());

像这样的线

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

附加说明

在 gulp 任务中应该有一个流通过管道。每个管道都应返回流对象以将流传递到下一个管道。

在您的代码的第一个版本；同步，因为 reload 方法中断了流循环，所以什么都不返回。并出于这个原因 gulp 抛出错误。stream:true 属性尝试注入流并返回传入的流。就是这个。

实际上你可以使用sync.stream() 而不是sync.reload()。或者如果你不想注入你的样式，你可以像这个例子一样应用

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

于 2016-05-12T23:27:29.320 回答