用Yeoman / Grunt设置Jade用于模板化的正确方法

时间:2013-12-10 06:30:53

标签: node.js express gruntjs pug yeoman

我很难让布局和局部在我的项目中发挥出色,我想知道设置它的正确方法是什么。

我正在使用grunt-cotrib-jade

我的文件结构是这样的:

app
  |_jade
  |     |_layouts
  |     |      |_ _default_layout.jade
  |     |      |_ _layout.jade
  |     |
  |     |_partials
  |     |      |_ _html-head.jade
  |     |      |_ _head.jade
  |     |      |_ _foot.jade
  |     |
  |     |_Page-1
  |     |      |_index.jade
  |     |      |_partials
  |     |
  |     |_Page-2
  |     |      |_partials
  |     |      |_index.jade
  |     |
  |     |_index.jade
  |
  |_sass
  |_scripts
  |_images
  |_bower_components

到目前为止,除了布局和部分的使用不起作用之外,我已经有了咕噜声编译所有内容。我在_head.jade_foot.jade以及page-1/index.jade上有脚本等时出现问题我使用extends ../layouts/_default_layout调用布局。 _default_layout.jade看起来像这样:

!!! 5
//if lt IE 7
  html.no-js.lt-ie9.lt-ie8.lt-ie7  
//if IE 7
  html.no-js.lt-ie9.lt-ie8  
//if IE 8
  html.no-js.lt-ie9  
// [if gt IE 8] <!
html.no-js
  // <![endif]

  include ../partials/_html-head

  body(class=page)
    include ../partials/_head
    block content
    include ../partials/_foot

最后我将Gruntfile.js放在http://jsfiddle.net/daimz/G7vYP/1/

如果有人对如何构建和正确设置有任何建议,我将非常感激,因为我真的希望能够理解这一切是如何工作的。

1 个答案:

答案 0 :(得分:0)

您通过headerfooter调用了包含,但您的文件名为head.jadefoot.jade他们必须匹配