Modo consigliato per includere la libreria bootstrap nell’app ember-cli Ember.JS

Sto cercando di installare correttamente Bootstrap di Twitter nel mio attuale progetto ember-cli. Ho installato bootstrap con bower:

bower install --save bootstrap 

Ora la libreria è ridotta in / vendor / bootstrap / dist / (css | js | fonts) Ho provato ciò che è menzionato qui: http://ember-cli.com/#managing-dependencies sostituendo i nomi di file path e css ma ottengo errori relativi al file Brocfile.js . Penso che il formato di brocfile sia cambiato troppo rispetto all’esempio.

Ho anche provato a @import con il file /app/styles/app.css dopo aver spostato i fogli di stile nella directory / app / styles /:

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

Ma non ha funzionato. I file sono visibili server true dev: http://localhost:4200/assets/bootstrap.css

Qualcuno può buttarmi un osso qui?

Grazie

Modificare :

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

Si potrebbe voler controllare ember-bootstrap , che importerà automaticamente le risorse bootstrap.

 ember install ember-bootstrap 

Inoltre aggiunge una suite di componenti ember nativi alla tua app, che rendono molto più facile lavorare con le funzionalità bootstrap in ember. Dai un’occhiata, anche se sono un po ‘prevenuto, perché ne sono l’autore! 😉

BASH:

 bower install --save bootstrap 

Brocfile.js:

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

Il JS verrà aggiunto a app.js, che è collegato per impostazione predefinita, e il CSS verrà aggiunto a assets/vendor.css , che a partire dal 14 maggio verrà aggiunto anche per impostazione predefinita.

Per riferimento: http://www.ember-cli.com/#managing-dependencies

In risposta alla domanda di @ Joe relativa ai caratteri e ad altre risorse, non sono riuscito a ottenere il metodo consigliato da app.import () sui caratteri. Ho invece optato per l’unione e l’approccio del compilatore statico:

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

Aggiornamento 30/03/2015

più ça cambia … Ora uso ember-cli-bootstrap-sassy , sembra portare avanti il ​​minimo cruft mentre ancora mi permetto di personalizzare le variabili di Bootstrap.


Aggiornamento 1/22/15

Probabilmente dovresti usare la soluzione di Johnny sopra invece della lib che ho menzionato in origine. Mi piace anche ember-cli-bootstrap-sass , perché posso personalizzare le variabili di Bootstrap direttamente nel mio progetto.

Originale 7/11/14

Se stai usando una versione di ember-cli che supporta gli addon (0.35+, credo), ora puoi usare il pacchetto ember-cli-bootstrap . Dalla radice della tua app,

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

Questo è tutto!

Nota: come sottolinea @poweratom, ember ember-cli-bootstrap è la libreria di qualcun altro che sceglie di includere anche bootstrap-for-ember . Pertanto, questa libreria potrebbe non essere sincronizzata con la versione ufficiale di bootstrap. Tuttavia, lo trovo ancora un ottimo modo per velocizzare la prototipazione su un nuovo progetto!

 $> bower install --save bootstrap 

Successivamente aggiungi le seguenti due linee al tuo ember-cli-builds.js (o Brocfile.js se stai utilizzando una versione precedente di Ember.js):

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

E voilà, pronto a partire!

aggiornato il 18/08/2015: adattato al nuovo schema introdotto in Ember.js 1.13

Questo è il modo in cui impacchetta i file CSS dei fornitori con Broccoli (che è alla base di 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' }); 

Dove la cartella del vendor è dove vivono i miei pacchetti Bower. E le assets sono dove mi aspetto che i miei CSS possano vivere. Suppongo che tu abbia installato Bootstrap usando Bower, che è il modo Ember-cli.

Quindi nel mio index.html, sto semplicemente facendo riferimento a quel file vendor.css :

   

Saluti.

Se stai usando SASS (probabilmente via ember-cli-sass ), bower_components viene automaticamente aggiunto al percorso di ricerca. Ciò significa che puoi semplicemente usare Bower ed evitare del tutto il file Brocfile / ember-cli-build.

Installa la versione ufficiale di SASS di Bootstrap con Bower

 bower install --save bootstrap-sass 

quindi importa la lib in app.scss . La cosa bella di questo è che puoi personalizzare le variabili prima di importare il bootstrap:

 $brand-primary: 'purple'; @import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap'; 
 bower install --save bootstrap 

nel tuo brocfile.js :

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