gulp.spritesmith的学习教训

2019年9月7日 159次阅读 来源: 盈嫣媚儿

前言：

css Sprites指的是网页图片的一种处理技巧，通常是将一些体积小的不常更换的图片进行处理，目的是为了减少HTTP请求次数，也是优化必不可少的工作。
这里是对自己在gulp中合成雪碧图的一些的经验和总结！

gulp中用于合成雪碧图的模块有许多，我只是针对gulp-css-spriter和gulp.spritesmith这两个做了尝试，在尝试过程中发现写对css文件和images文件路径是关键问题，只有把路径配对了那几乎没有啥问题了。

gulp-css-sprite

tip:这个模块很久没有更新了，下载量也很小，了解一下即可，可以有时候也是可以用到的.
首页看一下目录结构方便对照观察了解：

《gulp.spritesmith的学习教训》

var gulp=require("gulp"),
spriter=require('gulp-css-spriter');

gulp.task('sprite',function(){
var timestamp= + new Date();//生成时间戳
gulp.src('src/spriteTest/css/test.css')
    .pipe(spriter({

        // 生成的spriter的位置
            'spriteSheet':'src/spriteTest/dist/images/sprite_'+timestamp+'.png',
        // 生成样式文件图片引用地址的路径
            'pathToSpriteSheetFromCSS':'../images/sprite_'+timestamp+'.png'
    }))
        //图片合并后css文件中图片名也响应替换掉输出的css文件的目的地址    
    .pipe(gulp.dest('src/spriteTest/dist/css/'));
    /*.pipe(autoprefixer({
        browsers:['last 2 Chrome versions', 'Safari >0', 'Explorer >0', 'Edge >0', 'Opera >0', 'Firefox >=20'],
        cascade:false,
        remove:false
    }))*/
});

说明在编译css的时候背景图都加了一个参数用了说明是要css sprite的；
例如test.css文件中添加了”？__spriter”用来标识是要替换的

.icon1:after {
    background: url("../images/icon1.png?__spriter") no-repeat center center;
}
.icon2:after {
    background: url("../images/icon2.png?__spriter") no-repeat center center;
}

.icon3:after {
    background: url("../images/icon3.png?__spriter") no-repeat center center;
}
.icon4:after {
    background: url("../images/icon4.png?__spriter") no-repeat center center;
}

当你在npm install gulp-css-sprite –save-dev下该模块时是默认不加标识的，从网上了解到修改该模块可以加上标识，这里就不具体说明了，可以参考如下博文自行修改：

博客园：http://www.cnblogs.com/dreamb…

gulp.spritesmith

spritesmith的作用就是拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON。
这个模块不需要事先写一个css文件然后根据css去寻找图片进行合并，这个模块是将希望合并的小图先进行合并然后根据cssTemplate去生成css文件
先看文件目录：
《gulp.spritesmith的学习教训》

//雪碧图gulp.spritesmith
gulp.task('spritesmith',['clean'],function(){
    return gulp.src('src/spriteTest/images/*.png')
            .pipe(spritesmith({
                imgName:'images/sprite20161010.png',  //保存合并后图片的地址
                cssName:'css/sprite.css',   //保存合并后对于css样式的地址
                padding:20,
                algorithm:'binary-tree',
                cssTemplate:"src/spriteTest/handlebarsStr.css"
            }))
            .pipe(gulp.dest('//雪碧图gulp.spritesmith

gulp.task(‘spritesmith’,[‘clean’],function(){

return gulp.src('src/spriteTest/images/*.png')
            .pipe(spritesmith({
                imgName:'images/sprite20161010.png',  //保存合并后图片的地址
                cssName:'css/sprite.css',   //保存合并后对于css样式的地址
                padding:20,
                algorithm:'binary-tree',
                cssTemplate:"src/spriteTest/handlebarsStr.css"
            }))
            .pipe(gulp.dest('src/spriteTest/dist'));

})’));

})

说明一下路径问题：
1.imgName上写的路径是相对于输出路径（gulp.dest）,上述代码输出的路径实际是：
“src/spriteTest/dist/images/sprite20161010.png”
2.同理cssName的输出路径也是一样的：
“src/spriteTest/dist/css/sprite.css”
-~v~- 如果不注意这些路径会不容易找见生成的文件滴！

spritesmith的参数说明：

  • algorithm:如何排布合并图片，默认是：“binary-tree”
    可选参数有：top-down、left-right、diagonal、alt-diagonal、binary-tree

《gulp.spritesmith的学习教训》

  • cssTemplate 值为String或者Function
    cssTemplate用了渲染出css文件

    官网给的一个简单demo:

Template String:

   {{#sprites}}
    .icon-{{name}}:before {
          display: block;
          background-image: url({{{escaped_image}}});
          background-position: {{px.offset_x}} {{px.offset_y}};
          width: {{px.width}};
          height: {{px.height}};
        }
    {{/sprites}}

输出的为：

.icon-fork:before {
  display: block;
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 32px;
  height: 32px;
}
.icon-github:before {
/* ... */

Template function的demo：

   // var yaml = require('js-yaml'); 
    {
      imgName: 'sprite.png',
      cssName: 'sprite.yml',
      cssTemplate: function (data) {
        // Convert sprites from an array into an object 
        var spriteObj = {};
        data.sprites.forEach(function (sprite) {
          // Grab the name and store the sprite under it 
          var name = sprite.name;
          spriteObj[name] = sprite;
     
          // Delete the name from the sprite 
          delete sprite.name;
        });
     
        // Return stringified spriteObj 
        return yaml.safeDump(spriteObj);
      }
    }

输出为：

fork:
  x: 0
  "y": 0
  width: 32
  height: 32
  source_image: /home/todd/github/gulp.spritesmith/docs/images/fork.png
  image: sprite.png
  total_width: 64
  total_height: 64
  escaped_image: sprite.png
  offset_x: -0.0
  offset_y: -0.0
  px:
    x: 0px
    "y": 0px
    offset_x: 0px
    offset_y: 0px
    height: 32px
    width: 32px
    total_height: 64px
    total_width: 64px
github:
# ...
    原文作者：盈嫣媚儿
    原文地址: https://segmentfault.com/a/1190000007121606
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