如何将基础与grunt添加到ember.js应用程序工具包项目中

时间:2013-09-18 20:22:48

标签: ember.js compass-sass gruntjs grunt-contrib-compass

我试图用Ember AppKit,grunt和指南针设置我的第一个Ember.js应用程序。该应用程序通过grunt-contrib-compass开箱即用支持罗盘,但我无法弄清楚如何安装Zurb-Foundation,或者至少不能正确安装Z&B。&#34。 34;

据我所知,grunt-contrib-compass并没有提供罗盘安装方法的包装。我可以复制compass.js task settings指南针配置文件,但似乎应该有一种方法可以做到这一点而不重复数据。

或者,我想我可以手动复制所有东西,但这会切断我的路径以便轻松升级。

任何帮助都会非常感激。

1 个答案:

答案 0 :(得分:4)

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

bower.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 

我希望这有用。

干杯 戴夫