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

我只是一个虾纸丫 提交于 2020-01-03 14:00:07

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!