gulp图片压缩
网页性能优化,通常要处理图片,尤其图片量大的时候,更需要工具来批量处理,这里使用gulp,做个简单总结
image-resize压缩尺寸
var gulp = require('gulp');
var imageResize = require('gulp-image-resize');
gulp.task('resize', function() {
return gulp.src('./images/**/*')
.pipe(imageResize({
width: 400
}))
.pipe(gulp.dest('dist/resize'));
});
gulp-imagemin品质压缩
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
gulp.task('min', function() {
return gulp.src('./images/**/*')
.pipe(imagemin({
progressive: true,
use: [pngquant({
quality: '65-80'
})]
}))
.pipe(gulp.dest('dist/min'));
})
gulp图片压缩的更多相关文章
- gulp之压缩图片
//先全局安装gulp:npm install -g gulp //然后在项目根目录中安装gulp依赖:npm install --save-dev gulp //http://www.gulpjs. ...
- 前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
- gulp-imagemin图片压缩----gulp系列(三)
本节实现图片压缩,在实现压缩前,先配置images任务,设置源目录和输出目录. 在系列(二)代码的基础上,再进行扩展. 1.找到gulp->config.js,对images进行源目录(src- ...
- Gulp自动化工具之图片压缩
一.安装node https://nodejs.org/download/ 根据需要选择对应的版本 安装好了之后可以通过node -v参看一下版本 node -v 二.安装gulp npm insta ...
- Gulp 之图片压缩合并
同事需要处理很多的图片,由于UI那边提供图片比较大,为了性能好一点,程序包小一点,因此希望我帮忙做成小程序来完成此工作. 其实之前做过一个grunt写的图片压缩合并工具,当时是为了处理270多个国家/ ...
- 玩转gulp之压缩打包热重载
上节上上节我们讲了gulp的sass编译和watch监听,动态加载 这样我们就可以做到,我管我写我的sass然后保存,自动编译,就好像我们在写css一样,这是一个自动化的一大步.我们呱唧呱唧. 我们已 ...
- Golang 编写的图片压缩程序,质量、尺寸压缩,批量、单张压缩
目录: 前序 效果图 简介 全部代码 前序: 接触 golang 不久,一直是边学边做,边总结,深深感到这门语言的魅力,等下要跟大家分享是最近项目 服务端 用到的图片压缩程序,我单独分离了出来,做成了 ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- Android 图片压缩、照片选择、裁剪,上传、一整套图片解决方案
1.Android一整套图片解决方案 http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650820998&idx=1& ...
随机推荐
- javascript中的原型和继承
javascript一直是初学者口中的难点,甚至一些有些许工作经验的人也不太明白其中的原理,而我就是那个初学者,前段时间在阮一峰老师的博客上看了一篇文章<javascript继承机制的设计思想& ...
- Qt 开启鼠标跟踪,自动激活mouseMoveEvent的问题
最近在Qt上实现一个功能,鼠标在图片上移动,触发mouseMoveEvent事件,进而生成一个小的半透明窗口,放大显示以鼠标为中心的一个区域的图像并随鼠标移动.但是,必须鼠标摁下,才触发mouseMo ...
- Linux 进程与线程五
pthread_self函数 pthread_t pthread_self(void); 一般会成功,返回当前线程的ID 注意:在子线程中执行exit()函数会退出整个进程,一般使用pthread_e ...
- [LeetCode] Intersection of Two Arrays 两个数组相交
Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...
- [LeetCode] Clone Graph 无向图的复制
Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...
- [LeetCode] Valid Number 验证数字
Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...
- C#工程引用自定义目录的DLL
在App.config里配置: <configuration> <runtime> <assemblyBinding xmlns="urn:schemas-mi ...
- 【日常操作记录】Asp.Net Core 的一些基本操作或属性
用于记录在项目中使用到的方法.属性.操作,持续更新中 静态文件的使用 在项目中静态文件的使用需要在Startup中的Configure方法中增加: //使用静态文件 app.UseStaticFile ...
- 使用SharpZipLib实现文件压缩、解压
接口 public interface IUnZip { /// <summary> /// 功能:解压zip格式的文件. /// </summary> /// <par ...
- Android开发工具: AS, Gradle, Git等
(一)史上最详细的Android Studio系列教程 你还没有使用Android Studio + Gradle么?那就有点太落伍了,下面自己原创总结了Android Studio的一系列教程,图文 ...