如何将 pugjs (jade-lang) 与 Ember-CLI 集成？答案

【问题标题】：How to integrate pugjs (jade-lang) with Ember-CLI?如何将 pugjs (jade-lang) 与 Ember-CLI 集成？
【发布时间】：2016-09-20 10:08:45
【问题描述】：

我是 npm 新手。

我下载了ember-cli 来设计一个应用程序，但我也想安装pugjs 来呈现html。

所以..我不用写很多不必要的html代码了。

那么有什么方法可以将pugjs（jade-lang）与Ember-CLI整合在一起。

提前致谢。

【问题讨论】：

标签： ember.js npm pug ember-cli pugjs

【解决方案1】：

您需要添加 Broccoli Jade 编译器并在此处加载以获取更多信息，请查看以下资源：

1-https://github.com/sindresorhus/broccoli-jade

2-https://www.npmjs.com/package/generator-ember-jade-zurb-express//Yoeman generator which may help you to scaffold your project.

但是，我强烈建议您使用emblemjs。该项目的概述是：

    p Introducing Emblem.js: a new templating language
      that compiles to Handlebars.js

    ul
      li Indentation-based (like Slim, Jade, HAML, etc.)
      li Compiles to Handlebars

; full compatibility with
     both custom and built-in Handlebars helpers
  li Ember.js-friendly syntax and full compatibility
     with auto-updating functionality.

/ Emblem is HTML5-aware; Render HTML if a line starts with
  known HTML tag, else invoke HB helper or perform property lookup.
  These defaults are easily overridable when necessary.
ul
  each person in people
    li = person.name

section.ember-features
  / easy, natural Ember bindAttr support
  h1 class=foo The class name of this element is bound to `foo`
  p class=isActive:flashing:inactive Ember.js bound css classes

  / implicit Ember action handlers
  a click="doIt" href="#" Hello, how are you doing, #{name}?

/ condense nested content into a single line if that's how you roll
#footer: ul.menu-items: each menu_items: li: a.menu-link href=url: link_text

if something
  p something was true!
else 
  p something was false!

【讨论】：