json - Gulp 使用 gulp-jade 和 gulp-data

Question

我尝试在工作流程中将 gulp-data 与 gulp-jade 结合使用，但收到与 gulp-data 插件相关的错误。

这是我的 gulpfile.js

var gulp = require('gulp'),
  plumber = require('gulp-plumber'),
  browserSync = require('browser-sync'),
  jade = require('gulp-jade'),
  data = require('gulp-data'),
  path = require('path'),
  sass = require('gulp-ruby-sass'),
  prefix = require('gulp-autoprefixer'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  process = require('child_process');

  gulp.task('default', ['browser-sync', 'watch']);

  // Watch task
  gulp.task('watch', function() {
    gulp.watch('*.jade', ['jade']);
    gulp.watch('public/css/**/*.scss', ['sass']);
    gulp.watch('public/js/*.js', ['js']);
  });

  var getJsonData = function(file, cb) {
    var jsonPath = './data/' + path.basename(file.path) + '.json';
    cb(require(jsonPath))
  };

  // Jade task
  gulp.task('jade', function() {
    return gulp.src('*.jade')
    .pipe(plumber())
    .pipe(data(getJsonData))
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('Build/'))
    .pipe(browserSync.reload({stream:true}));
  });

  ...

  // Browser-sync task
  gulp.task('browser-sync', ['jade', 'sass', 'js'], function() {
    return browserSync.init(null, {
    server: {
      baseDir: 'Build'
    }
  });
});

这是一个基本的 json 文件，名为index.jade.json

{
  "title": "This is my website"
}

我得到的错误是:

Error in plugin 'gulp-data'
[object Object]

Answer 1

您收到错误是因为在 getJsonData 中您将所需的数据作为第一个参数传递给回调。这是为可能出现的错误而保留的。

在您的情况下，不需要回调。正在查看gulp-data usage example这应该有效:

.pipe(data(function(file) {
  return require('./data/' + path.basename(file.path) + '.json');
}))

完整示例:

var gulp = require('gulp');
var jade = require('gulp-jade');
var data = require('gulp-data');
var path = require('path');
var fs   = require('fs');

gulp.task('jade', function() {
  return gulp.src('*.jade')
    .pipe(data(function(file) {
      return require('./data/' + path.basename(file.path) + '.json');
    }))
    .pipe(jade({ pretty: true }))
    .pipe(gulp.dest('build/'));
});

如果您在 gulp.watch 上运行任务，请使用此选项:

.pipe(data(function(file) {
  return JSON.parse(fs.readFileSync('./data/' + path.basename(file.path) + '.json'));
}))