前端构建工具之gulp(一)「图片压缩」

已经很久没有写过博客了,现下终于事情少了,开始写博吧

今天网站要做一些优化:图片压缩,资源合并等

以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的相关插件,于是找到了腾讯的智图,而智图目前提供的插件只有gulp-imageisux

无奈之下,只好去学习gulp这款工具了,下面是gulp的相关介绍:

gulp介绍

  • gulp.js 是一种基于流的,代码优于配置的新一代构建工具。
  • Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建。
  • Gulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端代码的编译(sass、less)、压缩、测试;图片的压缩;浏览器自动刷新,还有许多强大的插件可以在这里查找。比起Grunt不仅配置简单而且更容易阅读和维护。
  • Grunt的插件就像独立的工厂,这个工厂生成出来的产品打包封装好后再送到另一个工厂去加工,使用了Gulp后实现了工厂的合并,所有东西都在一个工厂里完成了。

安装

npm install gulp -g

初始化gulp在当前目录的工作环境

  • 安装依赖和将依赖关系写入到package.json的devDependencies中
npm install gulp --save-dev

根据项目需求安装gulp插件

以现在的我的需求为例:批量压缩jpg图片

安装智图压缩图片的gulp插件 gulp-imageisux

这里有点小插曲,第一次使用的时候是失败的,提示 [error] Cannot post to the server

两三天之后,重新试了一下,奇迹般的可以了(原因找到了:需要下载最新版的node),补充:

var gulp = require('gulp');
var imageisux = require('gulp-imageisux');
gulp.task('default', function () {
return gulp.src('book/*')
.pipe(imageisux('/book_min/',false));
});
  • 这里的 false 为压缩为正常格式的图片如jpg或png, 如果为 ture,则统一压缩为webp格式的图片
  • 路径问题,imageisux的发布路径似乎是直接放到文件的里面,无论我怎么调整发布路么,关于这个问题还没有得到回复

    压缩前



    压缩后

安装 gulp-imagemin

因为当时使用报错,就直接另寻它路了:gulp-imagemin

npm install --save-dev gulp-imagemin

