gulp.spritesmith gulp插件

概念

spritesmith的作用就是拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON。github地址：https://github.com/twolfson/gulp.spritesmith

Getting Started

1. Install the module with: npm install gulp.spritesmith

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');gulp.task('sprite', function () {var spriteData = gulp.src('images/*.png').pipe(spritesmith({imgName: 'sprite.png',cssName: 'sprite.css'}));//这里有两个配置imgName，cssName，下面会详细讲解return spriteData.pipe(gulp.dest('path/to/output/'));
});

2. Continuing the pipeline

gulp 执行下列脚本，即可生成合并图

var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var csso = require('gulp-csso');
var imagemin = require('gulp-imagemin');
var merge = require('merge-stream');var spritesmith = require('gulp.spritesmith');gulp.task('sprite', function () {// Generate our spritesheetvar spriteData = gulp.src('images/*.png').pipe(spritesmith({imgName: 'sprite.png',cssName: 'sprite.css'}));//这里有两个配置imgName，cssName，下面会详细讲解// Pipe image stream through image optimizer and onto diskvar imgStream = spriteData.img// DEV: We must buffer our stream into a Buffer for `imagemin`.pipe(buffer()).pipe(imagemin()).pipe(gulp.dest('path/to/image/folder/'));// Pipe CSS stream through CSS optimizer and onto diskvar cssStream = spriteData.css.pipe(csso()).pipe(gulp.dest('path/to/css/folder/'));// Return a merged stream to handle both `end` eventsreturn merge(imgStream, cssStream);
});

3. config

3.1 个性化配置

  const spritesConfig = {//源图片，可以用通配符匹配多张图片，也可以使用数组来枚举多张图片src: './src/static/slice/**/*.png',//image与css的目标路径dest: {css: './src/static/styles/sprite/',image: './src/static/images/sprite/'},//配置options: {//合成图名称imgName: 'sprite.png',//合成图路径及名称imgPath: '../../images/sprite/sprite.png',//合成图css样式cssName: 'sprite.less',//合成图里图标间距padding: 4,//css格式cssFormat: "less",//css配置cssOpts: {cssClass: function(item) {// If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover')if (item.name.indexOf('-hover') !== -1) {return '.icon-' + item.name.replace('-hover', ':hover');// Otherwise, use the name as the selector (e.g. 'home' -> 'home')} else {return '.icon-' + item.name;}}},//2倍图片路径retinaSrcFilter: ['./src/static/slice/**/*@2x.png'],//2倍图片名称retinaImgName: 'sprite@2x.png',//合成css模型cssTemplate:(data)=> {// data为对象，保存合成前小图和合成打大图的信息包括小图在大图之中的信息let arr = [],width = data.spritesheet.px.width,height = data.spritesheet.px.height,url = data.spritesheet.image;data.sprites.forEach(function (sprite) {arr.push(".icon-" + sprite.name +"{" +"background: url('" + url + "') " +"no-repeat " +sprite.px.offset_x + " " + sprite.px.offset_y + ";" +"background-size: " + width + " " + height + ";" +"width: " + sprite.px.width + ";" +"height: " + sprite.px.height + ";" +"}\n")});return arr.join("");}}}

3.2 使用个性化配置

    const spriteData = gulp.src(spritesConfig.src).pipe(spritesmith(Object.assign({}, spritesConfig.options)));const imgStream = spriteData.img.pipe(buffer()).pipe(gulp.dest(spritesConfig.dest.image)).on('end', () => {gutil.log(gutil.colors.green("已完成雪碧图合并，雪碧图保存目录："));gutil.log(gutil.colors.yellow(spritesConfig.dest.image));});const cssStream = spriteData.css.pipe(gulp.dest(spritesConfig.dest.css)).on('end', () => {gutil.log(gutil.colors.green("已生成雪碧图样式，雪碧图样式保存目录："));gutil.log(gutil.colors.yellow(spritesConfig.dest.css));});return merge(imgStream, cssStream);

插件也提供使用配置handlebars模板文件来创建模型，例如：cssTemplate:”x/xx/handlebars.css”，然后模板文件.hbs

{{#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}}

4. use in html

在html中使用就非常简单了，直接使用，不过在css中需要加上

.icon {display: inline-block;
}

5. 注意事项
1. 需要合并的图片一定要准备2x图片，并且名字也要以“@2x”结尾，否则会报错。例如：想合并一张weixin.png的图片，那么需要在同目录下准备一张weixin@2x.png的图片，且尺寸都必须为偶数。

gulp.spritesmith gulp插件相关推荐

node.js的第三方模块 nodemon、nrm、Gulp、Gulp插件
什么是第三方模块别人写好的.具有特定功能的.我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包. 第三方模块有两种存在形式: 以js文件的形式 ...
浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作
写在前面: 因为gulp是一个基于node的工具,所以我们需要先安装node,具体可见[node的安装及配置] 目录一.gulp简介二.gulp基本使用 1. 创建项目 2. gulp的安装 3. ...
【gulp】----gulp的使用
转自华哥https://www.cnblogs.com/nanianqiming/p/8028536.html 什么是gulp? 基于node的自动化构建工具扩展:开发的时候分为2个节点一个是开 ...
gulp版本号管理插件注意事项
2019独角兽企业重金招聘Python工程师标准>>> 打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = ...
gulp之gulp.watch报错
gulpfile.js如下: 问题: 第一次改动文件,监听正常.再次改动,报错,如下: 解决: 总结: 意思,gulpsequence这玩意儿返回的thunk只能执行一次转载于:https://ww ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
Gulp 之图片压缩合并
同事需要处理很多的图片,由于UI那边提供图片比较大,为了性能好一点,程序包小一点,因此希望我帮忙做成小程序来完成此工作. 其实之前做过一个grunt写的图片压缩合并工具,当时是为了处理270多个国家/ ...
gulp 雪碧图制作
var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprites',funct ...
Gulp：插件编写入门
之前挖了个坑,准备写篇gulp插件编写入门的科普文,之后迟迟没有动笔,因为不知道该肿么讲清楚Stream这货,毕竟,gulp插件的实现不像grunt插件的实现那么直观. 好吧,于是决定单刀直入了.文中 ...

gulp.spritesmith gulp插件

概念

Getting Started

gulp.spritesmith gulp插件相关推荐

最新文章

热门文章