能否在Gulp中通过配置文件实现源文件与目标路径的映射？

Absolutely! This source-destination mapping approach is a great way to organize multi-file processing tasks in Gulp—it keeps your gulpfile clean and makes it easy to add/modify file pairs later without touching core task logic. Here's how to implement it properly:

Step 1: Set up required dependencies #

First, you'll need two packages to make this workflow work smoothly:

• js-yaml to parse your YAML config file
• merge-stream to combine multiple independent file streams into one (so Gulp can track all tasks correctly)

Install them via npm:

npm install js-yaml merge-stream --save-dev

Step 2: Finalize your config.yml structure #

Your proposed entries format is perfect—stick with this clean, readable structure:

entries:
  - source: "node_modules/jquery2/dist/jquery.js"
    destination: "jquery/2/jquery.js"
  - source: "node_modules/jquery3/dist/jquery.js"
    destination: "jquery/3/jquery.js"

Step 3: Rewrite your Gulp task to use the config #

Update your gulpfile.js to load the config and loop through each entry. Here's the full, working version of your javascripts task:

const gulp = require('gulp');
const $ = require('gulp-load-plugins')(); // Assuming you're using gulp-load-plugins
const yaml = require('js-yaml');
const fs = require('fs');
const merge = require('merge-stream');

// Load and parse the config file
const config = yaml.load(fs.readFileSync('./config.yml', 'utf8'));

function javascripts() {
  // Create a separate stream for each source-destination pair
  const fileStreams = config.entries.map(entry => {
    return gulp.src(entry.source)
      .pipe($.sourcemaps.init())
      // Minify only in production mode
      .pipe($.if(PRODUCTION, $.uglify()
        .on('error', e => {
          console.error(`Uglify error in ${entry.source}:`, e.message);
          this.emit('end'); // Prevent Gulp from crashing on single-file errors
        })
      ))
      .pipe($.sourcemaps.write('.')) // Write sourcemaps alongside minified files
      // Extract directory path from full destination string (gulp.dest expects a folder)
      .pipe(gulp.dest(entry.destination.split('/').slice(0, -1).join('/')));
  });

  // Merge all streams into one so Gulp handles them as a single task
  return merge(fileStreams);
}

// Export the task for your workflow
exports.javascripts = javascripts;

Key details to note: #

• We use map() to generate a stream for every entry in your config—no hardcoding file paths in the task itself
• The gulp.dest() line extracts the directory from your full destination path (since Gulp's dest expects a folder, not a complete file path)
• Added robust error handling for uglify() to avoid crashing your entire Gulp process if one file fails
• Kept your existing sourcemap and production minification logic intact

This setup lets you add new file pairs to config.yml in seconds without touching task code—super scalable for larger projects!

内容的提问来源于stack exchange，提问作者Petr Ogurcak