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