Gulp 之图片压缩合并
同事需要处理很多的图片,由于UI那边提供图片比较大,为了性能好一点,程序包小一点,因此希望我帮忙做成小程序来完成此工作。
其实之前做过一个grunt写的图片压缩合并工具,当时是为了处理270多个国家/地区的国旗/logo,这次打算用gulp写一个,很久没碰过了,分了一下,大概两件事需要我去做:
1.图片压缩
2.图片雪碧图生成
然后在很容易就百度到了gulp-imagemin插件,这个做压缩很容易,压缩比什么的就不细看了,当我寻找合并工具的时候,百度真的很傻,搜索到的全部是gulp-css-spriter,而这个工具是用于对css中包含的图片进行处理的,对于这个需求并不是很符合。好吧,我google下,很快找到答案了,gulp.spritesmith这个插件刚好满足需求。
代码如下:
var gulp=require('gulp'),
spriter=require('gulp-css-spriter'),
imagemin = require('gulp-imagemin'),
spritesmith = require('gulp.spritesmith'); gulp.task('imagesmin', function(){ return gulp.src("img/*")
.pipe(imagemin())
.pipe(gulp.dest("temp"))
.pipe(spriter({
'spriteSheet': './dist/spritesheet.png',
'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
}))
.pipe(gulp.dest('dist/css'))
})
//gulp.task('spriter', function() {
// return gulp.src('./src/css/styles.css')
// .pipe(spriter({
// 'spriteSheet': './dist/spritesheet.png',
// 'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
// }))
// .pipe(gulp.dest('dist/css'));
//});
gulp.task('sprite', function () {
var spriteData = gulp.src('temp/*').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css',
padding: 20
}));
return spriteData.pipe(gulp.dest('dist'));
});
gulp.task('default', ["sprite"]);
然后,就是安装插件了,这个不想重复什么,npm install就可以了,没什么技术含量,唯一值得一提的是,运行的时候遇到一个gulp安装好了,结果报错没有命令gulp,网上查了下,需要修改环境变量,我就把环境变量了下就可以运行了。
另外,gulp.spritesmith很强大,支持生成的css文件模板,可以设置图标的排列方式,间距,总之,很齐全的一个工具,附上npm地址:
https://www.npmjs.com/package/gulp.spritesmith
英文文档还是不错的,学习了,记录一下。
Gulp 之图片压缩合并的更多相关文章
- gulp完成javascript压缩合并,css压缩
最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...
- 前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
- gulp实时编译less,压缩合并requirejs模块文件
gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...
- 一篇迟到的gulp文章,代码合并压缩,less编译
前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- gulp图片压缩
gulp图片压缩 网页性能优化,通常要处理图片,尤其图片量大的时候,更需要工具来批量处理,这里使用gulp,做个简单总结 image-resize压缩尺寸 var gulp = require('gu ...
- gulp-imagemin图片压缩----gulp系列(三)
本节实现图片压缩,在实现压缩前,先配置images任务,设置源目录和输出目录. 在系列(二)代码的基础上,再进行扩展. 1.找到gulp->config.js,对images进行源目录(src- ...
- Gulp自动化工具之图片压缩
一.安装node https://nodejs.org/download/ 根据需要选择对应的版本 安装好了之后可以通过node -v参看一下版本 node -v 二.安装gulp npm insta ...
- gulp之css,js压缩合并加密替换
为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...
随机推荐
- linux 命令中英文对照,收集
linux 命令中英文对照,收集 linux 命令英文全文 Is Linux CLI case-sensitive? The answer is, yes. If you try to run L ...
- 【js】高阶函数是个什么?
所谓高阶函数,就是函数中可以传入另一个函数作为参数的函数. 简单一张图,方便理解全文. function 高阶函数(函数){} 这是一个高阶函数,f是传入的函数作为参数. 其实高阶函数用的很多.其实平 ...
- Gatling实战(三)
无论是性能测试还是自动化测试,有一个很重要的点就是变量(参数化),因为真实环境是很少同时产生并发很高而且所有参数都一模一样的请求的,就算有这样的接口,开发肯定用缓存来挡了,这种一般不会是瓶颈,真正瓶颈 ...
- 【题解】Luogu P5313 僕たちはひとつの光([Ynoi2012]D2T2)
原题传送门 lovelive好评 比赛时只拿到了60pts,还是自己太菜了 这题的思想实际有点像Luogu P3674 小清新人渣的本愿与Luogu P5071 [Ynoi2015]此时此刻的光辉 这 ...
- redis恢复(aof)
----------------redis备份恢复方法-----------------------------1.采用aof恢复方法若appendonly设置为no的情况下,在每个节点上执行bgre ...
- ORACLE——RMAN 参数解读
查看默认rman配置参数 oracle用户下登录rman:rman target / 查看所有配置参数详情:show all show all的第一行:using target database co ...
- vue scrolle在tab 中使用
1. 使用npm 安装 npm i vue-scroller -S 地址: https://github.com/wangdahoo/vue-scroller2. 引入 main.js: import ...
- re模块的应用
import re # 正则表达式中的转义 : # '\(' 表示匹配小括号 # [()+*?/$.] 在字符组中一些特殊的字符会现出原形 # 所有的 \w \d \s(\n,\t, ) \W \D ...
- JS getBoundingClientRect()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转载]linux下网卡漂移导致网络不可用
转自:https://blog.csdn.net/hyatsz/article/details/47690993 linux下网卡漂移导致网络不可用 2015年08月16日 00:48:50 hyat ...