前端构建工具之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:\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-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:\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的经常使用插件配置及使用!