使用 Yeoman/Grunt 为模板设置 Jade 的正确方法答案

【问题标题】：Correct way to set up Jade with Yeoman/Grunt for templating使用 Yeoman/Grunt 为模板设置 Jade 的正确方法
【发布时间】：2013-12-10 06:30:53
【问题描述】：

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

我正在使用 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/

如果有人对如何正确构建和设置它有任何建议，我将不胜感激，因为我真的希望能够了解这一切是如何运作的。

【问题讨论】：

标签： node.js express gruntjs pug yeoman

【解决方案1】：

您通过header 和footer 调用了包含但您的文件被命名为head.jade 和foot.jade 它们必须匹配

【讨论】：

我在创建这个问题时打错了字。很抱歉造成混乱。在实践中，它们使用相同的名称。基本上最大的问题是我可以看到包含的内容，但包含的所有脚本和样式都不匹配。 main.css 应该在 localhost:8000/css/main.css 但是当我检查控制台时它正在 localhost:8000/page-1/css/main.css 寻找它所以这就是为什么我认为我做错了因为我不认为局部和布局应该像这样工作。