用 gulp 编译玉器：TypeError答案

【问题标题】：jade compilation with gulp : TypeError用 gulp 编译玉器：TypeError
【发布时间】：2016-04-22 10:44:47
【问题描述】：

我想使用 gulp 编译这个 .jade 文件。但我遇到了一些错误。通过一个 gulp 任务，我正在编译一批 .jade 文件，没有变量的文件编译得很好，下面的文件编译卡住了

extends layout

block header
    meta(content=entry.Title, itemprop="name")
    block genre
    meta(content="/book/#{entry.authurl}/#{entry.titleurl}", itemprop="url")
    .row.text-center
        if (entry.Fields.length !== 0)
            h2.col-xs-12.col-md-12
                each field, index in entry.Fields
                    if (index === 0)
                        = field
                    else
                        = " >> " + field
        if (entry.Subfields.length !== 0)
            h3.col-xs-12.col-md-12
                each subfield, index in entry.Subfields
                    if (index === 0)
                        = subfield
                    else
                        = " >> " + subfield
block content
    input(id="bookid",value="#{entry._id}",type="hidden")
    section.row
        h1.col-xs-12.col-md-12= entry.Title
        dl.col-xs-12.col-md-8.dl-horizontal
            dt
            dd.text-right
                span.stars <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                span.library <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <img src="/booklist/bibtex_icon_small.png" class="get-bibtex" alt="Get BibTeX!">
            each val, index in entry.attrs
                dt= index
                if (index == "Author")
                    dd(id=index) <a href="/author/#{entry.authurl}">#{val}</a>
                else if (index == "Authors")
                    dd(id=index)
                        each auth, ind in entry.attrs.Authors
                            if (ind === 0)
                                <a href="/author/#{entry.authurls[ind]}">#{auth}</a>
                            else
                                | , <a href="/author/#{entry.authurls[ind]}">#{auth}</a>
                else
                    dd(id=index)= val
            block voteon
        aside.col-xs-12.col-md-4#ref
            block cataside
            h4
                strong Appears on:
            if (typeof(Lists) === "undefined")
                | An error occurred.
            else
                ul.list-unstyled
                    each list in Lists
                        li
                            a(href="/list/" + list.listurl)= list.Title
                if (Lists.length > 9)
                    p
                        a(href="/lists?" + entry.Title) All lists
    .row
        aside.col-xs-12.col-md-4.small
            strong Associated Links
            ul.list-unstyled
                each link in entry.Links
                    li= link
                button.newlink Add a link
        .col-xs-12.col-md-8
            p Write a Review
            each review in entry.Reviews
                h5= review.title
                article= review.body

当我执行 gulp 命令时

显示此错误日志：

events.js:141
      throw er; // Unhandled 'error' event
      ^
TypeError: /Users/Orion/NodeWorks/WebDev/views/entry.jade:4
    2|
    3| block header
  > 4|     meta(content=entry.Title, itemprop="name")
    5|     block genre
    6|     meta(content="/book/#{entry.authurl}/#{entry.titleurl}", itemprop="url")
    7|     .row.text-center

Cannot read property 'Title' of undefined
  at eval (<anonymous>:228:47)
  at eval (<anonymous>:994:22)
  at res (/Users/Orion/NodeWorks/WebDev/node_modules/jade/lib/index.js:219:38)
  at DestroyableTransform.CompileJade [as _transform] (/Users/Orion/NodeWorks/WebDev/node_modules/gulp-jade/index.js:34:50)
  at DestroyableTransform.Transform._read (/Users/Orion/NodeWorks/WebDev/node_modules/gulp-jade/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
  at DestroyableTransform.Transform._write (/Users/Orion/NodeWorks/WebDev/node_modules/gulp-jade/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
  at doWrite (/Users/Orion/NodeWorks/WebDev/node_modules/gulp-jade/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
  at writeOrBuffer (/Users/Orion/NodeWorks/WebDev/node_modules/gulp-jade/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
  at DestroyableTransform.Writable.write (/Users/Orion/NodeWorks/WebDev/node_modules/gulp-jade/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
  at write (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
  at flow (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
  at DestroyableTransform.pipeOnReadable (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
  at emitNone (events.js:67:13)
  at DestroyableTransform.emit (events.js:166:7)
  at emitReadable_ (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
  at emitReadable (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
  at readableAddChunk (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)
  at DestroyableTransform.Readable.push (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:149:10)
  at DestroyableTransform.Transform.push (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:145:32)
  at afterTransform (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:101:12)
  at TransformState.afterTransform (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:79:12)
  at DestroyableTransform.noop [as _transform] (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/through2.js:26:3)
  at DestroyableTransform.Transform._read (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
  at DestroyableTransform.Transform._write (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
  at doWrite (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
  at writeOrBuffer (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
  at DestroyableTransform.Writable.write (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
  at write (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
  at flow (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
  at DestroyableTransform.pipeOnReadable (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
  at emitNone (events.js:67:13)
  at DestroyableTransform.emit (events.js:166:7)
  at emitReadable_ (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
  at emitReadable (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
  at readableAddChunk (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)
  at DestroyableTransform.Readable.push (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:149:10)
  at DestroyableTransform.Transform.push (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:145:32)
  at afterTransform (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:101:12)
  at TransformState.afterTransform (/Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:79:12)
  at /Users/Orion/NodeWorks/WebDev/node_modules/gulp/node_modules/vinyl-fs/lib/src/getContents/bufferFile.js:12:5
  at FSReqWrap.readFileAfterClose [as oncomplete] (evalmachine.<anonymous>:380:3)

我猜这与变量有关，我怎样才能使它工作？

【问题讨论】：

您是否将entry 传递给您的模板？
这是 gulp 任务：gulp.task('gulpjade', function() { return gulp.src('views/*.jade') .pipe(gulpjade()) .pipe(gulp .dest('templates')); });
是的，我明白这一点。您的模板中没有变量 entry，因为您收到此错误。你能发布整个jade 任务吗？
整个翡翠任务是什么意思？你的意思是整个 gruntfile.js 吗？那是由所有 grunt.task 组成的？
不，只是负责玉器渲染的部分，gulp.task("gulpjade") ...

标签： node.js gulp pug

【解决方案1】：

您似乎没有将 entry 变量传递给您的玉模板。如果你想使用jade 文件中的数据，你需要像这样在gulp 任务中传递它：

带数据的翡翠任务示例

var gulp = require('gulp'),        
    jade = require('gulp-jade');

gulp.task('jade', function () {
    gulp.src('jade/index.jade')
        .pipe(jade({
            // Pass data to templates
            data: {
                entry: {
                    Title: 'My page title',
                    authurl: '/some/url/' //... and so on
                }
            }
        })
        .pipe(gulp.dest('html/'))
});

index.jade

h1= entry.Title
p Url is #{entry.authurl}

【讨论】：

谢谢。但这是针对单个变量的，如果我必须从节点后端发送大量数据怎么办？以及如何将“我的页面标题”分配给标题（不是某个固定值）？
@ShafayatAlam 如果您正在使用服务器渲染，那么您不需要任何 gulp 玉任务。只需在node.js 应用程序中传递数据。这一切都取决于您的后端环境，例如express.js 示例 - expressjs.com/en/guide/using-template-engines.html
好吧，谢谢。是的，它无需 gulp 编译即可工作。但是用 gulp 预编译没有什么好处吗？预编译后反应不是更快吗？