利用gulp 插件gulp.spritesmith 完成小图合成精灵图，并自动输出样式文件

yarn add gulp

yarn add gulp.spritesmith

本次依赖的版本是：

"gulp": "^3.9.1"

"gulp.spritesmith": "^6.5.1"

gulpfile.js的配置


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

const gulp = require("gulp")

// 本实例为完成精灵图的合并

const spritesmith = require("gulp.spritesmith")

gulp.task(‘sprite‘,function(){

    gulp.src("images/*.png")

        .pipe(spritesmith({

            imgName:‘images/sprite.png‘, //合并后大图的名称

            cssName:‘css/sprite.less‘,

            padding:2,// 每个图片之间的间距，默认为0px

            cssTemplate:(data)=>{

            // data为对象，保存合成前小图和合成打大图的信息包括小图在大图之中的信息

               let arr = [],

                    width = data.spritesheet.px.width,

                    height = data.spritesheet.px.height,

                    url =  data.spritesheet.image

                // console.log(data)

                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 "@fs:108rem;\n"+arr.join("")

                return arr.join("")

            }

        }))

        .pipe(gulp.dest("dest/"))

})

 

　　

　　

未合并前的效果

小图文件未合并前的效果如下(小图一共40张)

合并之后的效果：图片与less

图片：

less:

.icon-aim{background: url(‘../images/sprite.png‘) no-repeat -34px 0px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-behance{background: url(‘../images/sprite.png‘) no-repeat 0px -136px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-blogger{background: url(‘../images/sprite.png‘) no-repeat 0px -34px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-deviant-art{background: url(‘../images/sprite.png‘) no-repeat -34px -34px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-digg{background: url(‘../images/sprite.png‘) no-repeat -68px 0px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-dribbble{background: url(‘../images/sprite.png‘) no-repeat -68px -34px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-dropbox{background: url(‘../images/sprite.png‘) no-repeat 0px -68px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-etsy{background: url(‘../images/sprite.png‘) no-repeat -34px -68px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-evernote{background: url(‘../images/sprite.png‘) no-repeat -68px -68px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-facebook{background: url(‘../images/sprite.png‘) no-repeat -102px 0px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-feed{background: url(‘../images/sprite.png‘) no-repeat -102px -34px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-flickr{background: url(‘../images/sprite.png‘) no-repeat -102px -68px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-forrst{background: url(‘../images/sprite.png‘) no-repeat 0px -102px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-foursquare{background: url(‘../images/sprite.png‘) no-repeat -34px -102px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-github{background: url(‘../images/sprite.png‘) no-repeat -68px -102px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-google+{background: url(‘../images/sprite.png‘) no-repeat -102px -102px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-google{background: url(‘../images/sprite.png‘) no-repeat -136px 0px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-instagram{background: url(‘../images/sprite.png‘) no-repeat -136px -34px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-last-fm{background: url(‘../images/sprite.png‘) no-repeat -136px -68px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-linked-in{background: url(‘../images/sprite.png‘) no-repeat -136px -102px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-mail{background: url(‘../images/sprite.png‘) no-repeat 0px 0px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-myspace{background: url(‘../images/sprite.png‘) no-repeat -34px -136px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-paypal{background: url(‘../images/sprite.png‘) no-repeat -68px -136px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-picasa{background: url(‘../images/sprite.png‘) no-repeat -102px -136px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-pinterest{background: url(‘../images/sprite.png‘) no-repeat -136px -136px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-rdio{background: url(‘../images/sprite.png‘) no-repeat -170px 0px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-reddit{background: url(‘../images/sprite.png‘) no-repeat -170px -34px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-share-this{background: url(‘../images/sprite.png‘) no-repeat -170px -68px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-skype{background: url(‘../images/sprite.png‘) no-repeat -170px -102px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-soundcloud{background: url(‘../images/sprite.png‘) no-repeat -170px -136px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-spotify{background: url(‘../images/sprite.png‘) no-repeat 0px -170px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-stumbleupon{background: url(‘../images/sprite.png‘) no-repeat -34px -170px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-tumblr{background: url(‘../images/sprite.png‘) no-repeat -68px -170px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-twitter{background: url(‘../images/sprite.png‘) no-repeat -102px -170px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-viddlr{background: url(‘../images/sprite.png‘) no-repeat -136px -170px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-vimeo{background: url(‘../images/sprite.png‘) no-repeat -170px -170px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-wordpress{background: url(‘../images/sprite.png‘) no-repeat -204px 0px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-xing{background: url(‘../images/sprite.png‘) no-repeat -204px -34px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-yahoo{background: url(‘../images/sprite.png‘) no-repeat -204px -68px;background-size: 236px 202px;width: 32px;height: 32px;}
.icon-youtube{background: url(‘../images/sprite.png‘) no-repeat -204px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

原文地址：https://www.cnblogs.com/gopark/p/8253749.html

时间： 2024-08-29 23:18:03

利用gulp 插件gulp.spritesmith 完成小图合成精灵图，并自动输出样式文件的相关文章

怎么实现在jenkens页面配置sonar，以及如何利用cobertura插件实现sonar页面显示测试覆盖率

最近我在工作中遇到需要给项目中每个模块配置Sonarqube,来看看测试用例覆盖的情况.在这个过程中遇到了一些问题,也查了很多资料.现在记录一下具体应该怎么配置. 先展示一下实现的效果: 图一 It will show: 图二 现在来看看具体配置: 要enable Sonarqube, 需在 job --> configure --> Post-build Actions 配置Branch 和 JDK 信息: 图三 配置好了以后,SonarQube 可以在页面上显示出来了,点击进去,效果图:[

如何编写一个gulp插件

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp是基于through

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

gulp插件使用

1 //引入gulp组件 2 var gulp=require('gulp'); 3 4 //创建任务 5 gulp.task('hello',function(){ 6 console.log('hello'); 7 }); 8 //创建另一个任务 9 gulp.task('world',function(){ 10 console.log('world'); 11 }); 12 //默认执行两个任务 13 //一个gulpfile.js中只能有一个default 14 //三种写法,3个参数

Gulp 插件

Gulp 插件 前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gul

gulp 插件之 gulp-clean-css 和 gulp-make-css-url-version

gulp-clean-css 和 gulp-make-css-url-version 的简介: gulp-clean-css 插件用来压缩 css 文件. gulp-make-css-url-version 插件用来给 css 文件里的 url 加版本号(根据引用文件的 MD5 生成版本号). 一.gulp-clean-css 和 gulp-make-css-url-version 插件的使用 1.安装 "gulp-clean-css 和 gulp-make-css-url-version&qu

Gulp插件less的使用

1.创建:gulpfile.js var gulp = require('gulp'), less = require('gulp-less'); gulp.task('default', function () { gulp.src('less/index.less') .pipe(less()) .pipe(gulp.dest('dist')); }); 2.创建package.json npm init 3.安装gulp到项目 npm install --save-dev gulp 4.安

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G

gulp 插件之 gulp-jshint

gulp-jshint 的简介: gulp-jshint 插件用来检查 js 语法错误. 一.gulp-jshint 插件的使用 1.安装 "gulp-jshint"插件命令(在终端进入到项目根目录执行) npm install --save-dev  gulp-load-plugins gulp-jshint 2.在项目根目录下提供 "gulp-jshint" 插件任务配置需要的 src 目录和源文件(源文件放置到 src 目录下) mkdir src 3.在 g