A
A
Anton2017-09-16 23:44:12
gulp.js
Anton, 2017-09-16 23:44:12

gulp.spritesmith failed. How to cure?

ERORR

gulp-notify: [Error running Gulp] scss\_includes\_sprite_png.scss
Error: argument `$map` of `map-get($map, $key)` must be a map

       Backtrace:
        scss/_includes/_sprite_png.scss:13, in function `map-get`
        scss/_includes/_sprite_png.scss:13, in function `icon-attr`
        scss/_includes/_sprite_png.scss:18, in mixin `sprite`
        scss/_modules/_icons.scss:136
        on line 13 of scss/_includes/_sprite_png.scss
>>      @return map-get($icon, $attr);
   ---------^

Gulp CFG
gulp.task('sprite:png', function () {

    var spriteData = gulp.src(development + 'img/sprite/*.png')
        .pipe(spritesmith({
            imgName     : 'icons.png',
            cssName     : '_sprite_png.scss',
            imgPath     : '../img/icons.png',
            ccsFormat: 'scss',
            padding     : 4,
            cssTemplate : 'scss/_helpers/sprite.template.mustache',//sprites.template.handlebars/sprites_2.template.mustache
            // imgPathRetina: development + 'img/[email protected]',
            // retinaSrcFilter : development + 'img/sprite/*@2x.png',
            // retinaImgName: '[email protected]'
        }));
    spriteData.img.pipe(gulp.dest(development + 'img')); // путь, куда сохраняем картинку
    spriteData.css.pipe(gulp.dest(development + 'scss/_includes')); // путь, куда сохраняем стили

});

Tempalte sprite.template.mustache'
{
  // Default options
  'functions': true
}

$icons: (0:0);
{{#items}}
$icons: map-merge($icons,({{name}}: (X: {{px.offset_x}}, Y:{{px.offset_y}}, W: {{px.width}}, H: {{px.height}}, TW: {{px.total_width}}, TH: {{px.total_height}}, IMG: '{{{escaped_image}}}')));
{{/items}}


{{#options.functions}}
// Gets an attribute from the sass map
@function icon-attr($icon, $attr){
  $icon: map-get($icons, $icon);
  @return map-get($icon, $attr);
}
  

@mixin sprite($iconName){
  background-image: url(icon-attr($iconName, IMG));
  width: icon-attr($iconName, W);
  height: icon-attr($iconName, H);
  background-position: icon-attr($iconName, X) icon-attr($iconName, Y);
}
  

@mixin sprite-position($iconName){
  background-position: icon-attr($iconName, X) icon-attr($iconName, Y);
}
@mixin sprite-retina($iconName){
  background-image: url(icon-attr($iconName, IMG));
  $width: icon-attr($iconName, W);
  $height: icon-attr($iconName, H);
  width: $width/2;
  height: $height/2;
  $x: icon-attr($iconName, X);
  $y: icon-attr($iconName, Y);
  background-position: $x/2 $y/2;
  $tw: icon-attr($iconName, TW) ;	
  $th: icon-attr($iconName, TH);
  background-size: $tw/2 $th/2;
}	

{{/options.functions}}

@mixin s($i){
  @include sprite($i);
}
@mixin sp($i){
  @include sprite-position($i);
}
@mixin sr($i){
  @include sprite-retina($i);
}

//{{#items}}
//.icon-{{name}}{
//	width: {{px.width}};
//	height: {{px.height}};
//	background-image: url('{{{escaped_image}}}');
//	background-position: {{px.offset_x}} {{px.offset_y}};
//}
//{{/items}}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question