问题
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 sprity-lwip@1.0.6
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!)
回答1:
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!
来源：https://stackoverflow.com/questions/33500066/sprity-gulp-spriting-image-scss-generator-various-errors-when-run-task