如何使用gulp压缩图片并监视文件的变化自动进行打包嘞？？？看这篇就够了！！！

使用gulp压缩图片

第一步：

cnpm i gulp-imagemin -D

第二步：
书写gulpfile.js文件：
代码如下：

const gulp=require('gulp');
const cssmin=require('gulp-cssmin');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const rename=require('gulp-rename');
const babel=require('gulp-babel');
const sourcemaps=require('gulp-sourcemaps');
const imagemin=require('gulp-imagemin');  // 不只是压缩图片

const js_path=['./src/js/**/*.js'];

gulp.task('js', ()=>{
  return gulp
    .src(js_path)
    //.pipe(concat('bundle.min.js'))
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write())

    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/js'));
});

gulp.task('style', ()=>{
  return gulp
    .src(['./src/css/**/*.css'])
    .pipe(concat('style.min.css'))
    .pipe(cssmin())
    .pipe(gulp.dest('./build/css/'));
});

gulp.task('image', ()=>{
  return gulp
    .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png']) // 表明这三种类型都可以
    .pipe(imagemin([
      // 这里面可以做一些配置，即一些优化选项，提升用户体验。 
      imagemin.gifsicle({interlaced: true}),  // 开启隔行扫描，当图片比较大的时候，先模糊，再清楚。 
      imagemin.jpegtran({propressive: true}), // 开启渐进，和上面是一个意思，只是名字不同。 jpeg和jpg是一个东西，只是前者是 专业的叫法，后者是俗称。
      imagemin.optipng({optimizationLevel: 5})  // png是无损压缩。所以对它的优化不是很容易，这个参数表示压缩级别，5是最高级。
    ]))
    .pipe(gulp.dest('./build/img/'));
});

// watch任务的目的就是监视 js文件。
gulp.task('watch', ()=>{
  gulp.watch(js_path, ['js']);
});

// 执行js、watch、image这三个任务
gulp.task('default', ['js', 'watch', 'image']);

第三步：
在命令行中输入 gulp 即可！！！

效果如下：
经过gulp压缩编译之后，

变成了下面的样子 ！！！

压缩前的大小如下：

压缩后的大小如下：

要是我想监视文件的改变，让它自动进行编译嘞，我该怎么做？？？

其实很简单，只需要加上下面的代码，就OK了！！！

// watch任务的目的就是监视 js文件。
gulp.task('watch', ()=>{
  gulp.watch(js_path, ['js']);
});

这样子，当监视的文件发生修改，就会自动重新打包了，非常方便！！！

效果图如下所示：

废话不多说！！！赶紧动手自己操作一下吧 ！！！

如果这篇文章能够帮助到您，希望您不要吝惜点赞👍👍和收藏💖💖，您的支持是我继续努力的动力 💪💪！！！