How to save a stream into multiple destinations with Gulp.js ?

When using Gulp.js for automating frontend development, sometimes we need to save the same file stream to multiple different destinations. This can be achieved by using the gulp.dest() function, which can be called multiple times in the pipeline to specify multiple save paths.

Here is a specific example demonstrating how to save CSS files to two different directories simultaneously:

javascript
// Import gulp and other required plugins
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css'); // CSS minification plugin

// Define a task to minify CSS and output the minified files to two different directories
gulp.task('minify-css', function() {
    return gulp.src('src/css/*.css')  // Specify the source directory for CSS files
        .pipe(cleanCSS({compatibility: 'ie8'})) // Perform minification
        .pipe(gulp.dest('dist/css'))  // First output directory
        .pipe(gulp.dest('backup/css'));  // Second output directory
});

// Set the default task (optional)
gulp.task('default', gulp.series('minify-css'));

In this example, we first specify the source directory for CSS files using gulp.src(). Then, we use the cleanCSS plugin to minify the CSS files. Finally, we call gulp.dest() twice to save the minified CSS files to both dist/css and backup/css directories.

The advantage of this method is that it is simple and intuitive, allowing for flexible output to multiple destinations. Additionally, since Gulp.js uses stream processing, calling gulp.dest() multiple times does not significantly impact performance.