javascript - Pug JS 变量传递

标签 javascript gulp pug pugjs

您好,我在将变量从 gulp 传递到 pug 然后再传递到过滤器时遇到问题。我像这样传递变量。

gulp.task('pug-wp', function () {
return gulp.src('src/templates/*.pug')
.pipe(pug({
        pretty: true,
        filters: {
            php: pugPHPFilter
        },
        data: { 
           development: 'php'
        }
    }))
 .pipe(rename({
    extname: ".php"
  }))
  .pipe(gulp.dest(outputPath))
  .pipe(browserSync.stream());

然后我想在

中使用它
:php(type=development)

我有错误提示

msg: "development" is not constant. All filters are rendered compile-time so                                      filter options must be constants.

最佳答案

确实,过滤器已编译,因此表达式在过滤器属性中不可用,这不是像标签元素那样的属性,这都是静态的,但您可以使用此技巧:

case development
  when 'php'
    :php(type='php')
  when 'foo'
    :php(type='foo')
  when 'bar'
    :php(type='bar')

或者,如果development变量仅依赖于环境,则只需动态传递过滤器即可:

switch (developement) {
  case 'php':
    pugPHPFilter.setSomeDefaultOption({ type: 'php' });
    break;
  case 'foo':
    pugPHPFilter.setSomeDefaultOption({ type: 'foo' });
    break;
}
.pipe(pug({
    pretty: true,
    filters: {
        php: pugPHPFilter
    }
}))

setSomeDefaultOption 是一个示例,请引用您的 pugPHPFilter 来查找等效函数。

关于javascript - Pug JS 变量传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41987584/

相关文章:

angularjs - 使用Gulp用IIFE包装javascript文件

node.js - Gulp-watch 不起作用,无法运行

javascript - VueJs 超出最大调用堆栈大小

canvas 元素中的 JavaScript 球不跟随光标

javascript - 没有依赖项的 Angularjs 注入(inject)器错误

node.js - 如何将 Jade 与 Hapi 框架结合使用

javascript - 在 Jade/Express 中迭代数组有限制吗?

javascript - API签名生成

javascript - Gulp.js : How to dynamically concatenate subdirectory files, 但不是主目录中的文件

html - 点击一个按钮让右边的按钮向左移动(点击效果是让按钮变小)+Jade