Empfohlene Möglichkeit, die Bootstrap-Bibliothek in die Ember.JS-Ember-Cli-App aufzunehmen

Ich versuche, Twitter Bootstrap in meinem aktuellen ember-cli-Projekt ordnungsgemäß zu installieren. Ich habe Bootstrap mit Bower installiert:

bower install --save bootstrap

Jetzt ist die Bibliothek in / vendor / bootstrap / dist / (css | js | fonts) heruntergefahren. Ich habe versucht, was hier erwähnt wird: http://ember-cli.com/#managing-dependencies ersetzt Pfad- und CSS-Dateinamen, aber ich bekomme Fehler in Bezug auf die Datei Brocfile.js . Ich denke, das Brocfile-Format hat sich im Vergleich zum Beispiel zu sehr geändert.

Ich habe auch versucht, mit der Datei /app/styles/app.css @ zu importieren , nachdem ich die Stylesheets in das Verzeichnis / app / styles / verschoben habe :

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

Aber es hat nicht funktioniert. Die Dateien sind sichtbar wahrer Dev Server:http://localhost:4200/assets/bootstrap.css

Kann mir hier jemand einen Knochen werfen?

Danke

Bearbeiten:

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

Möglicherweise möchten Sie ember-bootstrap auschecken , wodurch die Bootstrap-Assets automatisch importiert werden.

ember install ember-bootstrap

Darüber hinaus wird Ihrer App eine Reihe nativer Glutkomponenten hinzugefügt, die das Arbeiten mit Bootstrap-Funktionen in Glut erheblich vereinfachen. Probieren Sie es aus, obwohl ich ein bisschen voreingenommen bin, da ich der Autor davon bin! ;)

BASH:

bower install --save bootstrap

Brocfile.js:

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

Das JS wird der App.js hinzugefügt, die standardmäßig verknüpft ist, und das CSS wird hinzugefügt assets/vendor.css, das ab dem 14. Mai ebenfalls standardmäßig hinzugefügt wird.

Als Referenz: http://www.ember-cli.com/#managing-dependencies

Als Antwort auf die Frage von @ Joe zu Schriftarten und anderen Assets konnte ich die empfohlene Methode app.import () nicht für die Bearbeitung der Schriftarten verwenden. Ich habe mich stattdessen für den Merge-Tree- und Static-Compiler-Ansatz entschieden:

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

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

Update 30.03.15

plus ça change ... Ich verwende jetzt ember-cli-bootstrap-sassy . Es scheint ein Minimum an Cruft mit sich zu bringen, während ich trotzdem die Variablen von Bootstrap anpassen kann.

Update 22.01.15

Sie sollten wahrscheinlich Johnnys obige Lösung anstelle der ursprünglich erwähnten Bibliothek verwenden. Ich mag auch ember-cli-bootstrap-sass , weil ich die Variablen von Bootstrap direkt in meinem Projekt anpassen kann.

Original 7/11/14

Wenn Sie eine Version von ember-cli verwenden, die Addons unterstützt (0,35+, glaube ich), können Sie jetzt das ember-cli-bootstrap- Paket verwenden. Aus dem Stammverzeichnis Ihrer App,

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

Das ist es!

Hinweis: Wie @poweratom hervorhebt, ember-cli-bootstraphandelt es sich um die Bibliothek eines anderen, die auch Bootstrap-for-Ember enthält . Daher könnte diese Bibliothek nicht mehr mit der offiziellen Bootstrap-Version synchronisiert sein. Ich finde es jedoch immer noch eine großartige Möglichkeit, schnell Prototypen für ein neues Projekt zu erstellen!

$> bower install --save bootstrap

Fügen Sie anschließend Ihren ember-cli-builds.js (oder Brocfile.js, wenn Sie eine ältere Version von Ember.js verwenden) die folgenden zwei Zeilen hinzu :

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

Und voilà, bereit zu gehen!

aktualisiert am 18.08.2015: angepasst an das in Ember.js 1.13 eingeführte neue Schema

Auf diese Weise verpacke ich CSS-Dateien von Anbietern mit Broccoli (das Ember-cli untermauert).

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

Wo der vendorOrdner ist, wo meine Bower-Pakete leben. Und assetshier erwarte ich, dass mein CSS lebt. Ich gehe davon aus, dass Sie Bootstrap mit Bower installiert haben, was der Ember-Cli-Weg ist.

Dann verweise ich in meiner index.html einfach auf diese vendor.cssDatei:

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

Prost.

Wenn Sie SASS verwenden (wahrscheinlich über ember-cli-sass), bower_componentswird es automatisch zum Suchpfad hinzugefügt. Dies bedeutet, dass Sie nur Bower verwenden und die Brocfile / ember-cli-build-Datei insgesamt vermeiden können.

Installieren Sie die offizielle SASS-Version von Bootstrap mit Bower

bower install --save bootstrap-sass

Importieren Sie dann die Bibliothek in app.scss. Das Schöne daran ist, dass Sie die Variablen vor dem Importieren von Bootstrap anpassen können:

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

bower install --save bootstrap

in Ihrem brocfile.js:

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

Auf dem Terminal (Für Benutzer von Node Package Manager)

npm install bootstrap --save

Verwenden Sie ember-cli, um Ihren installierten Bootstrap zu importieren

Öffnen Sie die ember-cli-build.jsDatei

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

Dies ist der Fall, wenn Bootstrap über das NPM-Installationsprogramm installiert wird.

Mach das nicht:

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