web-dev-qa-db-de.com

Empfohlener Weg, bootstrap library in die Ember.JS ember-cli App aufzunehmen

Ich versuche, Twitter Bootstrap in meinem aktuellen Ember-Cli-Projekt richtig zu installieren. Ich habe bootstrap mit Bower installiert:

bower install --save bootstrap

Jetzt ist die Bibliothek in /vendor/bootstrap/dist/(css | js | fonts) herunter geladen Ich habe versucht, was hier erwähnt wird: http : //ember-cli.com/#managing-dependencies Ersetzen von Pfad- und CSS-Dateinamen, aber ich erhalte 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 true 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 });
};
78
Guidouil

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

ember install ember-bootstrap

Darüber hinaus fügt es Ihrer App eine Reihe nativer ember - Komponenten hinzu, die das Arbeiten mit bootstrap - Funktionen in ember erheblich vereinfachen bisschen voreingenommen, da ich der Autor davon bin!;)

37
Simon Ihmig

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 zu den standardmäßig verknüpften app.js hinzugefügt, und das CSS wird zu assets/vendor.css Hinzugefügt, das ab dem 14. Mai ebenfalls standardmäßig hinzugefügt wird.

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

Als Antwort auf @ Joes Frage zu Schriftarten und anderen Elementen konnte ich die empfohlene app.import () -Methode für die Bearbeitung der Schriftarten nicht ermitteln. 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]);
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

Update 30.03.15

plus ça change ... Ich benutze ember-cli-bootstrap-sassy jetzt scheint es 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 11.07.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, ist ember-cli-bootstrap ist die Bibliothek eines anderen Benutzers, die auch bootstrap-for-ember enthält. Daher könnte diese Bibliothek nicht mehr mit der offiziellen bootstrap version synchronisiert sein. Dennoch finde ich es eine großartige Möglichkeit, schnell Prototypen für ein neues Projekt zu erstellen!

23
Sam Selikoff
$> bower install --save bootstrap

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

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

Und voilà, fertig!

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

15
rastapasta

So verpacke ich CSS-Dateien von Anbietern mit Broccoli (was 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'
  });

In dem Ordner vendor befinden sich meine Bower-Pakete. Und in assets erwarte ich, dass mein CSS funktioniert. Ich gehe davon aus, dass Sie Bootstrap mit Bower installiert haben, was die Ember-Cli-Methode ist.

Dann beziehe ich mich in meiner index.html einfach auf vendor.css Datei:

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

Prost.

5
Johnny Hall

Wenn Sie SASS verwenden (wahrscheinlich über ember-cli-sass), bower_components wird automatisch zum Suchpfad hinzugefügt. Das heißt, Sie können einfach Bower verwenden und die Brocfile/ember-cli-build-Datei vollständig vermeiden.

Installieren Sie die offizielle SASS-Version von Bootstrap mit Bower

bower install --save bootstrap-sass

dann importiere die lib in app.scss. Das Schöne daran ist, dass Sie die Variablen anpassen können, bevor Sie Bootstrap importieren:

$brand-primary: 'purple';

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

in deinem brocfile.js:

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

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

npm install bootstrap --save

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

Öffne das ember-cli-build.js Datei

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

Das wird es tun, 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');
0
Lekens