selaux / node-sprite-generator Goto Github PK

Would you be able to support the command line arguments passed to this task? I was kinda surprised when --no-write didn't work.

Looking under the hood I see that you are not using grunt.file api to write files.

If nsg is used twice, back to back, in the same process, the 2nd run will inherit some of the modifications of the 1st run. See stylesheetOptions in the two snippets below. These are console.logs from right inside generateSprite and then right after the defaults are applied.

The problem is that stylesheetOptions.spritePath never gets fixed in the 2nd run, so the output Stylus points at the wrong image. It should be pointing at index2 but instead is pointing at index which is leftover from the 1st run.

First run

PASSED IN
{ src: 
   [ 'assets/images/sprite/index/*.png',
     'assets/images/sprite/common/*.png' ],
  spritePath: 'assets/images/index.png',
  stylesheetPath: 'assets/stylesheets/sprite/index.styl' }
OPTIONS AFTER MANIPULATION
{ src: 
   [ 'assets/images/sprite/index/*.png',
     'assets/images/sprite/common/*.png' ],
  spritePath: 'assets/images/index.png',
  stylesheetPath: 'assets/stylesheets/sprite/index.styl',
  layout: 'vertical',
  stylesheet: 'stylus',
  compositor: 'gm',
  layoutOptions: {},
  compositorOptions: {},
  stylesheetOptions: {} }

Second run

OPTIONS BEFORE
{ src: 
   [ 'assets/images/sprite/index2/*.png',
     'assets/images/sprite/common/*.png' ],
  spritePath: 'assets/images/index2.png',
  stylesheetPath: 'assets/stylesheets/sprite/index2.styl' }
OPTIONS AFTER
{ src: 
   [ 'assets/images/sprite/index2/*.png',
     'assets/images/sprite/common/*.png' ],
  spritePath: 'assets/images/index2.png',
  stylesheetPath: 'assets/stylesheets/sprite/index2.styl',
  layout: 'vertical',
  stylesheet: 'stylus',
  compositor: 'gm',
  layoutOptions: { padding: 0 },
  compositorOptions: {},
  stylesheetOptions: 
   { spritePath: '../../images/index.png',
     prefix: '',
     nameMapping: [Function],
     pixelRatio: 1 } }

The 0.10.2 version published to npm uses the [email protected] package (see its package.json).
This [email protected] version is vulnerable to RegEx (mentionned in this GitHub issue) and fixed it on the [email protected] version.

I know the current package on GitHub has already fixed it by now (🎉) using the [email protected] package (see its package.json) ... but this change has not been published to npm yet.

It would be nice to publish a new version of the package (like 0.10.3) with these changes.

Hi, I can't figure out what causes the following error in my console when I try to run node-sprite-generator from grunt. My task looks the following:

        spriteGenerator: {
            sprite: {
                compositor: 'gm',
                src: [
                    'build/app/images/sprites/*.png'
                ],
                layout: 'diagonal',
                spritePath: 'build/app/images/sprite-node-gen.png',
                stylesheet: 'css',
                stylesheetPath: 'build/app/css/main.css',
                stylesheetOptions:{
                    spritePath: '../images/sprite-node-gen.png'
                }
            }
        },

the spritePath and every other path is valid.

I tracked down where the compositor stops:
https://github.com/selaux/node-sprite-generator/blob/master/lib/compositor/gm.js#L11

But I gave up without solution. Do you have any idea how to proceed?

I'm on osx. ty.

The fix is to add this to your bash profile / environment:

export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig

(Perhaps put this somewhere in the readme)

Homebrew/legacy-homebrew#14123

How can I pass list of input files into node-sprite-generator in buffer format and retrieve the output data as buffer also?

Hey there,
I just got this stack trace on my AppVeyor build all of a sudden - happens intermittently which is confusing:

