Estoy tratando de instalar correctamente Twitter Bootstrap en mi actual ember-cli proyecto.
Hice instalar bootstrap con bower :

bower install --save bootstrap

Ahora, la biblioteca es downloded en /vendor/bootstrap/dist/(css|js|fonts)
He intentado lo que se menciona aquí : http://ember-cli.com/#managing-dependencies
la sustitución de la ruta y los archivos css nombres pero me da errores con respecto a la Brocfile.js archivo. Creo que el brocfile formato ha cambiado mucho en comparación con el ejemplo.

También traté de @import con el /app/estilos/app.css archivo después de mover las hojas de estilo en /app/estilos/directorio :

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

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

Alguien puede tirarme un hueso aquí ?

Thx

Edición :

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 });
};
  • Puede usted mostrar su ember-versión cli y Brocfile.js el contenido?
  • Incluyendo también a través de la index.html después de copiar en /estilos trabajado. <link href=»activos/bootstrap.css»> <link href=»activos/bootstrap-tema.css»>
InformationsquelleAutor Guidouil | 2014-04-28

8 Comentarios

  1. 37

    Usted puede ser que desee comprobar hacia fuera ember-bootstrap, que va a importar el bootstrap activos de forma automática.

    ember install ember-bootstrap

    Además se añade un conjunto de nativos ember componentes para su aplicación, que hacen que trabajar con bootstrap características mucho más fácil en ascua. Échale un vistazo, aunque estoy un poco sesgado, como yo soy el autor de ella! 😉

    • Este comando es suficiente para transformar cualquier existentes ember proyecto de bootstrap. Gracias Simon.
    • ember-bootstrap es EXCELENTE! Sin embargo, un componente que falta de este es el carrusel. Si usted necesita el carrusel de trabajo, entonces usted tendrá que instalar los componentes de bootstrap a través de @rastapasta instrucciones — parece que ember-bootstrap no incluye el transitions.js como parte de la rutina de arranque activos que trae, y esto es NECESARIO para que el carrusel.
    • Gracias! Sí, carrusel de desaparecidos. Pero debe agregarse esperemos que dentro de poco después de la próxima versión 1.0!
  2. 68

    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 será añadido a la app.js, que está vinculado por defecto, y el CSS será añadido a assets/vendor.css, que como, de 14 de Mayo, también se agrega de forma predeterminada.

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

    En respuesta a @Joe la pregunta sobre las fuentes y otros activos, era incapaz de obtener la aplicación recomendada.de importación() método de trabajo en las fuentes. Yo en su lugar optó por la combinación de árboles y estática-compilador de enfoque:

    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]);
    • Gracias Dave! Se olvidó de la cli no concede el proveedor.css inicialmente.
    • ¿Esto de manejar los archivos que MENOS incluye, como las fuentes?
    • Y reiniciar el servidor, ya que los cambios a la brocfile no será recogido por Livereload… creo 🙂
    • Si usted está utilizando el ascua de la cli de v0.0.35 o más reciente, puede que tenga que incluir un par de Brócoli plugins en el paquete.json. Usted puede agregar a través de: npm install --save-dev broccoli-merge-trees y npm install --save-dev broccoli-static-compiler.
    • Tenga en cuenta que ahora «proveedor» ha sido sustituido por el de ‘bower_components» para nada instalado con bower. El «proveedor» de la carpeta todavía puede ser usado para especificar el usuario de las bibliotecas.
    • También puede importar las fuentes con app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' }); consultar el siguiente enlace miguelcamba.com/blog/2014/08/10/…
    • Parece que mi proyecto generado solicitado boostrap.css.mapa, así que he añadido la siguiente línea de código así. app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' });
    • brocfile.js no es más; ahora, es más como ember-cli-build.js que tienes que añadir los app.import declaraciones.

  3. 45

    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();
    • Este es un buen método para ember 1.9 hasta ember-cli-bootstrap se dispara a construir para manillar >=2.0
    • Los comandos que Sean O’Hara dijo en un comentario sobre Drew respuesta debe ser agregado a esta: npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
    • ¿qué ventaja que tiene cli dar más de este broc importación?
    • sry mate. No entiendo la pregunta. Lo de la cli? ¿De qué estás hablando?
    • no veo el punto de la cli-bootstrap, su fácil como se muestra arriba
    • por favor, ver a mi commnet
    • Quien dice nada acerca de la cli-bootsrap? No a mí. Estoy confundido. Sólo me dijo que hay que instalar también el brócoli-fusionar-árboles de brócoli-estática-compilador para hacer este trabajo. Nada acerca de la cli-bootsrap.
    • La razón para el uso de la cli-bootstrap (OMI) es debido a que no solo mantener el bootstrap instalar en línea con otros cli add-ons, pero es más claro y repetible para grandes equipos de la construcción de varias aplicaciones de una norma o de la contratación y la formación de nuevos desarrolladores. Por supuesto, no importa para equipos pequeños o juguete de aplicaciones, pero el uso de prácticas consistentes, instala y complementos pueden ayudar a reducir los errores para el desarrollo industrial.
    • La pregunta original es sobre instalar en las Brasas de la CLI de medio ambiente; en el título.
    • gracias, pero, todavía no estoy convencido, es bastante fácil para los equipos con bootstrap en bower y una combinación de árboles en el brocfile de lo que pasa, + usted puede cambiar fácilmente la versión de bootstrap.

  4. 23

    Actualización 3/30/15

    plus ça change… yo uso ember-cli-bootstrap-sassy ahora, al parecer, para llevar a lo largo mínimo de resto, mientras que todavía me deja personalizar Bootstrap las variables.


    Actualización 1/22/15

    Usted probablemente debería usar Johnny de la solución anterior en lugar de la lib yo originalmente mencionado. También me gusta ember-cli-bootstrap-sass, porque puedo personalizar Bootstrap las variables directamente en mi proyecto.

    Original 7/11/14

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

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

    Que es!

    Nota: como @poweratom señala, ember-cli-bootstrap es de alguien de la biblioteca que elige también incluyen bootstrap-para-ember. Por lo tanto, este lib podría salir de la sincronización con el oficial de bootstrap versión. Sin embargo, creo que es una gran manera de conseguir el prototipado rápido en un nuevo proyecto!

    • Cambio de la corriente a su versión actual. Hoy (0.0.39) es tal vez ni siquiera la versión que está utilizando…
    • Por ahora ember-cli-bootstrap no incluye bootstrap.js, así que usted quiere ser capaz de utilizar el construido-en métodos de javascript, o varios plugins.
    • No estoy seguro de si esto debería ser un «recomendado» manera de instalarlo per se. ‘El ascua-cli-bootstrap’ proyecto se basa en la «bootstrap-para-ember’ proyecto. Por desgracia, según el responsable de este proyecto, anunció que él ahora está trabajando en el » ascua-componentes del proyecto como su sucesor en su lugar. Por lo menos que no son los esfuerzos para recoger donde lo dejó, (de que el proyecto está actualmente usando bootstrap 3.0.0 creo), el Bootstrap versión tendrá obsoletos muy pronto (ya es).
  5. 15
    $> bower install --save bootstrap

    Después añadir dos líneas siguientes a su ember-cli-builds.js (o Brocfile.js si usted 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 listo, listo para ir!

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

    • La última versión de ember-cli no incluye brocfile.js más
    • usted puede utilizar el ‘ember-cli-build.js’ para la importación, pasos anteriores aún trabajo. (ember: 1.12.6)
    • ¿cómo combinar este enfoque con bootstrap invalida como bootswatch.com/flatly
  6. 5

    Esta es la forma en que me proveedor de paquetes de archivos CSS con Brócoli (que sirve de base a la Brasa-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 el vendor carpeta es donde mi Enramada de los paquetes de vivir. Y assets es donde yo estoy esperando mi CSS para vivir. Estoy asumiendo que usted ha instalado Bootstrap usando Bower, que es el Ascua-cli manera.

    A continuación, en mi index.html estoy simplemente hacer referencia que vendor.css de archivo:

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

    Saludos.

    • Lo he probado pero tels mí que concat es indefinido en el Brócoli (ReferenceError: concat no está definido) he añadido que con solo cambiar la ruta de acceso incluye hojas de estilo en el archivo : Brocfile.js en la raíz de la carpeta de la aplicación.
    • Instalar el plugin npm install broccoli-concat --save, a Continuación, en su Brocfile, en la parte superior: var concat = require('broccoli-concat');
  7. 5

    Si usted está usando SASS (probablemente a través de ember-cli-sass), bower_components se agrega automáticamente a la ruta de búsqueda. Esto significa que usted puede simplemente utilizar Bower y evitar la Brocfile/ember-cli-generar el archivo.

    Instalar la oficial SASS versión de Bootstrap con Bower

    bower install --save bootstrap-sass

    a continuación, importar el lib en app.scss. Lo bueno de esto es que usted puede personalizar las variables antes de la importación de bootstrap:

    $brand-primary: 'purple';
    @import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
    • o $ ember instalar ember-cli-sass $ ember instalar ember-cli-bootstrap-sassy, a continuación, cambiar el nombre de la aplicación.css de la aplicación.secs y añadir esta línea: @import «bootstrap»
  8. 3
    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');
    • No sé por qué, de hecho, esta fue marcada. Puede que no sea muy transparente, a menos que usted sabe dónde poner estas declaraciones. Pero funciona bien… tal vez no es tan bonito como el add-on y lo admito. van en el ember-cli-build.js archivo y funciona bien, si alguien necesita. Me estoy alimentando mi ember desde dentro como Asp.Net proyecto de MVC y necesitaba disponible para que el proyecto no sólo las brasas de la aplicación.

Dejar respuesta

Please enter your comment!
Please enter your name here