2

テンプレートを作成するために、ノード、ガルプ、およびハンドルバーでWordpressテーマスターターアプリを構築しています。

配管工、通知、および gulp-sass プラグインの連携に問題があります。

ここに私のリポジトリへのリンクがあります: https://github.com/elassol/wp-theme

gulp タスクで sass をコンパイルしようとするたびに、エラーが発生します。

プラグイン '配管工' メッセージのエラー: 未定義にパイプできません

Pumbler エラー関数、sass を前処理する SASS TASK、およびファイルが変更されたときに sass taks を起動する gulp 監視タスクがあります。

   

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 タスクでは、パイプラインを通るストリームが必要です。すべてのパイプは、ストリームを次のパイプに渡すためにストリーム オブジェクトを返す必要があります。

コードの最初のバージョンで。sync、reload メソッドが原因でストリーム サイクルを中断すると、何も返されません。この理由でエラーをスローします。stream:true プロパティは、ストリームの注入を試行し、着信ストリームを返します。これです。

実際には、sync.reload() の代わりに sync.stream() を使用できます。または、スタイルを注入したくない場合は、この例のように適用できます

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

于 2016-05-12T23:27:29.320 に答える