安装nodejs

gulp是基于nodejs，需要安装nodejs
在 [ nodejs官网 ]下载并安装nodejs

查看nodejs版本

安装完nodejs后，在命令行中（window + r 输入cmd回车）输入node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。
cd定位到项目目录，用法：cd + 路径；也可以直接在项目文件地址栏中输入cmd，回车；如图

npm介绍

在命令行中输入npm -v查看npm的版本号，npm用于node插件管理（安装、卸载、管理依赖等），它是在安装nodejs时一同安装的。
在cmd控制台中：
安装插件：npm insatll ‘插件名称’ -g --save-dev
卸载插件：npm uninstall ‘插件名称’ -g --save-dev
删除全部插件：借助rimraf：npm install rimraf -g 用法：rimraf node_modules
更新插件：npm update ‘插件名称’ -g --save-dev
更新全部插件：npm update --save-dev
查看已安装目录：npm list

安装淘宝的cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常；所以我们可以选装淘宝的cnpm。
安装命令：npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm和npm用法完全一致，只需将命令中npm换为cnpm即可。

新建package.json文件

在cmd控制台中

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

安装gulp

安装gulp目的是为了通过她执行gulp任务；
安装命令：命令提示符执行cnpm install gulp -g 全局安装；cnpm install gulp --save-dev 本地安装
查看版本号：查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

新建gulpfile.js

var gulp=require('gulp'),  //gulp基础库spritesmith=require('gulp.spritesmith'),  //制作雪碧图插件minifycss=require('gulp-minify-css'),   //css压缩concat=require('gulp-concat'),   //合并文件uglify=require('gulp-uglify'),   //js压缩rename=require('gulp-rename'),   //文件重命名notify=require('gulp-notify');  //提示
//雪碧图
gulp.task('sprite',function(){  gulp.src('image/*.png')  .pipe(spritesmith({  imgName:'sprite.png',  cssName:'css/index.css',  padding:5,  algorithm:'binary-tree'  }))  .pipe(gulp.dest('123/')) //输出目录
})
//css压缩
gulp.task('minifycss',function(){gulp.src('css/*.css')      //设置css.pipe(concat('main.css'))      //合并后css文件名，没有压缩.pipe(gulp.dest('dist/styles'))           //设置输出路径.pipe(rename({suffix:'.min'}))         //修改文件名.pipe(minifycss())                    //压缩文件.pipe(gulp.dest('dist/styles'))            //输出文件目录.pipe(notify({message:'css task ok'}));   //提示成功
});
//JS压缩
gulp.task('minifyjs',function(){gulp.src(['js/*.js'])  //选择合并的JS.pipe(concat('alert.js'))   //合并后js文件名，没有压缩.pipe(gulp.dest('dist/js'))         //输出.pipe(rename({suffix:'.min'}))     //重命名.pipe(uglify())                    //压缩.pipe(gulp.dest('dist/js'))            //输出 .pipe(notify({message:"js task ok"}));    //提示
});
gulp.task('default',function(){gulp.start('minifycss','minifyjs','sprite');
});

引用了gulp和spritesmith这个插件，接着新建名为sprite的任务，我们需要合成雪碧图的文件在src的images文件夹里，“*”为通配符，表示这个文件夹里所有.png格式的文件都会被使用。然后，我们把这个任务放到通道（gulp机制）里，imgName为生成图的名称，css为对应生成的css文件，padding表示合成时两个图片的间距。
algorithm有五个可选值，分别为top-down、left-right、diagonal、alt-diagonal、binary-tree，表现形式如下：

top-down	left-right	diagonal	alt-diagonal	binary-tree

在命令行中执行gulp命令

把生成的文件放到dist文件夹下(生成的图片sprite.png和css文件)，效果如下：

[原文1]
[原文2]

gulp代码压缩和制作雪碧图相关推荐

图片三：numpy制作雪碧图（如何将多个图片拼接成一张图片）
下面是我自己写的代码,每个图片直接紧挨这另个一个图片,图片直接没有任何填充,所以你的图片应该是同等规格的,大小和尺寸必须一致 #制作雪碧图 def make_grid(data, size=(4,4) ...
【Sass中级】使用Sass和Compass制作雪碧图
"Image Spriting"的工作原理是一堆的图像(称为"sprites",精灵)合并成一张大的图像(国内称为雪碧图),以达到减少HTTP的请求数.然后通过 ...
使用Compass制作雪碧图
遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...
html雪碧图效果,8.使用背景图，制作雪碧图效果
本文将为您描述8.使用背景图,制作雪碧图效果,具体操作方法: 使用背景图,制作雪碧图效果: Document .img{ width:150px; height:150px; border:2px s ...
【前端学习笔记day35】4.5. Photoshop制作雪碧图技巧
文章目录 4.5. Photoshop制作雪碧图技巧 Photoshop制作雪碧图技巧 4.5. Photoshop制作雪碧图技巧 Photoshop制作雪碧图技巧雪碧图,就是将网页制作中使用的多个 ...
gulp 安装步骤及实现雪碧图（例子）
首先安装node.js工具在 node基础上安装cnpm 再安装gulp 先全局安装gulp cnpm install gulp -g 再局部项目安装gulp cnpm install gulp ...
从 HTTP 协议求解：为什么我们越来越不需要雪碧图了？
前段时间面试了一位候选人,当我问到前端性能优化的常用手段时,候选人很笃定地说雪碧图,能减少页面请求数量,而且她经常在项目中使用但事实是,前端早就不用雪碧图了. 这篇文章会对前端性能优化宝典「雅虎军 ...
你知道雪碧图吗？有哪些优缺点？
这道题实际上考的是前端性能优化的一个点. 雪碧图的英文是CSS Sprites. 其目的是将多张比较小的图片,合并到一张大的图片上面,大的图片背景透明,使用的时候,通过把该张图片当做背景图片,通过不同 ...
使用Grunt生成雪碧图
1.Grunt是基于 Node.js 的项目构建工具,所以使用Grunt之前必须先安装好node.js和npm包管理器 2.全局安装Grunt的命令行支持,安装完之后,命令提示符中将会识别grunt命 ...

gulp代码压缩和制作雪碧图