The Broccoli Plugin: [object Object] failed with:
Error: Either you defined a bad compositor or you dont have the correct dependencies installed.
    at generateSprite (C:\projects\dashboard\node_modules\node-sprite-generator\lib\nsg.js:66:25)
    at C:\projects\dashboard\node_modules\broccoli-sprite\index.js:56:5
    at initializePromise (C:\projects\dashboard\node_modules\rsvp\dist\rsvp.js:589:5)
    at new Promise$1 (C:\projects\dashboard\node_modules\rsvp\dist\rsvp.js:1077:33)
    at BroccoliSprite.updateCache (C:\projects\dashboard\node_modules\broccoli-sprite\index.js:55:17)
    at C:\projects\dashboard\node_modules\broccoli-sprite\node_modules\broccoli-caching-writer\index.js:49:36
    at lib$rsvp$$internal$$tryCatch (C:\projects\dashboard\node_modules\broccoli-sprite\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:493:16)
    at lib$rsvp$$internal$$invokeCallback (C:\projects\dashboard\node_modules\broccoli-sprite\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:505:17)
    at C:\projects\dashboard\node_modules\broccoli-sprite\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1001:13
    at lib$rsvp$asap$$flush (C:\projects\dashboard\node_modules\broccoli-sprite\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

Here's my GraphicsMagick version:

gm version
GraphicsMagick 1.3.25 2016-09-05 Q16 http://www.GraphicsMagick.org/
Copyright (C) 2002-2016 GraphicsMagick Group.
Additional copyrights and licenses apply to this software.
See http://www.GraphicsMagick.org/www/Copyright.html for details.
Feature Support:
  Native Thread Safe       yes
  Large Files (> 32 bit)   yes
  Large Memory (> 32 bit)  yes
  BZIP                     yes
  DPS                      no
  FlashPix                 no
  FreeType                 yes
  Ghostscript (Library)    no
  JBIG                     yes
  JPEG-2000                yes
  JPEG                     yes
  Little CMS               yes
  Loadable Modules         yes
  OpenMP                   yes (200203)
  PNG                      yes
  TIFF                     yes
  TRIO                     no
  UMEM                     no
  WebP                     yes
  WMF                      yes
  X11                      no
  XML                      yes
  ZLIB                     yes
Windows Build Parameters:
  MSVC Version:            1500

Not sure what else could cause this issue besides a bad gm installation, but it seems fine. Any ideas?

Because of not resizing image based on provided pixelRatio, client is required to load oversize image which is not necessary.

I am willing to send a pull request to cover this for only 'compositor: gm'.
@selaux, please let me know, if this is something you would be willing to accept?

Try generating an sprite with options.layoutOptions.padding = 5 and you'll notice that the generated sprite is blurred. Probably it's due to some rounding when positioning the elements.

Please at least add a warning in the docs until it's fixed.

CSSLint dings you on the use of 0px vs 0, would be great to eliminate those warnings from the generated output.

For each template type, lib/stylesheet/index.js calls getTemplatedStylesheet once passing in the contents of a file for the respective built in template, and getTemplatedStylesheet then returns a function that is used as renderStylesheet in nsg.js.

However, when using a custom template file,getTemplatedStylesheet is passed the filename instead of the contents of the file.

I am running Windows 10, Node 10.16.2

On running npm install node-sprite-generator, I get this error:

gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Python361\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                                ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:294:12)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at maybeClose (internal/child_process.js:982:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
gyp ERR! System Windows_NT 10.0.17763
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\t965267\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Delia\node-sprite-gen\node_modules\canvas
gyp ERR! node -v v10.16.2
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok

Do I need some other version of python on my machine?

Here is my code:

var nsg = require('node-sprite-generator');
  nsg({
      src: ['images/1.jpg',
        'images/2.jpg',
        'images/3.jpg'
      ],
      spritePath: 'sprite.png',
      stylesheetPath: 'sprite.css',
      stylesheet: 'css'
  }, function (err) {
      console.log('Sprite generated!');
  });

When i run it using node sprite.js It says "Sprite generated!" but nothing happens, there is no sprite.png and no sprite.css!
I'm using vscode internal terminal.

Hi there,

I'm seeing an error when trying to output javascript styles.

I have tried this with both gm and jimp compositors.

error message:

ENOENT: no such file or directory, open 'javascript'
error Command failed with exit code 1.

config:

{
    src: [path.resolve(__dirname, './assets/spriteable/horizontal/*')],
    spritePath: path.resolve(__dirname, 'assets/__generated__/spritesheet/allbookies-hz.png'),
    stylesheetPath: path.resolve(__dirname, 'assets/__generated__/spritesheet-style/allbookies-hz.js'),
    stylesheet: 'javascript',
    compositor: 'gm',
    compositorOptions: {
      compressionLevel: 6,
    },
  }

package.json:

{
  "name": "org-image",
  "version": "0.86.0",
  "description": "image processing stuff",
  "license": "ISC",
  "main": "lib/org-image.js",
  "scripts": {
    "build": "tsc",
    "postinstall": "cd ../.. && yarn postinstall",
    "postuninstall": "cd ../.. && yarn postinstall",
    "transpile": "npm run build",
    "transpile:watch": "npm run build -- --watch",
    "type-check": "tsc --noEmit"
  },
  "devDependencies": {
    "@types/node-sprite-generator": "^0.10.1",
    "node-sprite-generator": "^0.10.2",
    "ts-node": "8.2.0"
  },
  "bin": {
    "spritesheet": "scripts/spritesheet.sh"
  }
}

Hi, I was just trying to run the generator but I get the following error:

Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-format" "%wx%h" "-" this most likely means the gm/convert binaries can't be found
at ChildProcess. (/[PROJECT]/node_modules/gm/lib/command.js:231:12)
at emitOne (events.js:96:13)
at ChildProcess.emit (events.js:188:7)
at Process.ChildProcess._handle.onexit (internal/child_process.js:213:12)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)

