Spritesmith gulp.dest 路径问题答案

【问题标题】：Spritesmith gulp.dest pathing issueSpritesmith gulp.dest 路径问题
【发布时间】：2017-10-01 14:23:26
【问题描述】：

每次我运行我的 sprite 任务时，都会收到错误 EPERM: operation not allowed, mkdir 'C:\Users\images'。我希望图像路径是相对的。

我不明白为什么当 scss 文件正确保存在其父 (src) 文件夹中时，我的新 spritesheet 的目标指向我的用户目录。此外，scss 可以正确构建并在 /sprites 中读取我的 png 文件。

我的文件夹结构：

  /
  src/
    node_modules/
    sprites/
    _sprites.scss
    gulpfile.js
  www/
    images/

Gulp 任务：

var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
    var spriteData = gulp.src('./sprites/*.png')
        .pipe(spritesmith({
            imgName: '/images/sprite.png',
            cssName: '_sprites.scss'
        }));
    spriteData.img.pipe(gulp.dest('./../www/images/'));
    spriteData.css.pipe(gulp.dest('./'));
});

正如我所说，除了新 sprite.png 的图像路径之外，一切正常。

【问题讨论】：

标签： gulp gulp-spritesmith

【解决方案1】：

我会简化一下：

imgName: '/images/sprite.png',

到

imgName: 'images/sprite.png',

并修改

spriteData.img.pipe(gulp.dest('./../www/images/'));

到

spriteData.img.pipe(gulp.dest('./../www/images'));

看起来你会以两个相邻的反斜杠结尾，就像在 www/images//sprite.png 中一样

【讨论】：