web-dev-qa-db-fra.com

Méthode recommandée pour inclure la bibliothèque bootstrap dans l’application Ember.JS ember-cli

J'essaie d'installer correctement Twitter Bootstrap dans mon projet actuel ember-cli. J'ai installé bootstrap avec bower:

bower install --save bootstrap

Maintenant la bibliothèque est téléchargée dans /vendor/bootstrap/dist/(css | js | fonts) J'ai essayé ce qui est mentionné ici: http : //ember-cli.com/#managing-dependencies en remplaçant les noms de fichiers chemin et css mais des erreurs se produisent concernant le fichier Brocfile.js . Je pense que le format du fichier brocfile a trop changé par rapport à l'exemple.

J'ai aussi essayé de @importer avec le fichier /app/styles/app.css après avoir déplacé les feuilles de style dans le répertoire/app/styles /:

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

Mais cela n'a pas fonctionné. Les fichiers sont visibles vrai serveur dev: http://localhost:4200/assets/bootstrap.css

Est-ce que quelqu'un peut me jeter un os ici?

THX

Modifier :

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 });
};
twitter-bootstrapember.jsbowerember-cli
78
Guidouil

Vous voudrez peut-être vérifier ember-bootstrap , qui importera automatiquement les actifs bootstrap).

ember install ember-bootstrap

De plus, il ajoute une suite de composants ember natifs à votre application), ce qui permet de travailler avec bootstrap est beaucoup plus simple dans ember. Découvrez-le bien que je sois un peu biaisé, comme j'en suis l'auteur!;)

37
Simon Ihmig

FRAPPER:

bower install --save bootstrap

Brocfile.js:

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

Le JS sera ajouté à app.js, qui est lié par défaut, et le CSS sera ajouté à assets/vendor.css, qui, à compter du 14 mai, est également ajouté par défaut.

Pour référence: http://www.ember-cli.com/#managing-dependencies

En réponse à la question de @ Joe concernant les polices et autres éléments, je ne pouvais pas utiliser la méthode app.import () recommandée pour travailler sur les polices. J'ai plutôt opté pour l'approche de fusion des arbres et du compilateur statique:

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
drew covi

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
Patrick Seastar

Mise à jour 3/30/15

plus ça change ... J'utilise ember-cli-bootstrap-sassy maintenant, il semble apporter un minimum de roquettes tout en me permettant de personnaliser les variables de Bootstrap.

Mise à jour du 22/01/15

Vous devriez probablement utiliser la solution de Johnny ci-dessus au lieu de la bibliothèque que j'ai mentionnée à l'origine. J'aime aussi ember-cli-bootstrap-sass , car je peux personnaliser les variables de Bootstrap directement dans mon projet.

Original 7/11/14

Si vous utilisez une version de ember-cli qui prend en charge les addons (0.35+, je crois), vous pouvez maintenant utiliser le package ember-cli-bootstrap . À la racine de votre application,

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

C'est ça!

Note: comme @poweratom le fait remarquer, ember-cli-bootstrap est la bibliothèque de quelqu'un d'autre qui choisit d'inclure également bootstrap-for-ember . Ainsi, cette bibliothèque pourrait ne plus être synchronisée avec la version officielle de bootstrap). Cependant, je trouve toujours que c'est un excellent moyen de prototyper rapidement sur un nouveau projet!

23
Sam Selikoff
$> bower install --save bootstrap

Ensuite, ajoutez les deux lignes suivantes à votre ember-cli-builds.js (ou Brocfile.js Si vous utilisez une ancienne version de Ember.js):

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

Et voilà, prêt à partir!

mis à jour le 18/08/2015: adapté au nouveau schéma introduit dans Ember.js 1.13

15
rastapasta

Voici comment je compresse les fichiers CSS du fournisseur avec Broccoli (qui est à la base de 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'
  });

Où le dossier vendor est l'endroit où résident mes paquets Bower. Et assets est l'endroit où j'attends de mon CSS. Je suppose que vous avez installé Bootstrap en utilisant Bower, qui est la méthode Ember-cli.

Ensuite, dans mon index.html, je fais simplement référence à ce vendor.css fichier:

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

À votre santé.

5
Johnny Hall

Si vous utilisez SASS (probablement via ember-cli-sass), bower_components est automatiquement ajouté au chemin de recherche. Cela signifie que vous pouvez simplement utiliser Bower et éviter le fichier Brocfile/ember-cli-build.

Installez la version SASS officielle de Bootstrap avec Bower

bower install --save bootstrap-sass

puis importez la lib dans app.scss. La bonne chose à ce sujet est que vous pouvez personnaliser les variables avant d'importer bootstrap:

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
5
Sam Selikoff
bower install --save bootstrap

dans votre brocfile.js:

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

Sur le terminal (Pour ceux qui utilisent Node Package Manager)

npm install bootstrap --save

Utiliser ember-cli, pour importer votre bootstrap installé

Ouvrez le ember-cli-build.js fichier

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });
app.import('node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('node_modules/bootstrap/dist/js/bootstrap.min.js');

Cela le fera si bootstrap est installé via le programme d'installation de NPM.

Ne faites pas cela:

app.import('./node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('./node_modules/bootstrap/dist/js/bootstrap.min.js');
0
Lekens