Very interesting, but what can I do if I have all the icons in svg format?

First of all, thanks for the tool!

Right now, I really need the output javascript function, so when can get the next release?

A callback appears to be invoked without the expected parameters in lib/compositor/gm.js

This is my test file:

    /*globals require*/
    var nodeSpriteGenerator = require('node-sprite-generator');

    var nsgOptions = { src: [ 'public/images/sprites/*.png' ],
      spritePath: 'public/assets/sprites.png',
      stylesheetPath: 'public/assets/sprites.css',
      stylesheet: 'css',
      compositor: 'gm',
      stylesheetOptions: { prefix: 'icon-' }
    };

    console.log('nsgOptions', nsgOptions);
    nodeSpriteGenerator(nsgOptions, function (err) {
        if (!err) {
          console.log('Sprite generated!');
        }
        else {
          console.log('Sprite generation failed:', err);
        }
    });

.. and this is the output that I get when I run it:

    $ node test-nsg.js 
    nsgOptions { src: [ 'public/images/sprites/*.png' ],
      spritePath: 'public/assets/sprites.png',
      stylesheetPath: 'public/assets/sprites.css',
      stylesheet: 'css',
      compositor: 'gm',
      stylesheetOptions: { prefix: 'icon-' } }

    /home/bguiz/code/test-nsg/node_modules/node-sprite-generator/lib/compositor/gm.js:23
                    width: size.width,
                               ^
    TypeError: Cannot read property 'width' of undefined
        at gm.<anonymous> (/home/bguiz/code/test-nsg/node_modules/node-sprite-generator/lib/compositor/gm.js:23:28)
        at gm.EventEmitter.emit (events.js:115:17)
        at gm.<anonymous> (/home/bguiz/code/test-nsg/node_modules/node-sprite-generator/node_modules/gm/lib/getters.js:70:16)
        at ChildProcess.cb (/home/bguiz/code/test-nsg/node_modules/node-sprite-generator/node_modules/gm/lib/command.js:264:16)
        at ChildProcess.EventEmitter.emit (events.js:104:17)
        at Process.ChildProcess._handle.onexit (child_process.js:877:12)
        at child_process.js:1009:20
        at process._tickCallback (node.js:664:11)

I think it would be nice if node-sprite-generator supports sharp as a compositor.

When i generate my LESS file I get some - i hope so - useful variables
@generali-sprites-logo-x: "0";
@generali-sprites-logo-y: "0";
@generali-sprites-logo-width: "113px";
@generali-sprites-logo-height: "91px";

Why these are in string format? In this way I cannot use them for calculations. If I would like to calculate, for example, margin based on image width or height, I have to use image-size native LESS function despite having already the size inside my sprite LESS file.

Why not convert them in number and use interpolation in sprite mixin?

node-sprite-generator version 0.10.2 depends on canvas 1.3.12.
https://github.com/selaux/node-sprite-generator/blob/0.10.2/package.json#L15

Since canvas 1.3.12 has some issues that have been solved with version 1.6.3:

• Clang build error wrt isnan and isinf #863
• Failed at the [email protected] install script 'node-gyp rebuild'

it would be great to see a new release of node-sprite-generator with an updated canvas version. In the master branch the canvas dependency is already updated:
https://github.com/selaux/node-sprite-generator/blob/master/package.json#L16

