Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sprity (gulp spriting image/scss generator) various errors when run task

Not being massively experienced with gulp, this may well be a simple mistake on my part, but I've not been able to find a solution that works anywhere online... hoping stack overflow can save me!

I'm trying to create a spritesheet and associated SASS (.scss) stylesheet using the node plugin sprity. https://www.npmjs.com/package/sprity

I've installed sprity and sprity-sass (as well as gulp-sass and others I was already using). I got a number of errors during installation - don't know if these are the cause of the current issue, or how to go about fixing them (I think I may have addressed some, see below)

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:355:16)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 14.5.0
gyp ERR! command "/usr/local/bin/node"    "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/sprity-lwip/node_modules/lwip
gyp ERR! node -v v4.1.2
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok 
npm WARN optional dep failed, continuing [email protected]

Have had various errors which I have fixed by installing in addition:

lwip (fixed error [10:27:09] Error: PluggableError: lwip not found.) - this generated multiple warnings.

gulp-if (fixed to error Error: Cannot find module 'gulp-if') 

When I run gulp sprites, I get the the Starting 'sprites' message and then various errors:

Error: Unknown arguments configuration,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
    at Error (native)
    at /Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/lwip/node_modules/decree/dist/cjs/decree.js:80:27
    at Object.create (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/lwip/lib/obtain.js:66:33)
    at renderSprite (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/lib/sprite.js:47:17)
    at createSprite (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/lib/sprite.js:81:13)
    at DestroyableTransform._transform (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/lib/sprite.js:124:9)
    at DestroyableTransform.Transform._read (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at DestroyableTransform.Writable.write (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
    at write (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:67:13)
    at DestroyableTransform.emit (events.js:166:7)

The relevant sections of my gulpfile are:

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var gulpif = require('gulp-if');
var sprity = require('sprity');

// generate sprite.png and _sprite.scss
gulp.task('sprites', function () {
    return sprity.src({
        src: './img/sprites/**/*.{png,jpg}',
        style: './sass/_sprites.scss',
        // ... other optional options
        // for example if you want to generate scss instead of css
        processor: 'sass'
        //'style-type': 'scss' // make sure you have installed sprity-sass
   })
       .pipe(gulpif('*.png', gulp.dest('./img/'), gulp.dest('./css/')))
});

Uncommenting the style-type line produces a different error:

'style-type': 'scss' // make sure you have installed sprity-sass
        ^^^^^^^^^^^^

SyntaxError: Unexpected string
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:413:25)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:192:16)
    at module.exports (/usr/local/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)

I have installed sprity-sass, and running npm sprity-sass -v returns a version number (2.14.4) as expected, so not sure why I'm getting this message? Or what the "unexpected string" message refers to?

I've verified that there is at least one image file in both /img/sprites and /img/sprites/somefolder

I'm on mac OSX Yosemite v 10.10.5 (14F27) - which just to add to the confusion, I'm new to (used to using windows!)

like image 765
Roxy Walsh Avatar asked Sep 27 '22 07:09

Roxy Walsh


1 Answers

I just ran npm install lwip (https://www.npmjs.com/package/lwip#installation) and then npm install sprity --sav-dev and npm install sprity-sass --sav-dev...

It's working now!

like image 116
deleting Avatar answered Oct 04 '22 20:10

deleting