在Ember.JS ember-cli App中引入引导库的build议方法
我正在尝试在当前的ember-cli项目中正确安装Twitter Bootstrap。 我确实安装了凉亭bootstrap：
bower install --save bootstrap 现在这个库在/ vendor / bootstrap / dist /（css | js | fonts）中被压缩了，我尝试了这里提到的： http : //ember-cli.com/#managing-dependenciesreplacepath和css文件名，但是我得到有关Brocfile.js文件的错误。 我认为brocfile格式与示例相比已经改变了太多。
在/ app / styles /目录中移动样式表之后，我也尝试使用/app/styles/app.css文件导入 @import：
@import url('/assets/bootstrap.css'); @import url('/assets/bootstrap-theme.css');
但它没有工作。 这些文件是可见的真正的开发服务器： http://localhost:4200/assets/bootstrap.css
有人可以在这里扔骨头吗？
谢谢
编辑：
ember -v ember-cli 0.0.23
brocfile.js
/* global require, module */ var uglifyJavaScript = require('broccoli-uglify-js'); var replace = require('broccoli-replace'); var compileES6 = require('broccoli-es6-concatenator'); var validateES6 = require('broccoli-es6-import-validate'); var pickFiles = require('broccoli-static-compiler'); var mergeTrees = require('broccoli-merge-trees'); var env = require('broccoli-env').getEnv(); var getEnvJSON = require('./config/environment'); var p = require('ember-cli/lib/preprocessors'); var preprocessCss = p.preprocessCss; var preprocessTemplates = p.preprocessTemplates; var preprocessJs = p.preprocessJs; module.exports = function (broccoli) { var prefix = 'caisse'; var rootURL = '/'; // index.html var indexHTML = pickFiles('app', { srcDir: '/', files: ['index.html'], destDir: '/' }); indexHTML = replace(indexHTML, { files: ['index.html'], patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}] }); // sourceTrees, appAndDependencies for CSS and JavaScript var app = pickFiles('app', { srcDir: '/', destDir: prefix }); app = preprocessTemplates(app); var config = pickFiles('config', { // Don't pick anything, just watch config folder srcDir: '/', files: [], destDir: '/' }); var sourceTrees = [app, config, 'vendor'].concat(broccoli.bowerTrees()); var appAndDependencies = mergeTrees(sourceTrees, { overwrite: true }); // JavaScript var legacyFilesToAppend = [ 'jquery.js', 'handlebars.js', 'ember.js', 'ic-ajax/dist/named-amd/main.js', 'ember-data.js', 'ember-resolver.js', 'ember-shim.js', 'bootstrap/dist/js/bootstrap.js' ]; var applicationJs = preprocessJs(appAndDependencies, '/', prefix); applicationJs = compileES6(applicationJs, { loaderFile: 'loader/loader.js', ignoredModules: [ 'ember/resolver', 'ic-ajax' ], inputFiles: [ prefix + '/**/*.js' ], legacyFilesToAppend: legacyFilesToAppend, wrapInEval: env !== 'production', outputFile: '/assets/app.js' }); if (env === 'production') { applicationJs = uglifyJavaScript(applicationJs, { mangle: false, compress: false }); } // Styles var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets'); // Bootstrap Style integration var bootstrap = pickFiles('vendor', { srcDir: '/bootstrap/dist/css', files: [ 'bootstrap.css', 'bootstrap-theme.css' ], destDir: '/assets/' }); //var bootstrap = preprocessCss(appAndDependencies, '/vendor/bootstrap/dist/css', '/assets'); // Ouput var outputTrees = [ indexHTML, applicationJs, 'public', styles, bootstrap ]; // Testing if (env !== 'production') { var tests = pickFiles('tests', { srcDir: '/', destDir: prefix + '/tests' }); var testsIndexHTML = pickFiles('tests', { srcDir: '/', files: ['index.html'], destDir: '/tests' }); var qunitStyles = pickFiles('vendor', { srcDir: '/qunit/qunit', files: ['qunit.css'], destDir: '/assets/' }); testsIndexHTML = replace(testsIndexHTML, { files: ['tests/index.html'], patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}] }); tests = preprocessTemplates(tests); sourceTrees = [tests, 'vendor'].concat(broccoli.bowerTrees()); appAndDependencies = mergeTrees(sourceTrees, { overwrite: true }); var testsJs = preprocessJs(appAndDependencies, '/', prefix); var validatedJs = validateES6(mergeTrees([app, tests]), { whitelist: { 'ember/resolver': ['default'], 'ember-qunit': [ 'globalize', 'moduleFor', 'moduleForComponent', 'moduleForModel', 'test', 'setResolver' ] } }); var legacyTestFiles = [ 'qunit/qunit/qunit.js', 'qunit-shim.js', 'ember-qunit/dist/named-amd/main.js' ]; legacyFilesToAppend = legacyFilesToAppend.concat(legacyTestFiles); testsJs = compileES6(testsJs, { // Temporary workaround for // https://github.com/joliss/broccoli-es6-concatenator/issues/9 loaderFile: '_loader.js', ignoredModules: [ 'ember/resolver', 'ember-qunit' ], inputFiles: [ prefix + '/**/*.js' ], legacyFilesToAppend: legacyFilesToAppend, wrapInEval: true, outputFile: '/assets/tests.js' }); var testsTrees = [qunitStyles, testsIndexHTML, validatedJs, testsJs]; outputTrees = outputTrees.concat(testsTrees); } return mergeTrees(outputTrees, { overwrite: true }); };
您可能想要查看一下将自动导入引导资源的ember-bootstrap 。
ember install ember-bootstrap
此外，它还为您的应用程序添加了一套原生的烬元器件，这使得在烬中使用引导器function变得更加容易。 检查出来，虽然我有点偏见，因为我是它的作者！ ;）
BASH：
bower install --save bootstrap
Brocfile.js：
app.import('vendor/bootstrap/dist/js/bootstrap.js'); app.import('vendor/bootstrap/dist/css/bootstrap.css');
JS将被添加到默认链接的app.js中，CSS将被添加到assets/vendor.css ，默认情况下，它将在5月14日添加。
供参考： http : //www.ember-cli.com/#managing-dependencies
为了回应@ Joe关于字体和其他资源的问题，我无法得到推荐的app.import（）方法来处理字体。 我select了合并树和静态编译器方法：
var mergeTrees = require('broccoli-merge-trees'); var pickFiles = require('broccoli-static-compiler'); var extraAssets = pickFiles('vendor/bootstrap/dist/fonts',{ srcDir: '/', files: ['**/*'], destDir: '/fonts' }); module.exports = mergeTrees([app.toTree(), extraAssets]);
BASH：
bower install --save bootstrap
Brocfile.js：
/* global require, module */ ... app.import('bower_components/bootstrap/dist/css/bootstrap.css'); app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' }); app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', { destDir: 'fonts' }); app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', { destDir: 'fonts' }); app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', { destDir: 'fonts' }); app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' }); app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', { destDir: 'fonts' }); app.import('bower_components/bootstrap/dist/js/bootstrap.js'); module.exports = app.toTree();
更新3/30/15
加上ça改变…我现在使用ember-cli-bootstrap-sassy ，它似乎带来了最低限度的cruft，同时让我自定义Bootstrap的variables。
2015年1月22日更新
你应该使用上面的Johnny解决scheme，而不是我最初提到的lib。 我也喜欢ember-cli-bootstrap-sass ，因为我可以直接在我的项目中定制Bootstrap的variables。
原始的7/11/14
如果您使用的是支持插件（0.35+，我相信）的ember-cli版本，那么现在可以使用ember-cli-bootstrap软件包。 从你的应用程序的根，
npm install --save-dev ember-cli-bootstrap
而已！
注意：正如@poweratom指出的那样，
ember-cli-bootstrap是别人的库，它也select了bootstrap-for-ember 。 因此，这个lib可能会与官方bootstrap版本不同步。 不过，我仍然认为这是一个快速实现新项目原型的好方法！
$> bower install --save bootstrap
之后，将以下两行添加到您的ember-cli-builds.js （或Brocfile.js，如果您使用的是旧版本的Ember.js）：
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js'); app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
瞧，准备好了！
更新08/18/2015：适应Ember.js 1.13中引入的新计划
这是我如何打包供应商的CSS文件与西兰花（支持Ember-cli）。
var vendorCss = concat('vendor', { inputFiles: [ 'pikaday/css/pikaday.css' , 'nvd3/nv.d3.css' , 'semantic-ui/build/packaged/css/semantic.css' ] , outputFile: '/assets/css/vendor.css' });
vendor文件夹是我的Bower软件包所在的地方。 而assets是我期待我的CSS生活的地方。 我假设你已经使用Bower安装了Bootstrap，这是Ember-cli的方式。
然后在我的index.html中，我简单地引用了vendor.css文件：
<link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">
干杯。
如果您使用SASS（可能通过ember-cli-sass ），则bower_components会自动添加到查找path中。 这意味着你可以使用Bower并完全避免Brocfile / ember-cli-build文件。
用Bower安装官方的SASS Bootstrap版本
bower install --save bootstrap-sass
然后在app.scss导入lib。 关于这一点的好处是你可以在导入bootstrap之前自定义variables：
$brand-primary: 'purple'; @import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
bower install --save bootstrap
在你的brocfile.js ：
app.import('bower_components/bootstrap/dist/js/bootstrap.js'); app.import('bower_components/bootstrap/dist/css/bootstrap.css');
