前端构建工具之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. 《中国文明史》系列—外柔 VS 内厉

    读启良的<中国文明史>,里面有谈到外柔而内厉——中国政府自古以来奉行的准则.大致意思是说,我华夏民族对待周边民族,历来是很友好的,即所谓的“柔”,而对待自己人,向来是“刚”或曰“厉”的. ...

  2. [LeetCode] Same Tree 判断相同树

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  3. [翻译] Android是怎样绘制视图的

    原文:How Android Draws Views 当一个Activity获取到焦点的时候,它的布局就开始被绘制. 绘制的过程由Android framework处理.但布局层级的根节点必须由Act ...

  4. Less的使用

    Less为css预处理器 首先先去下载一个koala编译器软件,然后运行打开 新建一个项目目录,在css文件夹中新建一个后缀为less的文件,然后拉入koala软件中,然后运行 ,你的css文件夹中就 ...

  5. 学习ASP.NET 5和MVC6

    今天很荣幸的参加了微软开源跨平台讲座,充分认识了下一个版本的ASP.NET所带来的激动人心的特性.虽然过去已经断断续续的了解了一些ASP.NET5和MVC6与EF7的动态,但是都没有这一次来的系统化( ...

  6. C#-WebForm-Request、Response、QueryString、Repeater删

    知识点: Request - 获取请求对象 专门用来接传递过来的值 Request["key"](李献策lxc) 1.获取地址栏传递过来的值 get 2.获取表单传递过来的参数值 ...

  7. 【转】JAVA自学之路

    JAVA自学之路 一: 学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟应该选择什么方向 ...

  8. sql 取汉字首字母

    )) ) --用于加密 --WITH ENCRYPTION as begin declare @intLen int ) ) set @intLen = len(@str) set @strRet = ...

  9. 【BZOJ-2938】病毒 Trie图 + 拓扑排序

    2938: [Poi2000]病毒 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 609  Solved: 318[Submit][Status][Di ...

  10. project.pbxproj 的merge问题

    基于xcode8.0 1.project.pbxproj 的结构 内部文件{archiveVersion=1 ; classes={};objectVersion=46;objects={};root ...