Nodejs新人求教关于gulp的问题

Nodejs新人求教关于gulp的问题

最近在用gulp构建前端代码，遇到一个问题 gulp.task(‘imagemin’, function () { gulp.src(’./static/*/img/’) .pipe(imagemin({ progressive: true })) .pipe(gulp.dest(’./dist/image’)) .pipe(notify({ message: ‘Images task complete’ })); }); 这样我每压缩一张图片就会给出一个提示，我想让图片全部压缩完成之后给一个通知就行 请问应该如何做到？


6 回复

当然可以！你提到的问题可以通过使用 gulp-sequence 插件来解决。gulp-sequence 可以帮助你控制任务的执行顺序，从而确保在所有图片压缩完成后才触发通知。

解决方案

  1. 安装必要的插件： 首先，你需要安装 gulp-sequence 插件。你可以使用 npm 来安装它：

    npm install --save-dev gulp-sequence

  2. 修改 Gulp 任务： 然后，你可以修改你的 Gulp 任务，使其在所有图片压缩完成后才触发通知。这里是一个示例代码：

    const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const notify = require('gulp-notify');
const sequence = require('gulp-sequence');

// 修改后的 imagemin 任务
gulp.task('imagemin', function () {
  return gulp.src('./static/**/img/*')
    .pipe(imagemin({ progressive: true }))
    .pipe(gulp.dest('./dist/image'));
});

// 创建一个新的任务，在所有图片压缩完成后触发通知
gulp.task('notify-once', function (cb) {
  return gulp.src('.')
    .pipe(notify({ message: 'Images task complete' }));
});

// 使用 gulp-sequence 来控制任务的执行顺序
gulp.task('build-images', sequence('imagemin', 'notify-once'));

  3. 运行任务： 最后，你可以通过运行 gulp build-images 来执行这个任务。这将确保所有的图片都被压缩完毕后才会触发通知。

解释

  • gulp-sequence：这个插件允许你按顺序执行多个任务。在这个例子中，我们首先执行 imagemin 任务来压缩图片，然后执行 notify-once 任务来发送通知。

  • imagemin 任务：这个任务负责压缩图片并将其输出到目标目录。注意我们在这里移除了 pipe(notify)，因为我们希望在所有图片都压缩完毕后再发送通知。

  • notify-once 任务：这个任务只负责发送通知。由于我们使用了 gulp-sequence，这个任务会在 imagemin 任务完成后被调用一次。

这样，你就可以确保所有图片都压缩完毕后再收到通知了。希望这对你有帮助！


https://github.com/mikaelbr/gulp-notify 看文档呀

options.onLast

Type: Boolean Default: false
If the notification should only happen on the last file of the stream. Per default a notification is triggered on each file.

.pipe(notify({ message: ‘Images task complete’ }));这个造成的。

谢谢，成功了我以为是通过gulp的api控制呢给notify自身的忽略了

嗯，知道是这一句，楼上是答案了，也谢谢你

在你的问题中，你希望在所有图片压缩完成后才显示一个通知。Gulp 是基于流的，它默认会在每个文件处理完后执行管道中的操作。你可以使用 gulp-finalhandler 或者 merge-stream 来实现这个功能。

这里提供一个使用 merge-stream 的解决方案，它可以帮助你在所有任务完成后执行特定的操作：

示例代码

首先，你需要安装 merge-stream 包：

npm install merge-stream --save-dev

然后，你可以修改你的 Gulp 任务：

const gulp = require('gulp');
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const notify = require('gulp-notify');
const merge = require('merge-stream');

gulp.task('imagemin', function() {
    const images = gulp.src('./static/**/img/**')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: false},
                    {cleanupIDs: false}
                ]
            }),
            imageminMozjpeg({quality: 75, progressive: true})
        ]));

    const css = gulp.src('./static/**/css/**')
        .pipe(gulp.dest('./dist/css'));

    const js = gulp.src('./static/**/js/**')
        .pipe(gulp.dest('./dist/js'));

    // 合并所有流
    const allStreams = merge(images, css, js);

    return allStreams
        .pipe(gulp.dest('./dist'))
        .pipe(notify({ message: 'All tasks complete' }));
});

gulp.task('default', gulp.series('imagemin'));

在这个例子中，我们创建了三个独立的流（对于图片、CSS 和 JavaScript 文件），然后将它们合并成一个单一的流 allStreams。当所有文件都处理完毕时，我们将显示一个通知。

这样可以确保所有文件处理完毕后再显示通知。希望这能解决你的问题！

回到顶部