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