twitter bootstrap - La forma recomendada de incluir la biblioteca de bootstrap en la aplicación Ember.JS ember-cli

ember bootstrap

Question

Intento instalar correctamente Twitter Bootstrap en mi proyecto actual de ember-cli. Instalé bootstrap con Bower:

bower install --save bootstrap

Ahora la biblioteca está descargada en / vendor / bootstrap / dist / (css | js | fonts) Probé lo que se menciona aquí: http://ember-cli.com/#managing-dependencies reemplazando los nombres de los archivos css y path pero obtengo errores con respecto al archivo Brocfile.js . Creo que el formato de archivo ha cambiado demasiado en comparación con el ejemplo.

También intenté @importar con el archivo /app/styles/app.css después de mover las hojas de estilo en el directorio / app / styles /:

@import url(''/assets/bootstrap.css'');
@import url(''/assets/bootstrap-theme.css'');

Pero no funcionó. Los archivos son servidores dev verdaderos visibles: http://localhost:4200/assets/bootstrap.css

¿Puede alguien arrojarme un hueso aquí?

Gracias

Editar:

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 });
};

Answer 1

Actualización 30/03/15

más ça cambiar ... Ahora uso ember-cli-bootstrap-sassy , parece traer un mínimo de cruces al tiempo que me permite personalizar las variables de Bootstrap.

Actualización 22/01/15

Probablemente deberías usar la solución de Johnny anterior en lugar de la lib que mencioné originalmente. También me gusta ember-cli-bootstrap-sass , porque puedo personalizar las variables de Bootstrap directamente en mi proyecto.

Original 7/11/14

Si está usando una versión de ember-cli que admite complementos (0.35+, creo), ahora puede usar el paquete ember-cli-bootstrap . Desde la raíz de tu aplicación,

npm install --save-dev ember-cli-bootstrap

¡Eso es!

Nota: como señala @poweratom, ember-cli-bootstrap es la biblioteca de otra persona que elige incluir también bootstrap-for-ember . Por lo tanto, esta lib podría no sincronizarse con la versión de arranque oficial. Sin embargo, ¡todavía encuentro una gran manera de obtener prototipos rápidamente en un nuevo proyecto!

Answer 2

Así es como paquete los archivos CSS del proveedor con Broccoli (que apuntala a 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''
});

Donde la carpeta del vendor es donde viven mis paquetes de Bower. Y los assets es donde estoy esperando que mi CSS viva. Supongo que has instalado Bootstrap usando Bower, que es el estilo Ember-cli.

Luego en mi index.html, simplemente estoy haciendo referencia a ese archivo vendor.css :

 <link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">

Aclamaciones.

Answer 3

Es posible que desee comprobar ember-bootstrap , que importará los recursos de arranque automáticamente.

ember install ember-bootstrap

Además, agrega un conjunto de componentes de brasas nativas a su aplicación, lo que hace que trabajar con las funciones de arranque sea mucho más fácil. ¡Compruébalo, aunque soy un poco parcial, ya que soy el autor de esto! ;)

Answer 4

INTENTO:

bower install --save bootstrap

Brocfile.js:

app.import(''vendor/bootstrap/dist/js/bootstrap.js'');
app.import(''vendor/bootstrap/dist/css/bootstrap.css'');

El JS se agregará a app.js, que está vinculado por defecto, y el CSS se agregará a assets/vendor.css , que a partir del 14 de mayo también se agrega de forma predeterminada.

Para referencia: http://www.ember-cli.com/#managing-dependencies

En respuesta a la pregunta de @ Joe sobre las fuentes y otros recursos, no pude obtener el método recomendado app.import () para trabajar con las fuentes. En su lugar, opté por el enfoque de árboles de fusión y compilador estático:

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]);

Answer 5

Si está utilizando SASS (probablemente a través de ember-cli-sass ), bower_components se agrega automáticamente a la ruta de búsqueda. Esto significa que puede usar Bower y evitar el archivo Brocfile / ember-cli-build por completo.

Instale la versión oficial de SASS de Bootstrap con Bower

bower install --save bootstrap-sass

luego importe la lib en app.scss . Lo bueno de esto es que puedes personalizar las variables antes de importar bootstrap:

$brand-primary: ''purple'';
@import ''bower_components/bootstrap-sass/assets/stylesheets/bootstrap'';

Answer 6

INTENTO:

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();

Answer 7

$> bower install --save bootstrap

A continuación, agregue las siguientes dos líneas a su ember-cli-builds.js (o Brocfile.js si está utilizando una versión anterior de Ember.js):

app.import(app.bowerDirectory + ''/bootstrap/dist/js/bootstrap.js'');
app.import(app.bowerDirectory + ''/bootstrap/dist/css/bootstrap.css'');

Y voilà, listo para ir!

actualizado 18/08/2015: adaptado al nuevo esquema introducido en Ember.js 1.13

Answer 8

bower install --save bootstrap

en tu brocfile.js :

app.import(''bower_components/bootstrap/dist/js/bootstrap.js'');
app.import(''bower_components/bootstrap/dist/css/bootstrap.css'');