gulp 安装步骤及实现雪碧图（例子）

首先安装node.js工具在 node基础上安装cnpm 再安装gulp

先全局安装gulp

cnpm install gulp -g

再局部项目安装gulp

cnpm install gulp --save-dev

你需要安装实现雪碧图需要的插件

生成gulpfile.js进行配置

cnpm install gulp-spritesmith --save-dev //局部安装插件

var gulp = require("gulp");//在gulpfile.js中通过别名调用插件

var spritemin = require("gulp-spritesmith");//在gulpfile.js中通过别名调用插件

gulp.task("sprite",["sass”，“sass"],function(){ //定义任务（名字通过数组指定本次任务在哪些任务后完成本次任务加工）

return gulp.src("img/*.*") // 指定操作源文件地址

.pipe(spritemin({ //管道加工成雪碧图

imgname:"sprite.png",//生成图片的名字

cssname:"css/sprite.css",//生成css的文件

padding:10,//图片的距离

algorithm:"left-right"//定义雪碧图图片合并方式

}))

.pipe(gulp.dest("output/img")) //指定输出源文件地址

})

gulp 安装步骤及实现雪碧图（例子）相关推荐

gulp代码压缩和制作雪碧图
安装nodejs gulp是基于nodejs,需要安装nodejs 在 [ nodejs官网 ]下载并安装nodejs 查看nodejs版本安装完nodejs后,在命令行中(window + r 输 ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
gulp 雪碧图制作
var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprites',funct ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
雪碧图PHP,Webpack中雪碧图插件使用详解
背景在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
雪碧图工具sprity（20151201更新修复了同时合并多张图的bug）
前身是css-sprite,前几天帮新同事搭建环境,意外发现sprity在window下可以安装成功了,同时也发现node版本已经4点几了,自己电脑的版本还停留在0.10,赶紧把自己的node升级到最 ...
雪碧图sprity 合并多图使用心得
介绍 sprity 是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择. ...

gulp 安装步骤及实现雪碧图（例子）

gulp 安装步骤及实现雪碧图（例子）相关推荐

最新文章

热门文章

gulp 安装步骤 及实现雪碧图（例子）

gulp 安装步骤 及实现雪碧图（例子）相关推荐

最新文章

热门文章

gulp 安装步骤及实现雪碧图（例子）

gulp 安装步骤及实现雪碧图（例子）相关推荐