working example

[at0g]

Hello, any chance of a complete working example, including a couple of image files?

I'm new to broccoli (which is probably the issue) and tried to follow your example, but get an error.

I've created a simple example but don't see what I'm doing wrong?

[bguiz]

A complete example in use is in ember-sprite: https://github.com/bguiz/ember-sprite

Let me know if you have any more questions.

On 9 Nov 2014 12:17, "Ben Daley" notifications@github.com wrote:

Hello, any chance of a complete working example?

I'm new to broccoli (which is probably the issue) and tried to follow your example, but get an error.

I've created a simple example but don't see what I'm doing wrong?

— Reply to this email directly or view it on GitHub.

[bguiz]

I'm closing this due to no response, feel free to ask more questions though!

[mlunoe]

I'm struggling with getting broccoli-sprite to work for me.

Here's my files structure:

src/
  img/
    sprites/
      image1.png
      image2.png
    ...
  styles/
    ...
    main.less

where main.less contains @import statements for getting other stylesheets.

Here is how I try to get it to work with broccoli:

var spriteTree = sprite("src", {
  src: ["img/sprites/*.png"],
  spritePath: "img/sprites.png",
  stylesheetPath: "styles/main.less",
  stylesheet: "less",
  stylesheetOptions: {
    prefix: "sprite-",
    spritePath: "img/sprites.png",
  },
});

Seems no matter what I do, I get:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: write EPIPE
  at errnoException (net.js:905:11)
  at Object.afterWrite (net.js:721:19)

which is not very helpful. Could I get a small working example, and/or some more helpful error messages?

Should I run this before or after I run my less compiler? Right now I'm trying before (hence using less), but if I'm importing style sheets from other places, should I do the spriting after less-compilation?

[bguiz]

which is not very helpful. Could I get a small working example, and/or some more helpful error messages?

Should I run this before or after I run my less compiler? Right now I'm trying before (hence using less), but if I'm importing style sheets from other places, should I do the spriting after less-compilation?

Hi Michael,

Full working example: https://github.com/bguiz/ember-sprite

As for whether it is run before or after - that is really up to you. Do you expect to use LESS after generating sprites?

• If yes, then you must run broccoli-sprite before your LESS compiler
• If no, then it does not matter what order you run them in

From your example invocation above, in your configuration, you have:

  stylesheetPath: "styles/main.less",
  stylesheet: "less",

... which means that you want the sprite sheet to output a *.less file, which in turn means that you need to run broccoli-sprite before your LESS compiler - that's the first option.

If, on the other hand, you wish to use broccoli-sprite to output CSS, and simply concatenate it to the output CSS of the output from LESS - that's the latter option, and you're covered too, with the ember-sprite project linked above providing a great example of how to do that.

HTH!

W: http://bguiz.com

On 23 March 2015 at 13:04, Michael Lunøe notifications@github.com wrote:

I'm struggling with getting broccoli-sprite to work for me.

Here's my files structure:

src/ img/ sprites/ image1.png image2.png ... styles/ ... main.less

where main.less contains @import statements for getting other stylesheets.

Here is how I try to get it to work with broccoli:

var spriteTree = sprite("src", { src: ["img/sprites/*.png"], spritePath: "img/sprites.png", stylesheetPath: "styles/main.less", stylesheet: "less", stylesheetOptions: { prefix: "sprite-", spritePath: "img/sprites.png", }, });

Seems no matter what I do, I get:

events.js:72 throw er; // Unhandled 'error' event ^ Error: write EPIPE at errnoException (net.js:905:11) at Object.afterWrite (net.js:721:19)

which is not very helpful. Could I get a small working example, and/or some more helpful error messages?

Should I run this before or after I run my less compiler? Right now I'm trying before (hence using less), but if I'm importing style sheets from other places, should I do the spriting after less-compilation?

— Reply to this email directly or view it on GitHub.

[mlunoe]

Hi Brendan,

Thanks for your comments, though I don't see any css or image files in that repository in any of the branches??

I'm going to continue trying to make it work, and post back here if I succeed

[bguiz]

The ember sprite project uses broccoli sprite in order to build ember-cli projects. You won't need any CSS (or SCSS or LESS) files as input, but you will need a folder full of images - and simply point it at that folder. W: http://bguiz.com

On 24 March 2015 at 04:40, Michael Lunøe notifications@github.com wrote:

Hi Brendan,

Thanks for your comments, though I don't see any css or image files in that repository in any of the branches??

I'm going to continue trying to make it work, and post back here if I succeed

— Reply to this email directly or view it on GitHub.