gulp 雪碧图制作

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprites',function(){gulp.src('img/*.png')//要打包的图片目录.pipe(spritesmith({imgName:'sprite.png',//输出的雪碧图名称cssName:'sprite.css'//输出的CSS名称})).pipe(gulp.dest('build'))//输出的路径，相对于该gulpfile.js文件
});gulp.task('default',function(){gulp.run('sprites');});

1、gulp安装，自行解决。

2、本地创建Demo项目，创建一个img文件夹，把img文件放入即可，创建gulpfile.js文件，内容如图。

3、DOS到当前项目文件下，输入命令：npm install gulp --save-dev及npm install gulp.spritesmith --save-dev，安装gulp及雪碧图插件。

4、初始化项目，DOS命令输入：npm init ，一路回车生成package.json文件。项目结构目录如下：

5、执行 gulp命令,打包生成build目录，包含CSS文件及雪碧图图片文件。

6、若以下报错，则确认图片是否都是PNG格式，不能直接把图片的后缀名改为PNG，而需要保存图片为PNG格式。

gulp 雪碧图制作相关推荐

php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...
css sprit雪碧图制作，使用教程
写在前面: 在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能.百度词条对雪碧图的解释是:CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景 ...
CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...
photoshop 雪碧图制作
图片拖入后一般取同行同列最高最宽自动在所选目录生成打开: 修改四次请求有点多啊. 打开 (下载)css sprite 自动生成坐标地址. 不过我们要把它排远一点 OK了. 我们生成以后: 坐标 ...
gulp代码压缩和制作雪碧图
安装nodejs gulp是基于nodejs,需要安装nodejs 在 [ nodejs官网 ]下载并安装nodejs 查看nodejs版本安装完nodejs后,在命令行中(window + r 输 ...
python多张图片合并拼接，python制作sprite图、雪碧图
python多张图片合并拼接,python制作sprite图.雪碧图整理图片集找两个文件夹,yangying和zhaoliying,分别放上照片8张,共16张照片. 创建sprite.py # 多 ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
图片三：numpy制作雪碧图（如何将多个图片拼接成一张图片）
下面是我自己写的代码,每个图片直接紧挨这另个一个图片,图片直接没有任何填充,所以你的图片应该是同等规格的,大小和尺寸必须一致 #制作雪碧图 def make_grid(data, size=(4,4) ...
【Sass中级】使用Sass和Compass制作雪碧图
"Image Spriting"的工作原理是一堆的图像(称为"sprites",精灵)合并成一张大的图像(国内称为雪碧图),以达到减少HTTP的请求数.然后通过 ...

gulp 雪碧图制作

gulp 雪碧图制作相关推荐

最新文章

热门文章