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 });
};
Author: Restuta, 2014-04-28

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

 35
Author: Simon Ihmig,
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]);
 68
Author: drew covi,
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();
 45
Author: Patrick Seastar,
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-bootstrapes 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!

 23
Author: Sam Selikoff,
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

 15
Author: rastapasta,
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.

 5
Author: Johnny Hall,
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';
 5
Author: Sam Selikoff,
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');
 3
Author: Lydias303,
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