ember.js - 如何将带有 grunt 的基础添加到 ember.js 应用程序工具包项目

Question

我正在尝试使用 Ember AppKit 设置我的第一个 Ember.js 应用程序、 咕噜声和 compass 。该 appkit 通过 grunt-contrib-compass 提供开箱即用的 compass 支持。但我终其一生都无法弄清楚如何安装 Zurb-Foundation，或者至少不能“正确”安装。

据我所知，grunt-contrib-compass 没有提供 compass 安装方法的包装器。我可以复制 compass.js task settings对于 compass 配置文件，但似乎应该有一种方法可以在不复制数据的情况下做到这一点。

或者，我想我可以手动复制所有内容，但这会切断我轻松升级的路径。

任何帮助将不胜感激。

Answer 1

这就是我为我的 ember-app-kit 项目添加基础的方式。

鲍尔.json

{
  "name": "ember-app-kit",
  "dependencies": {
    "ember": "http://builds.emberjs.com.s3.amazonaws.com",
    "handlebars": "1.0.0",
    "jquery": "~1.9.1",
    "qunit": "~1.12.0",
    "foundation": "~4.3.2",
    "momentjs": "~2.1",
  }
}

bower install
sass 任务如下所示:

module.exports = {
  compile: {
    files: {
      'tmp/public/assets/app.css': 'app/styles/app.scss'
    }
  }
};

我只编译一个文件。

app.scss 文件:

@import "foundation_config";
@import "foundation_includes";
@import "mixins/index";
@import "fonts/index";
... truncated for brevity

_foundation_config.scss 文件是基础变量

_foundation_includes.scss 文件是我包含我正在使用的模块的地方。

@import "../../vendor/foundation/scss/normalize";
@import "../../vendor/foundation/scss/foundation/components/global";
@import "../../vendor/foundation/scss/foundation/components/grid";
@import "../../vendor/foundation/scss/foundation/components/visibility";
@import "../../vendor/foundation/scss/foundation/components/block-grid";
@import "../../vendor/foundation/scss/foundation/components/type";
@import "../../vendor/foundation/scss/foundation/components/buttons";
@import "../../vendor/foundation/scss/foundation/components/forms";
@import "../../vendor/foundation/scss/foundation/components/custom-forms";
// @import "../../vendor/foundation/scss/foundation/components/button-groups";
// @import "../../vendor/foundation/scss/foundation/components/dropdown-buttons";
// @import "../../vendor/foundation/scss/foundation/components/split-buttons";
// @import "../../vendor/foundation/scss/foundation/components/flex-video";
@import "../../vendor/foundation/scss/foundation/components/section";
@import "../../vendor/foundation/scss/foundation/components/top-bar";
... truncated for brevity 

我希望这是有帮助的。

干杯
戴夫