使用 gulp 压缩图片

请务必理解如下章节后阅读此章节:

  1. 安装 Node 和 gulp
  2. 使用 gulp 压缩 JS

压缩 图片文件可降低文件大小,提高图片加载速度。

找到规律转换为 gulp 代码

规律

找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下。

gulp 代码

一、安装 gulp-imagemin 模块

提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作。

在命令行输入

npm install gulp-imagemin

安装成功后你会看到如下信息:(安装时间可能会比较长)

[email protected] node_modules/gulp-imagemin
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

二、创建 gulpfile.js 文件编写代码

在对应目录创建 gulpfile.js 文件并写入如下内容:

// 获取 gulp
var gulp = require(‘gulp‘);

// 获取 gulp-imagemin 模块
var imagemin = require(‘gulp-imagemin‘)

// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task(‘images‘, function () {
    // 1. 找到图片
    gulp.src(‘images/*.*‘)
    // 2. 压缩图片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存图片
        .pipe(gulp.dest(‘dist/images‘))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task(‘auto‘, function () {
    // 监听文件修改,当文件被修改则执行 images 任务
    gulp.watch(‘images/*.*)‘, [‘images‘])
});

// 使用 gulp.task(‘default‘) 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task(‘default‘, [‘images‘, ‘auto‘])


三、在 images/ 目录下存放图片

在 gulpfile.js 对应目录创建 images 文件夹,并在 images/ 目录下存放图片。



四、运行 gulp 查看效果

在命令行输入 gulp +回车

你将看到命令行出现如下提示

gulp
[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/chapter4/gulpfile.js
[18:10:42] Starting ‘images‘...
[18:10:42] Finished ‘images‘ after 5.72 ms
[18:10:42] Starting ‘auto‘...
[18:10:42] Finished ‘auto‘ after 6.39 ms
[18:10:42] Starting ‘default‘...
[18:10:42] Finished ‘default‘ after 5.91 μs
[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)

接着阅读:使用 gulp 编译 LESS

时间: 2024-11-03 11:51:38

使用 gulp 压缩图片的相关文章

续Gulp使用入门三步压缩图片

gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin 安装成功后你会看到如下信息:(安装时间可能会比较长取决于网络) npm

使用 gulp 压缩 CSS

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 当熟悉 使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切

Grunt压缩图片

今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install --save-dev gulp-imagemin 然后引入依赖: var gulp = require("gulp"); 在引入插件: var imagemin = require('gulp-imagemin');//压缩图片 var uglifyJS = require('gulp-

用gulp-imageisux智图api压缩图片

? 智图平台是什么? 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式.同时,智图平台还会为用户转换一份webp格式的图片. ? 如何使用智图平台? 您只需要将要优化的图片拉至首页的拖拽区域后,系统会自动上传图片并经过智图压缩,返回新的图片.您也可以根据自己的实际使用情况选择不同的压缩率. ? 智图好在哪里? 智图能够自动为您选择压缩率压缩并且在合适的情况下为您选择正确的图片

Android压缩图片和libjpeg库

前言 Fjpeg使用 Fjpeg 注意 如何使用 如何压缩图片只改变在硬盘的存储大小 如何改变图片分辨率让其Bitmap对象可以加载到内存中 关于重载版本 开始学习之旅 补充知识的结论 修改图片分辨率 防止在Android加载Bitmap的时候oom内存溢出 解决方案1 解决方案2 希望压缩图片方便网络传输 第一种方案利用Bitmapcompress方法压缩 第二种利用libjpeg压缩 在Android50测试两个 图片压缩 在Android60测试两个 图片压缩 解释Android50和60

android压缩图片,解决oom错误

你的ImageView只有128*96像素的大小,只是为了显示一张缩略图,这时候把一张1024*768像素的图片完全加载到内存中显然是不值得的. 所以我们需要一个方法来解决这个问题. [java] view plaincopy public static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) { // 源图片的高度和宽度 final int height = op

压缩图片

NSData *data = UIImageJPEGRepresentation(image, 0.001); UIImage * preImage = [UIImage imageWithData:data]; [preImage drawInRect:CGRectMake(0, 0, ScreenWidth, ScreenHeight)]; 压缩图片分压和缩 如果只压,压到一定比例就不能再压了 所以还要缩

iOS一行代码压缩图片大小

现在基本所有应用都与图片相关联,这就必然涉及到上传下载图片,而用户的流量又迟迟没有被解放,因此图片就不能太大,我们知道iPhone一张照片动辄几M,如果都传原图那流量就会爆炸,粗暴地缩小又会影响图片的分辨率.那有没有办法在保持一定分辨率的情况下压缩图片呢?有的,而且非常简单,一行代码搞定,是苹果自带的压缩函数: UIImageJPEGRepresentation UIImagePNGRepresentation 这两个函数都是iOS自带的图片压缩工具.一个是压成JPEG格式,一个是压成PNG格式

Fastdfs与nginx进行压缩图片比率随记

前阵子,工作搞了一下Fastdfs与nginx进行压缩图片比率存储在server中,今天应用下工作时间记录下.本打算周六,老是由于一些事情给耽搁,眼下正在搞一个XMPP消息通讯协议,眼下还是一头雾水.没有实现什么功能,在此勉励,加油好好搞搞,搞好了记录下一些登录.退出.发送.接收的一些接口给client使用. 在此先把前面自己做的那个功能在此分享下.是一个模仿淘宝的,希望大神们有什么想法能够指教: 參考:http://www.v2ex.com/t/113845 http://blog.sina.