我可以使用具有多个来源和多个目的地的Gulp任务吗？

Question

我的gulpfile.js中有以下内容:

   var sass_paths = [
        './httpdocs-site1/media/sass/**/*.scss',
        './httpdocs-site2/media/sass/**/*.scss',
        './httpdocs-site3/media/sass/**/*.scss'
    ];

gulp.task('sass', function() {
    return gulp.src(sass_paths)
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 4 version'))
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(rename({ suffix: '.min'}))
        .pipe(gulp.dest(???));
});

我想将缩小的css文件输出到以下路径:

./httpdocs-site1/media/css
./httpdocs-site2/media/css
./httpdocs-site3/media/css

我误解了如何使用来源/目的地吗？或者我是否想在一项任务中完成太多任务？

编辑:更新了相应站点目录的输出路径.

Answer 1

我想每个文件夹配方的运行任务可能会有所帮助.

更新

按照配方中的想法,过度简化您的样本只是为了提出想法,这可以是一个解决方案:

var gulp = require('gulp'),
    path = require('path'),
    merge = require('merge-stream');

var folders = ['httpdocs-site1', 'httpdocs-site2', 'httpdocs-site3'];

gulp.task('default', function(){

    var tasks = folders.map(function(element){
        return gulp.src(element + '/media/sass/**/*.scss', {base: element + '/media/sass'})
            // ... other steps ...
            .pipe(gulp.dest(element + '/media/css'));
    });

    return merge(tasks);
});

Answer 2

如果您想使用多个srcs但是您可以在同一个目录中有多个目标,那么您将要使用合并流.这是一个例子.

var merge = require('merge-stream');


gulp.task('sass', function() {
   var firstPath = gulp.src(sass_paths[0])
               .pipe(sass({errLogToConsole: true}))
               .pipe(autoprefixer('last 4 version'))
               .pipe(minifyCSS({keepBreaks:true}))
               .pipe(rename({ suffix: '.min'}))
               .pipe(gulp.dest('./httpdocs-site1/media/css'))
               .pipe(gulp.dest('./httpdocs-site2/media/css'));
   var secondPath = gulp.src(sass_paths[1])
               .pipe(sass({errLogToConsole: true}))
               .pipe(autoprefixer('last 4 version'))
               .pipe(minifyCSS({keepBreaks:true}))
               .pipe(rename({ suffix: '.min'}))
               .pipe(gulp.dest('./httpdocs-site1/media/css'))
               .pipe(gulp.dest('./httpdocs-site2/media/css'));
   return merge(firstPath, secondPath);
});

我假设你想要在这里传输不同的路径,所以有site1和site2,但你可以根据需要在尽可能多的地方执行此操作.您也可以在任何步骤之前指定dest,例如,您希望有一个具有.min文件的dest和一个不具有.min文件的dest.

Answer 3

您可以使用gulp-rename来修改文件的写入位置.

gulp.task('sass', function() {
    return gulp.src(sass_paths, { base: '.' })
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 4 version'))
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(rename(function(path) {
            path.dirname = path.dirname.replace('/sass', '/css');
            path.extname = '.min.css';
        }))
        .pipe(gulp.dest('.'));
});

重要位:使用base选项gulp.src.