前端构建工具之gulp（一）「图片压缩」

前端构建工具之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

• 安装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:Testzip>gulp
[15:39:37] Using gulpfile E:Testzipgulpfile.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-jpegtran 和 imagemin-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:Testzip>gulp
[16:38:46] Using gulpfile E:Testzipgulpfile.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的常用插件配置及使用!