摘要:这里是对自己在中合成雪碧图的一些的经验和总结中用于合成雪碧图的模块有许多,我只是针对和这两个做了尝试,在尝试过程中发现写对文件和文件路径是关键问题,只有把路径配对了那几乎没有啥问题了。
前言:
css Sprites指的是网页图片的一种处理技巧,通常是将一些体积小的不常更换的图片进行处理,目的是为了减少HTTP请求次数,也是优化必不可少的工作。
这里是对自己在gulp中合成雪碧图的一些的经验和总结!
gulp中用于合成雪碧图的模块有许多,我只是针对gulp-css-spriter和gulp.spritesmith这两个做了尝试,在尝试过程中发现写对css文件和images文件路径是关键问题,只有把路径配对了那几乎没有啥问题了。
gulp-css-spritetip:这个模块很久没有更新了,下载量也很小,了解一下即可,可以有时候也是可以用到的.
首页看一下目录结构方便对照观察了解:
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下该模块时是默认不加标识的,从网上了解到修改该模块可以加上标识,这里就不具体说明了,可以参考如下博文自行修改:
gulp.spritesmith博客园:http://www.cnblogs.com/dreamb...
spritesmith的作用就是拼接图片并生成样式表,并且还能输出SASS,Stylus,LESS甚至是JSON。
这个模块不需要事先写一个css文件然后根据css去寻找图片进行合并,这个模块是将希望合并的小图先进行合并然后根据cssTemplate去生成css文件
先看文件目录:
//雪碧图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~- 如果不注意这些路径会不容易找见生成的文件滴!
algorithm:如何排布合并图片,默认是:“binary-tree”
可选参数有:top-down、left-right、diagonal、alt-diagonal、binary-tree
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://www.ucloud.cn/yun/111626.html
生成雪碧图的代码 本文的样式预处理使用的是stylus 如果须要用到其它类型的预处理器,可对下面的代码进行修改如果想对雪碧图的生成原理及参数有更深入的了解请移步 spritesmith gulp.spritesmith const spritesmith = require(gulp.spritesmith); gulp.task(sprite, () => { var spriteDa...
摘要:插件自动同步浏览器插件合并文件的插件压缩插件压缩插件压缩图片插件压缩图片的插件缓存插件,可以加快编译速度删除文件插件同步运行任务插件给属性添加浏览器前缀插件插件合成图片插件编译文件,添加属性浏览器前缀,浏览器自动更 var gulp = require(gulp);// sass 插件 var sass = require(gulp-sass); // 自动同步浏览器插件 var b...
摘要:通过本文,我们将学习如何使用来改变开发流程,从而使开发更加快速高效。中文网站详细入门教程使用是基于的,需要要安装为了确保依赖环境正确,我们先执行几个简单的命令检查。详尽使用参见官方文档,中文文档项目地址 为了UED前端团队更好的协作开发同时提高项目编码质量,我们需要将Web前端使用工程化方式构建; 目前需要一些简单的功能: 1. 压缩HTML 2. 检查JS 3. 编译SA...
阅读 3184·2021-11-15 11:37
阅读 2427·2021-09-29 09:48
阅读 3769·2021-09-22 15:55
阅读 2982·2021-09-22 10:02
阅读 2611·2021-08-25 09:40
阅读 3205·2021-08-03 14:03
阅读 1671·2019-08-29 13:11
阅读 1550·2019-08-29 12:49