gulp-imagemin圖片壓縮----gulp系列（三)

本節實現圖片壓縮，在實現壓縮前，先配置images任務，設置源目錄和輸出目錄。

在系列（二）代碼的基礎上，再進行擴展。

 

1.找到gulp->config.js，對images進行源目錄(src->img)和輸出目錄(build->img)的配置:

 

 

2.gulp->tasks里新建images任務,如下圖:

 

3.同時在default任務序列里添加images任務：

gulp.task('default', ['less', 'images', 'watch']);

 

4.最后在watch里添加對src->img文件夾的監聽：

watch(config.images.src, function(){  //監聽所有image
        gulp.start('images');             
});

 

此時運行gulp，src->img文件下的圖片就會被輸出到build->img下，src->img的改動也會被監聽。

（注意，刪除一個圖片，雖然會被監聽，但是build->img里卻不會刪除，之后系列會添加另一個任務來解決這個問題，這里暫時不做）

 

以上做完后，我們只是做了一個從 src->img 把圖片輸出到 build->img 里的任務。現在再添加圖片壓縮任務：

 

1.安裝模塊：

npm install --save-dev gulp-imagemin

 

2.壓縮任務：

可以直接插入在image任務里，但是我們不這樣做，不需要在寫代碼時隨時進行壓縮，

我們新建一個deploy任務，用來設置發布項目時需要執行的任務

tasks里新建deploy.js，代碼如下：

var gulp = require('gulp');

gulp.task('deploy', ['less', 'imagemin']);

部署項目時不需要再修改代碼，所以我們去掉watch任務，同時把image任務用imagemin替換

 

3.最后在tasks文件夾里新建imagemin.js：

var gulp = require('gulp');
var config = require('../config').images;
var imagemin = require('gulp-imagemin');

gulp.task('imagemin', function(){

    return gulp.src(config.src)
        .pipe(imagemin())
        .pipe(gulp.dest(config.dest))
})

代碼和images任務幾乎一樣，只是多了一個 壓縮方法 —— pipe(imagemin())；

保存后，在命名行中運行 gulp deploy

需要部署時運行的less和imagemin就執行成功了。

 

還是那句話多看官方文檔。

 

>>> github 地址，請選擇  imagemin  分支<<<