Forma recomendada de incluir la biblioteca bootstrap en Ember.JS ember-Aplicación cli
Estoy tratando de instalar correctamente Twitter Bootstrap en mi actual proyecto 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 nombres de archivos path y css pero obtengo errores con respecto al archivo Brocfile .archivo js. Creo que el formato de brocfile ha cambiado demasiado en comparación con el ejemplo.
I también intentó @importar con el /app/styles/app.archivo 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 visibles true dev server: http://localhost:4200/assets/bootstrap.css
¿Puede alguien tirarme un hueso aquí ?
Thx
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 });
};
8 answers
Es posible que desee revisar ember-bootstrap, que importará los activos de bootstrap automáticamente.
ember install ember-bootstrap
Además, agrega un conjunto de componentes nativos de ember a su aplicación, que hacen que trabajar con funciones de bootstrap sea mucho más fácil en ember. Échale un vistazo, aunque soy un poco parcial, ya que soy el autor de ella! ;)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-12 19:35:38
BASH:
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 la aplicación.js, que está vinculado por defecto, y el CSS se añadirá a assets/vendor.css
, que a partir del 14 de mayo, también se añade por defecto.
Para referencia: http://www.ember-cli.com/#managing-dependencies
En respuesta a la pregunta de @Joe sobre las fuentes y otros activos, no pude obtener la aplicación recomendada.método import() para trabajar en las fuentes. En su lugar, opté por los árboles de fusión y enfoque de 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]);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-05 14:04:44
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();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-25 16:17:41
Actualización 3/30/15
Más change cambio... Utilizo ember-cli-bootstrap-sassy ahora, parece traer un cruft mínimo mientras todavía me permite personalizar las variables de Bootstrap.
Actualización 1/22/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 eres usando una versión de ember-cli que soporta addons (0.35+, creo), ahora puedes usar el paquete ember-cli-bootstrap. Desde la raíz de su aplicación,
npm install --save-dev ember-cli-bootstrap
¡Eso es todo!
Nota: como @poweratom señala,
ember-cli-bootstrap
es la biblioteca de otra persona que elige incluir también bootstrap-for-ember. Por lo tanto, esta lib podría salir de sincronización con la versión oficial de bootstrap. Sin embargo, todavía me parece una gran manera de obtener prototipos rápidamente en un nuevo proyecto!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-31 14:14:20
$> bower install --save bootstrap
Luego 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 el 18/08/2015: adaptado al nuevo esquema introducido en Ember.js 1.13
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-18 02:22:26
Así es como empaqueto los archivos CSS del proveedor con Broccoli (que sustenta 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 vendor
es donde viven mis paquetes Bower. Y assets
es donde espero que mi CSS viva. Asumo que has instalado Bootstrap usando Bower, que es la forma Ember-cli.
Entonces en mi índice.html, simplemente estoy haciendo referencia a ese archivo vendor.css
:
<link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">
Saludos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-29 16:16:12
Si está utilizando SASS (probablemente a través de ember-cli-sass
), bower_components
se añade automáticamente a la ruta de búsqueda. Esto significa que puede usar Bower y evitar por completo el archivo Brocfile/ember-cli-build.
Instale la versión oficial SASS de Bootstrap con Bower
bower install --save bootstrap-sass
Luego importa la lib en app.scss
. Lo bueno de esto es que puede personalizar las variables antes de importar bootstrap:
$brand-primary: 'purple';
@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-13 11:37:44
bower install --save bootstrap
En su brocfile.js
:
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-08 19:21:20