Spritesmith gulp.dest pathing issue

Question

Every time I run my sprite task, I get the error EPERM: operation not permitted, mkdir 'C:\Users\images'. I'd like the image path to be relative.

I don't understand why the destination for my new spritesheet is pointing in my Users directory when the scss file saves correctly in its parent (src) folder. Also, the scss builds correctly and reads my png files in /sprites.

My folder structure:

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

Gulp task:

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('./'));
});

As I've stated, everything works except for the image path of the new sprite.png.

score 1 · Accepted Answer · answered Oct 01 '17 at 15:20

I would simplify this:

imgName: '/images/sprite.png',

to

imgName: 'images/sprite.png',

and modify

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

to

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

It looked you would end with two backslashes next to each other as in www/images//sprite.png

Spritesmith gulp.dest pathing issue

1 Answers1