问题描述
我正在尝试在我的工作流程中将 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!