Gulp 使用 gulp-jade 和 gulp-data [英] Gulp using gulp-jade with gulp-data

问题描述

我正在尝试在我的工作流程中将 gulp-data 与 gulp-jade 一起使用，但我遇到了与 gulp-data 插件相关的错误.

I'm trying to use gulp-data with gulp-jade in my workflow but I'm getting an error related to the gulp-data plugin.

这是我的 gulpfile.js

Here is my 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

And this is a basic json file, named index.jade.json

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

我得到的错误是:

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

推荐答案

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

You are getting error because in getJsonData you pass required data as first argument to the callback. That is reserved for possible errors.

在您的情况下，不需要回调.查看 gulp-data 使用示例 这应该可以:

In your case the callback isn't needed. Looking at gulp-data usage example this should work:

.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 上运行任务，请使用它:

Use this if you're running the task on gulp.watch:

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

这篇关于Gulp 使用 gulp-jade 和 gulp-data的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！