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