Как сгенерировать спрайты изображений в ember-cli с помощью компаса?

Обновление - 20140614:

После получения ответов на этот вопрос или на github, Я решил придумать свое решение проблемы. Я использовал компас для нескольких вещей, но его основная полезность заключалась в его способности генерировать спрайты изображений. Большинство других вещей можно было бы выполнить с помощью чистого SCSS.

Таким образом, я написал broccoli-sprite. Это, используется совместно с ember-cli, встроенным в поддержку SCSS используя broccoli-sass, смог удовлетворить мои потребности.

Вы можете узнать подробнее об этом здесь.

Теперь я больше не заинтересован в интеграции компаса в мое приложение ember-cli. Поскольку мое решение напрямую не отвечает на вопрос (поскольку он не использует компас), Я считаю этот вопрос неотвеченным. Поскольку этот вопрос может принести пользу другим людям, желающим это сделать, Я оставляю это открытым и по-прежнему буду отмечать щедрость!

Обновление - 20140620:

Bounty истек.

Оригинальный вопрос:

В приложении ember-cli, используя broccoli-compass, как он может быть сконфигурирован так, чтобы сгенерированные CSS-ссылки на пути к файлам изображений корректно, включая сгенерированные пути файлов изображений?

Используя компас, следующий SCSS:

@import"icon/*.png";
@include all-icon-sprites;

& hellip; будет генерировать один файл .png со всеми изображениями в папке icon и CSS для отображения каждого из них.

Я хотел бы иметь возможность делать то же самое с помощью компаса в ember-cli, который использует broccoli для создания своего конвейера активов.

Должен работать в ember-cli - то есть он должен быть создан при запуске ember или создании ember.
Должен использовать компас для создания спрайтов изображений из папки изображений
Сгенерированные изображения должны быть скопированы в папку с ресурсами
Сгенерированный CSS должен указывать на изображения, расположенные в папке с ресурсами, а не на временную папку дерева

Что я сделал до сих пор:

# 1

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    imagesDir: 'public/images',
    // imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

Когда я это делаю, команда compass терпит неудачу, потому что она не может найти файлы изображений в дереве.

# 2

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    // imagesDir: 'public/images',
    imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

Просто, чтобы попробовать, я копирую файлы изображений в каталог стилей. На этот раз команда компаса преуспевает, но, генерируемые CSS файлы изображений ссылок, которые не существуют. Сгенерированные изображения, похоже, не копируются в папку с ресурсами, как ожидалось ( или где-нибудь еще в этом отношении):

$tree tmp/output
tmp/output/
├── assets
│   ├── app.css
│   ├── app.js
│   ├── qunit.css
│   ├── qunit.js
│   └── vendor.css
├── images
├── index.html
├── testem.js
└── tests
    └── index.html

3 directories, 8 files

Подробнее:

SCSS, который я хотел бы скомпилировать (для генерации спрайтов):

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";

Ответ 1

Трудный путь

Добавьте к своему brocfile

var app = new EmberApp({
    compassOptions: {
        imagesDir: 'public/assets'
    }
});

а затем импортируйте значки

@import "compass/utilities/sprites";
@import "icons/*.png";

$icons-sprite-dimensions: true;
@include all-icons-sprites;

и перезаписать путь

.icons-sprite {
    background-image: url('/assets/icons-sea02d16a6c.png');
}

Более элегантный способ

Настроить компас для использования определенного каталога

@import "compass/utilities/sprites";
@import "compass/configuration";

$compass-options: (http_path: "/", generated-images-path: "public/assets", http-generated-images-path: "/assets", images-path: "public/assets");

@include compass-configuration($compass-options);

@import "icons/*.png";
$icons-sprite-dimensions: true;
@include all-icons-sprites;

Это не идеальное решение, хотя оно работает. Конфигурация не должна храниться в файлах .scss. К сожалению, эти опции внутри brocfile не будут летать.

Ответ 2

Я думал, что это будет решено с помощью админа адброна и постпроцесса, я опубликовал аддон,

Чтобы установить прогон: npm install ember-cli-compass --save-dev внутри вашего проекта.

Настройте в Brocfile.js.

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
    compass: {
        outputStyle: 'expanded',
        relativeAssets: false,
        sassDir: 'assets',
        imagesDir: 'images',
        cssDir: 'assets'
    }
});

module.exports = app.toTree();

Это похоже на то, что вы хотите, но я не уверен. Также мне нужно было изменить public/images на images, потому что папка public/images копируется в dist/images. Возможно, эта проблема и вам не нужен аддон.

Надеюсь, это исправит вашу проблему.