Рекомендуемый способ включить библиотеку bootstrap в Ember.JS ember-cli App
Я пытаюсь правильно установить Twitter Bootstrap в моем текущем проекте ember-cli. Я установил bootstrap с bower:
bower install --save bootstrap
теперь библиотека понижена в / vendor / bootstrap / dist/(css / js / fonts) Я попробовал то, что упоминается здесь : http://ember-cli.com/#managing-dependencies замена имен файлов path и css, но я получаю ошибки относительно Brocfile.js. Я думаю, что формат brocfile слишком сильно изменился по сравнению к примеру.
Я также попытался @ import с / app / styles / app.css файл после перемещения таблиц стилей в каталог/app/ styles/:
@import url('/assets/bootstrap.css');
@import url('/assets/bootstrap-theme.css');
но это не сработало. Файлы видны true dev server:http://localhost:4200/assets/bootstrap.css
может кто-нибудь бросить мне кость здесь ?
Thx
Edit:
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 });
};
8 ответов:
вы, возможно, захотите, чтобы проверить ember-bootstrap, который будет импортировать загрузочные активы автоматически.
ember install ember-bootstrap
кроме того, он добавляет набор собственных компонентов ember в ваше приложение, что делает работу с функциями bootstrap намного проще в ember. Проверьте это, хотя я немного предвзят, так как я его автор! ;)
Баш:
bower install --save bootstrap
Brocfile.js:
app.import('vendor/bootstrap/dist/js/bootstrap.js'); app.import('vendor/bootstrap/dist/css/bootstrap.css');
JS будет добавлен в приложение.js, который связан по умолчанию, и CSS будет добавлен в
assets/vendor.css
, которая по состоянию на 14 мая, также добавляется по умолчанию.для справки:http://www.ember-cli.com/#managing-dependencies
в ответ на вопрос @Joe о шрифтах и других активах я не смог получить рекомендуемое приложение.метод import() для работы со шрифтами. Я вместо этого выбрали метод слияния деревьев и статического компилятора:
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]);
Баш:
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();
обновление 3/30/15
плюс перемен... Я использую ember-cli-bootstrap-sassy теперь, похоже, он приносит с собой минимальный cruft, все еще позволяя мне настраивать переменные Bootstrap.
обновление 1/22/15
вы, вероятно, должны использовать решение Джонни выше, а не lib, о котором я первоначально упоминал. Мне тоже нравится ember-cli-bootstrap-sass, потому что я могу настроить переменные Bootstrap непосредственно в моем проект.
оригинальный 7/11/14
если вы используете версию ember-cli, которая поддерживает аддоны (0.35+, я считаю), теперь вы можете использовать ember-cli-bootstrap пакета. Из корня вашего приложения,
npm install --save-dev ember-cli-bootstrap
вот именно!
Примечание: как указывает @poweratom,
ember-cli-bootstrap
Это чужая библиотека, которая также включает bootstrap-for-ember. Таким образом, эта библиотека может выйти из синхронизации с официальным bootstrap версия. Тем не менее, я все еще считаю, что это отличный способ быстро получить прототипирование в новом проекте!
$> bower install --save bootstrap
затем добавьте следующие две строки в свой Эмбер-cli-строит.js (или Brocfile.js если вы используете старую версию Эмбер.js):
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js'); app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
и вуаля, готово!
обновлено 08/18/2015: адаптирован к новой схеме, введенной в Ember.js 1.13
вот как я упаковываю CSS-файлы поставщика с брокколи (которая лежит в основе 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' });
здесь
vendor
папка, где живут мои пакеты Bower. Иassets
где я ожидаю, что мой CSS будет жить. Я предполагаю, что вы установили Bootstrap с помощью Bower, который является способом Ember-cli.тогда в моем указателе.html, я просто ссылаюсь на это
vendor.css
file:<link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">
ваше здоровье.
если вы используете SASS (вероятно, через
ember-cli-sass
),bower_components
автоматически добавляется в путь поиска. Это означает, что вы можете просто использовать Bower и полностью избегать файла Brocfile/ember-cli-build.установите официальную версию Sass Bootstrap с Bower
bower install --save bootstrap-sass
затем импортируйте lib в
app.scss
. Самое приятное в этом то, что вы можете настроить переменные перед импортом bootstrap:$brand-primary: 'purple'; @import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';