gulp实战(4) - 自动化打包图片（完整版）

原码目录：src
打包目录：build

目标：src 中的图片文件是未压缩的，打包至 build 目录后，生成压缩后的文件，名字与之前保持一致

分析：

1. 打包时，build目录中可能已经存在上一次打包生成的旧文件，所以每次打包都应该先清理掉。
2. 打包时需要执行压缩操作
3. 打包后，每次修改 src 目录下的图片，应该即时重新打包
4. 打包时的执行顺序为：清理 -> 打包 -> 监控修改，而且后一步必须在前一步操作完成后才可以执行。

第一步：设置变量

var config = {
    src: "src",
    dest: "build"
}

第二步：清理

涉及插件 [ gulp-clean ]

gulp-clean：清理文件及文件夹

/**
 * 清理目标目录
 */
gulp.task('clean', function(cb) {
    pump([
        gulp.src(config.dist),
        clean()
    ], cb)
})

第三步：执行文件操作

涉及插件 [ gulp-imagemin, imagemin-pngquant ]

gulp-imagemin： 压缩图片
imagemin-pngquant： 深度压缩PNG格式图片

/**
 * 执行图片压缩
 */
gulp.task('minify:image', [], function(cb) {

    pump([
        // 获取原目录下所有的html文件
        gulp.src(config.src + "/**/*.{png,jpg,gif,ico,jpeg}"),
        imagemin({
            optimizationLevel: 5,   //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true,      //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true,       //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true,        //类型：Boolean 默认：false 多次优化svg直到完全优化
            svgoPlugins: [{removeViewBox: false}],  //不要移除svg的viewbox属性
            use: [pngquant()]       //使用pngquant深度压缩png图片的imagemin插件
        }),
        // 输出至目标目录
        gulp.dest(config.dist)
        
    ], cb);

});

第四步：监听文件变更

删除文件时似乎并不能被监听到

/**
 * 监听JS文件变改，即时调用任务执行JS增量打包
 */
gulp.task('watch', [], function(cb) {

    gulp.watch(config.src + "/**/*.html", ['minify:image']);

});

第五步：安排执行顺序

涉及插件 [ run-sequence ]

run-sequence：任务同步

/**
 * 开始执行
 */
gulp.task('default', function(cb) {
    sequence('clean', 'minify:image', 'watch', cb);
});

---

完整版文档

var gulp            = require('gulp'),
    clean           = require('gulp-clean'),
    imagemin        = require('gulp-imagemin'),
    pngquant        = require('imagemin-pngquant'),
    pump            = require('pump'),
    sequence        = require('run-sequence');

var config = {
    src: "src",
    dist: "build"
}

/**
 * 清理目标目录
 */
gulp.task('clean', function(cb) {
    pump([
        gulp.src(config.dist),
        clean()
    ], cb)
})

/**
 * 执行图片压缩
 */
gulp.task('minify:image', [], function(cb) {

    pump([
        // 获取原目录下所有的html文件
        gulp.src(config.src + "/**/*.{png,jpg,gif,ico,jpeg}"),
        imagemin({
            optimizationLevel: 5,   //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true,      //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true,       //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true,        //类型：Boolean 默认：false 多次优化svg直到完全优化
            svgoPlugins: [{removeViewBox: false}],  //不要移除svg的viewbox属性
            use: [pngquant()]       //使用pngquant深度压缩png图片的imagemin插件
        }),
        // 输出至目标目录
        gulp.dest(config.dist)
        
    ], cb);

});

/**
 * 监控
 */
gulp.task('watch', [], function(cb) {

    gulp.watch(config.src + "/**/*.{png,jpg,gif,ico,jpeg}", ['minify:image']);

});

/**
 * 开始执行
 */
gulp.task('default', function(cb) {
    sequence('clean', 'minify:image', 'watch', cb);
});