项目根目录下新建文件 gulpfile.js

  • 文件内容:
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); gulp.task('default', function () {
return gulp.src('book/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('book_min/'));
});

运行

gulp

运行以上文件又报错了,唉,今天的运气真是...

Error: Cannot find module 'imagemin-pngquant'

说找不到这个模块,但是我去node_modules目录下,一直往下找,却找到了这个模块node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant

var pngquant = require('gulp-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant');

再次运行-OK

E:\Test\zip>gulp
[15:39:37] Using gulpfile E:\Test\zip\gulpfile.js
[15:39:37] Starting 'default'...
[15:39:39] gulp-imagemin: Minified 30 images (saved 1.62 MB - 33.4%)
[15:39:39] Finished 'default' after 1.9 s

但似乎看起来还是不对,不应该这样来引用imagemin-pngquant插件,而他给的例子为什么是那样的呢,于是我在github提了issues,不到一分钟的时间,作者就回信了,



原来别人已经提过这个问题了,下面看看作者是怎么回答的



balabala具体说的什么意思,我复制到百度翻译也不是特别清楚,不过大概意思我知道了,关注点分离:也就是说作者这个插件本身可以不需要其它任何辅助插件就能工作的,其它的辅助插件,是在你需要的时候再进行选择性的安装,而不应该是他集成到他的插件里面

好吧,以上只是我的猜测,小来英语差,老大做编程!如果有哪位语言棒的同学,求解释

竟然如此,那我们就只好缺什么,装什么了

这里我需要对jpg和png图片做压缩,那么我就只需要安装这两个插件了:imagemin-jpegtranimagemin-pngquant

npm install imagemin-pngquant
npm install imagemin-jpegtran

好,现在,所有的该装的都装了,可以实战了...

目前js内容如下:

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var jpegtran = require('imagemin-jpegtran');
var pngquant = require('imagemin-pngquant'); // 任务:压缩jpg
gulp.task('jpgmin',function(){
return gulp.src('book/*.jpg')
.pipe(imagemin({
progressive: true,
use:[jpegtran()]
}))
.pipe(gulp.dest('book_min/'));
});
// 任务:压缩png
gulp.task('pngmin',function(){
return gulp.src('book/*.png')
.pipe(imagemin({
quality: '65-80',
speed: 4,
use:[pngquant()]
}))
.pipe(gulp.dest('book_min/'));
}); // 默认处理的任务:
gulp.task('default', function () {
return gulp.start('jpgmin', 'pngmin');
});

运行gulp

E:\Test\zip>gulp
[16:38:46] Using gulpfile E:\Test\zip\gulpfile.js
[16:38:46] Starting 'default'...
[16:38:46] Starting 'jpgmin'...
[16:38:46] Starting 'pngmin'...
[16:38:46] Finished 'default' after 16 ms
[16:38:50] gulp-imagemin: Minified 13 images (saved 1.24 MB - 53.7%)
[16:38:51] Finished 'jpgmin' after 4.71 s
[16:38:52] gulp-imagemin: Minified 16 images (saved 591.58 kB - 66%)
[16:38:52] Finished 'pngmin' after 5.35 s

查看结果:

文件目录



压缩前



压缩后

PS:可以看得出来,压缩后的文件比之前少了约2M的大小,效果还是很明显的

jpg文件效果对比,大小减少了20k



png文件效果对比



PS: png文件减小了几十k,是不是效果更明显了

到目前为止,功能算是已经实现了,至于资源压缩合并我已经使用FIS做好了,这里的功能留于后面的章节讲述!

下一篇,将要介绍gulp的常用插件配置及使用!

前端构建工具之gulp(一)「图片压缩」的更多相关文章

  1. 前端构建工具之gulp的安装和配置

    在选择构建工具时,看到更多人推荐gulp,从此入了gulp的坑- 一.安装node环境 百度谷歌一下就有了,在终端中分别输入 node -v 和 npm -v,若显示node和npm的版本号则说明no ...

  2. 前端构建工具:gulp的配置与使用

    安装gulp 因为gulp是基于node的管理工具,所以要先安装nodejs安装nodejsnodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.or ...

  3. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  4. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  5. (转载)前端构建工具gulp使用

    前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...

  6. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  7. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  8. 前端读者 | 前端构建工具Gulp

    @羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...

  9. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

随机推荐

  1. POJ 2752 Seek the Name, Seek the Fame [kmp]

    Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17898   Ac ...

  2. Java程序设计求出岁数

    题目:我年龄的立方是个4位数.我年龄的4次方是个6位数.这10个数字正好包含了从0到9这10个数字,每个都恰好出现1次,求出我今年几岁. 直接拷贝运行就可以了. public class Age { ...

  3. [原]CentOS7.2最小安装环境部署Asp.NET Core笔记

    转载请注明原作者(think8848)和出处(http://think8848.cnblogs.com) 写在前面的话 不知不觉在cnblogs上注册已经10多年了,看我的园龄就直接暴露了我实际年龄, ...

  4. Ajax入门(二)

    接收服务器返回的消息 1,定义触发Ajax的js效果 2,创建Ajax方法 如果返回的数据是XML,则需使用aj.responseXML 3,接收服务器返回的消息,并显示在网页上 错误案例:直接接收服 ...

  5. 分分钟搞定IOS远程消息推送

    一.引言 IOS中消息的推送有两种方式,分别是本地推送和远程推送,本地推送在http://my.oschina.net/u/2340880/blog/405491这篇博客中有详细的介绍,这里主要讨论远 ...

  6. FMDB的使用方法

    转自:http://blog.devtang.com/blog/2012/04/22/use-fmdb/ 前言 SQLite (http://www.sqlite.org/docs.html) 是一个 ...

  7. IFC是什么

    IFC是用EXPRESS语言来描述的一种数据格式 IFC的物理文件 为了数据交换的目的,STEP标准Prat 21规定了正文文件的结构,认为一个STEP文件或一个Part 21文件包括两端:头段和数据 ...

  8. sql 触发器删除操作

    create trigger CheckDelete on 表 for delete as ) select @state=isnull(字段,'') from deleted if (@state& ...

  9. 神经网络与深度学习(3):Backpropagation算法

    本文总结自<Neural Networks and Deep Learning>第2章的部分内容. Backpropagation算法 Backpropagation核心解决的问题: ∂C ...

  10. Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...