【Gulp】gulp制作雪碧图

最新推荐文章于 2024-05-19 09:47:12 发布
最新推荐文章于 2024-05-19 09:47:12 发布
阅读量3.4k 收藏 2
点赞数 2
分类专栏： ●前端 文章标签： gulp制作雪碧图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sds15732622190/article/details/53836824
版权
本文介绍如何利用Gulp工具结合gulp.spritesmith插件来制作雪碧图，以提高Web页面性能。通过安装和配置gulpfile.js，将多张图片合并成一张，从而减少HTTP请求，加快页面加载速度。
摘要由CSDN通过智能技术生成

前言

        上篇博客写到了安装gulp，这篇博客就介绍一下使用gulp来制作雪碧图，雪碧图（sprite ）是把多张图片拼到一张图中，提升性能的一种做法。把合并的图片一次性加载到内存中，需要时只渲染一部分。大大提高了页面响应速度。

准备工作

        安装gulp：cnpm install gulp --save-dev

        安装雪碧图需要的插件：cnpm install --save-dev gulp.spritesmith

        建立package.json文件

        新建gulpfile.js详情点击

        要生成的图片：

最低0.47元/天 解锁文章
遥寄三山
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
专栏目录
gulp创建项目和精灵图实现
12-21
let spriteData = gulp.src(sprite_path + dir + "/*").pipe( spritesmith({ imgName: dir + "-sprite.png", // 合成后的图片命名 cssName: dir + "-sprite.scss", // 合成后的图标样式 padding: 5, // 雪碧图中...
gulp-tmtsprite:Gulp CSS 雪碧图合并
05-02
gulp-tmtsprite 自动生成精灵图片和CSS。 （使用视网膜@ 2x，支持@ 3x） NPM主页： : 安装 使用安装： npm install gulp - tmtsprite -- save npm install gulp - if -- save 用法 gulpfile.js var gulpif = ...
用gulp生成雪碧图
qq_36934775的博客
11-13 645
参考俩：https://www.cnblogs.com/qianlitiaotiao/p/5054231.html CSS雪碧 即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 雪碧图的有点： 1.将多张图片合并到一张图片中，可以减小图片的总大小 2.将多巡航图片合并到一张图片后...
gulp 雪碧图制作
qq_22239651的博客
10-25 283
var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprites',function(){ gulp.src('img/*.png')//要打包的图片目录 .pipe(spritesmith({ imgName:'sprite.png',//输出的雪碧图名称 ...
【前端每日基础】day17——雪碧图
最新发布
modaoshi51991的博客
05-19 462
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。创建了雪碧图后，可以通过CSS来显示其不同部分。减少HTTP请求：合并多个小图片成一张大图，可以显著减少浏览器对服务器的请求次数，从而提升页面加载速度。缓存效率：由于合并后的大图通常不会频繁变化，浏览器可以缓存这张图，从而进一步减少加载时间。性能优化：通过减少请求和提升缓存效率，整体页面性能可以得到提升。Gulp/ Grunt：自动化构建工具，可以通过插件生成雪碧图。
gulp工具生成雪碧图（精灵图）
weixin_44258964的博客
04-07 695
本文主要是对gulp工具生成精灵图的一些方法介绍，帮助大家快速学习使用。
gulp代码压缩和制作雪碧图
yzp0112的博客
05-16 3505
安装nodejs gulp是基于nodejs，理所当然需要安装nodejs 在 [ nodejs官网 ]下载并安装nodejs 查看nodejs版本 安装完nodejs后，在命令行中（window + r 输入cmd回车）输入node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。 cd定位到项目目录，用法：cd + 路径 ；也可以直接在项目文件地址栏中输入cmd，回车
把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.
wmy94827的博客
04-13 2364
用gulp-css-spriter很简单。 第一步: 在某个文件夹用shitf+鼠标右键   第二步: npm install gulp-css-spriter https://www.npmjs.com/package/gulp-css-spriter  (官网gulp插件) 第三步:在gulpfile.js 文件  1 2
gulp-favicons:gulp插件图标
05-24
gulp-收藏夹图标 gulp-favicons是的插件。 用法 var favicons = require ( 'gulp-favicons' ) ; gulp . src ( './favicon.png' ) . pipe ( favicons ( { appName : 'My App' , appShortName : 'App' , app...
gulp-htmlhint
04-28
gulp-htmlhint 包装的，以验证您HTML 用法 首先，将gulp-htmlhint安装为开发依赖项： npm install --save-dev gulp-htmlhint 然后，将其添加到您的gulpfile.js ： var htmlhint = require ( "gulp-htmlhint" ) ;...
gulp响应：gulp响应生成不同大小的图像
02-03
gulp-responsive取决于。 Sharp是用于调整JPEG，PNG，WebP和TIFF图像大小的最快的Node.js模块之一。 如果您使用的是Mac OS，则在安装 gulp-responsive之前，应先安装库。 进一步的信息和说明可以在。 $ npm ...
和图拆分工具_.zip
08-20
使用方法 1、打开程序，拖曳要分割的png格式图片到程序中 2、右键点击，可弹出操作选项，直接点击【导出所有子图】即可 3、子图导出完成，导出的文件在软件根目录下
雪碧图集合工具
02-07
egret制作无间隙雪碧图。
css sprite雪碧图生成小工具 v3.0
05-04
css sprite 雪碧图生成小程序,已在github上开源，地址：https://github.com/iwangx/sprite ,请需要的朋友注意版本更新，下载最新版
雪碧图生成器
05-07
绿色免安装版本，雪碧图生成器，方便快捷比ps好用绿色免安装版本，雪碧图生成器，方便快捷比ps好用
简单的使用gulp生成雪碧图
weixin_30293135的博客
05-02 196
有一个在线工具：https://www.toptal.com/developers/css/sprite-generator。生成雪碧图是极其方便的。 现在呢，我们来试试用gulp来生成雪碧图。 第一步：去淘宝镜像地址（http://npm.taobao.org/）里安装cnpm。 $ npm install -g cnpm --registry=https://registry.npm.taob...
gulp雪碧图插件，gulp-css-spriter简单使用
前端小狮的博客
11-28 1110
前提：如果准备用gulp-css-spriter插件，node.js 和 gulp 工具应该了解并已经安装完毕；进入工程目录，shitf+鼠标右键打开命令； npm install gulp-css-spriter --save-devc //常规下载局部 gulp-css-spriter然后在gulpfile.js ：var gulp = require('gulp'); var spriter
gulp-雪碧图、裁剪
wang_NiFeng的博客
03-14 360
安装gulp-gm(用于裁剪)： npm install --save-dev gulp-gm gulp-gm与GraphicsMagick配合得最好。但是，它也支持ImageMagick，但是需要设置ImageMagick:true选项。 注意：确保GraphicsMagick或ImageMagick已安装在系统上，并在路径中正确设置。 Mac安装GraphicsMagick和Imag...
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值