Oops wrong repo :(

Please support less, it's an easy language and is used more frequently than Stylus.

my code is looks like the 'Standalone' but it didn't work. How can i fix it?

Is there a CLI available?

Regards

Chris

Would it be possible to tag a new release that includes the recent fixes for #7 and #8?

I have a couple team members that need to be able to pull this down via npm with those fixes intact.

Thanks!

It turns out that the quality() method in the gm node module expects a value between 0-100, rather than 0-9.

Consequently, the default compressionLevel value of 6 for the gm compositor could stand to be bumped considerably. :)

I was confused when I was getting a 1.2 MB spritesheet that ImageOptim was able to shrink to ~140kb. Once I configured node-sprite-generator to use a compressionLevel of 100, it produced a ~140kb spritesheet.

Resolving #6 will allow users to pass their own compressionLevel on to the compositor, but it would probably be a good idea to update the default value and README when you get a chance.

Thanks!

Hi

Sorry if it is a really noob question but how does one extend? I have already looked at the current implementation and know what I need to do. However I need the extend to be clean and live in a separate folder so that it doesn't get overwritten when updating or if doing a "npm install" from fresh.

In particular I want the less output to be somewhat similar to what's here. I know I can get the plugin to produce something similar by having something like the following code but there is a lot of repeated code:

{
stylesheetPath: 'imgs/spriteTest/sprite.less',
stylesheet: 'css',
}

I know I need to tweak the templates/less.tpl but I want it in another directory. Is there a clean way to do it?

Thanks in advance. Cheers.

The documentation mentions support for outputting sass, however it doesn't seem to work?

After upgrading Node to 0.10.26, generated sprites no longer have transparent background but they have a white background despite original pngs are transparent. Someone with my same problem? Thanks

The main README contains instruction on how to use with grunt.

Could you please add some instructions for how to use with Broccoli?

{ Error: Command failed: gm convert: Unrecognized option (-Infinity).

This seems to get triggered at node_modules/gm/lib/command.js:297:17

I got the error Unrecognized option when I tried to generate sprites with this options:

            nsg({
                src: [
                    this.config.src + `/*.png`,
                ],
                spritePath: this.config.dest + `/sprite.png`,
                stylesheetPath: this.config.cssDest + `/sprite.css`,
                stylesheet: 'css',
                stylesheetOptions: {
                    prefix: 'icon-',
                },
                compositor: 'gm'
            }, function (err) {
                if(err){
                    throw err;
                }
            });```

I can no longer compile canvas 1.3.12 on OS X with macports. Canvas 1.6 builds find and seems to work fine generating sprites.

It would be awesome if you could build out a version of this that uses something like https://www.npmjs.com/package/jimp or http://camanjs.com/ instead of the more native stuff like GM or cairo

The SASS output is working now, however there are some syntax issues,

';' is needed at the end of rules and variable declarations
The mixin need to be inclosed by { }

ie it needs to look like this

$top: 0 0 80px 80px;
$top_hover: 0 -80px 80px 80px;
$twitter: 0 -160px 19px 15px;
$up_arrow: 0 -175px 30px 30px;
$youtube: 0 -205px 19px 18px;
@mixin sprite($sprite) {
    background-image: url('img/frontend/sprite.png');
    background-position: nth($sprite, 1) nth($sprite, 2);
    width: nth($sprite, 3);
    height: nth($sprite, 4);
}

Hi

I wrote for myself a custom stylesheet generator which use CSS attributes wildcards
https://github.com/mistic100/angular-smilies/blob/grunt-task/SpriteStylesheet.js

the main advantage is to not redefine the bakground-image for each sprite
I also plan to use common width/height if all dimensions are equals
the drawback is that it requires a non empty prefix

do you think it could be implemented as a new stylesheet ? (I can do a proper pull-request, with template)
also I don't know how to name it :-)

Why have you removed JPG support? I use jimp composer and in 0.10.2 I can still render image to JPG just by using filename with .jpg extension, but in master I can see there's forced PNG support only (even for .jpg extension a PNG-format file is rendered).

It's useful to have an option to choose the format. For example in my project the example sprite file sizes are:

1. PNG = 4.7 MB
2. JPG = 2.6 MB (quality: 100)
3. JPG = 0.9 MB (quality: 90)

There's no visible quality decrease for these pictures (source images are anyway JPG-s with 90 quality) so I'd like to choose 3rd option with the smallest file.

Also, for 0.10.2 there's no option to provide JPG quality, which I've provided additionally here l0co@7fcd13f