使用吞噬数据的g G吞噬 [英] Gulp using gulp-jade with gulp-data

问题描述

我尝试在工作流程中使用gulp-jade的gulp-data，但是我收到了与gulp-data插件有关的错误。

是我的gulpfile.js

  var gulp = require（'gulp'），
 plumber = require（'gulp-水管工'），
 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']）; 
 $ b $ //观察任务
 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））
}; 
 $ b $ // Jade任务
 gulp.task（'jade'，function（）{
 return gulp.src（'*。jade'）
 .pipe （$）
 .pipe（data（getJsonData））
 .pipe （'Build /'））
.pipe（browserSync.reload（{stream：true}））; 
}）; 
 
 ... 
 
 //浏览器同步任务
 gulp.task（'browser-sync'，['jade'，'sass'，'js '），function（）{
 return browserSync.init（null，{
 server：{
 baseDir：'Build'
} 
}）; 
}）; 
  

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

  {
title：这是我的网站

  

我得到的错误是：

 插件' gulp-data'
 [object Object] 
  

解决方案

因为在 getJsonData 中传递了所需数据作为回调的第一个参数，所以出现错误。这是为可能的错误保留的。

在你的情况下，不需要回调。查看 gulp-data使用示例，应该可以正常工作：

  .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 $ b $ pre $ data $（$）$ .readFileSync（'./ data /'+ path.basename（file.path）+'.json'））;
}））

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.

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

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

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

The error I get is:

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

解决方案

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

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

Full example:

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

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

这篇关于使用吞噬数据的g G吞噬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！