没有大量的经验,这可能是我的一个简单的错误,但我找不到一个可以在任何地方工作的解决方案…希望堆栈溢出可以拯救我!
我正在尝试使用节点插件sprity创建spritesheet和关联的SASS(.scss)样式表. https://www.npmjs.com/package/sprity
我已经安装了sprity和sprity-sass(以及gulp-sass和我已经使用过的其他人).我在安装过程中遇到了一些错误 – 不知道这些是当前问题的原因,还是如何修复它们(我想我可能已经解决了一些问题,见下文)
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
我已经通过安装另外修复了各种错误:
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')
当我运行gulp精灵时,我会收到Starting’sprites’消息,然后是各种错误:
Error: Unknown arguments configuration,[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)
我的gulpfile的相关部分是:
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/'))) });
取消注释样式类型行会产生不同的错误:
'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)
我已经安装了sprity-sass,运行npm sprity-sass -v按预期返回版本号(2.14.4),所以不确定为什么我收到此消息?或者“意外字符串”消息指的是什么?
我已经验证了/ img / sprites和/ img / sprites / somefolder中至少有一个图像文件
我在mac OSX Yosemite v 10.10.5(14F27) – 这只是为了增加混乱,我是新手(曾经使用过windows!)
解决方法
我刚刚运行了npm install lwip(
https://www.npmjs.com/package/lwip#installation)然后npm install sprity –sav-dev和npm install sprity-sass –sav-dev …
它现在正在工作!