如何在ember.js应用程序工具项目中添加基础 [英] How do I add foundation with grunt to a ember.js app kit project

问题描述

我正在尝试使用 Ember AppKit 设置我的第一个Ember.js应用程序，咕噜和指南针。该应用程序通过 grunt-contrib-compass 发送指南针支持，但是我无法确定我的生活如何安装Zurb-Foundation，或至少不正确。

据我所知，咕噜声-compass不提供罗盘安装方法的包装。我可以复制 compass.js任务设置用于指南针配置文件，但似乎应该有一种方法可以做到这一点，而不会重复数据。

或者，我想我可以手动复制一切，但是切断了我的路径，便于升级。

任何帮助都将不胜感激。

解决方案

我添加了我的ember-app-kit项目的基础。

bower.json

  {
name：ember-app-kit，
dependencies：{
ember：http：//builds.emberjs.com.s3 ，
handlebars：1.0.0，
jquery：〜1.9.1，
qunit：〜1.12.0 
基础：〜4.3.2，
momentjs：〜2.1，
} 
} 
  / pre> 
 
 
  bower install  
 
 
 
看起来像这样：
  module.exports = {
 compile：{
 files：{
'tmp / public / assets / app.css'：'app / styles / app.scss'
} 
} 
}; 
  
我只编译一个文件。 
 
 
 
 app.scss文件：
  @importfoundation_config ; 
 @importfoundation_includes; 
 @importmixins / index; 
 @importfonts / index; 
 ...为了简洁而被截短
  
 _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/customforms; 
 // @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; 
 ...为了简洁而被截短
  
我希望这是有帮助的。
 
 
 
干杯
 Dave 
 
I'm trying to setup my first Ember.js app with Ember AppKit, grunt, and compass. The appkit ships with support of compass out of the box via grunt-contrib-compass but I can't figure out for the life of me how to install Zurb-Foundation, or at least not "properly."

As far as I can tell, grunt-contrib-compass doesn't provide a wrapper around compass's install method. I could duplicate the compass.js task settings for a compass config file but it seems like there should be a way to do this without duplicating the data. 

Alternatively, I guess I could just copy everything over manually but that cuts off my path for easy upgrades. 

Any help would much much appreciated.
解决方案
This is how I added foundation to my ember-app-kit project.

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

The sass task looks like this:
module.exports = {
  compile: {
    files: {
      'tmp/public/assets/app.css': 'app/styles/app.scss'
    }
  }
};
I'm only compiling one file. 

The app.scss file:
@import "foundation_config";
@import "foundation_includes";
@import "mixins/index";
@import "fonts/index";
... truncated for brevity
The _foundation_config.scss file is the foundation variables 

The _foundation_includes.scss file is where I include the modules that I'm using.
@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 
I hope this is helpful.

Cheers
Dave

                        
这篇关于如何在ember.js应用程序工具项目中添加基础的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！