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  分支<<<