javascript - ¿Cómo generar sprites de imagen en ember-cli usando la brújula?

css ember.js

Question

Actualización - 20140614:

Después de no obtener ninguna respuesta a esta pregunta, ni a github, decidí buscar mi propia solución al problema. Estaba usando una brújula para varias cosas, pero su principal utilidad radicaba en su capacidad para generar sprites de imágenes. La mayoría de las otras cosas se pueden lograr usando SCSS puro.

Por lo tanto, escribí broccoli-sprite . Esto, utilizado en conjunto con el soporte integrado de ember-cli para SCSS usando broccoli-sass , fue capaz de satisfacer mis necesidades.

broccoli-sprite

Puede leer más sobre el proceso aquí .

Ahora ya no estoy interesado en integrar brújula en mi aplicación ember-cli. Como mi solución no responde directamente la pregunta (ya que no usa la brújula), considero que esta pregunta no ha sido respondida. Ya que esta pregunta podría beneficiar a otros en la comunidad que desean hacerlo, lo dejo abierto, y aún honraré la recompensa.

Actualización - 20140620:

Bounty ha expirado.

Pregunta original :

En una aplicación ember-cli , utilizando broccoli-compass , ¿cómo se puede configurar de tal manera que el CSS generado haga referencia a las rutas del archivo de imagen correctamente, incluidas las rutas de archivos de imágenes generadas?

Usando la brújula, el siguiente SCSS:

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

... generará un único archivo .png con todas las imágenes en la carpeta de icon y CSS para mostrar cada uno.

Me gustaría poder hacer lo mismo vía brújula dentro de ember-cli, que usa broccoli para construir su cartera de activos.

• Debe funcionar dentro de ember-cli, es decir, debe generarse cuando se ejecuta el servidor de brasas o la construcción de brasas
• Debe usar una brújula para generar sprites de imagen desde una carpeta de imágenes
• Las imágenes generadas deben copiarse a la carpeta de activos
• El CSS generado debe apuntar a las imágenes ubicadas en la carpeta de activos, no a una carpeta de árbol temporal

Lo que he intentado hasta ahora:

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

Cuando hago esto, el comando compass falla porque no puede ubicar los archivos de imagen dentro del árbol.

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

Para probar cosas, copio los archivos de imagen en el directorio de estilos. Esta vez, el comando brújula tiene éxito, pero el CSS generado hace referencia a los archivos de imagen que no existen. Las imágenes generadas no parecen copiarse en la carpeta de activos como se esperaba (o en cualquier otro lugar):

$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

Detalles :

SCSS que me gustaría poder compilar (para la generación de sprites):

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

Answer 1

El camino difícil

Agregue a su brocfile

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

y luego importar los íconos

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

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

y sobrescribir el camino

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

La forma más elegante

Configure brújula para usar un directorio particular

@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;

No es una solución perfecta aunque funciona. La configuración no debe almacenarse en archivos .scss . Desafortunadamente esas opciones dentro de brocfile no van a volar.

Answer 2

Pensé que esto se resolvería usando un complemento de brasas y un gancho de postproceso, publiqué un complemento,

Para instalar run: npm install ember-cli-compass --save-dev dentro de tu proyecto.

Configure en su 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();

Esto parece hacer lo que quieras, pero no estoy seguro. También necesitaba cambiar public/images a solo images , porque public/images carpeta public/images copia en dist/images . Tal vez ese es el problema y no necesitas un complemento.

Espero que esto solucione tu problema.