Can I use a Gulp task with multiple sources and multiple destinations?

Question

I have the following in my 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(???));
});

I'm wanting to output my minified css files to the following paths:

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

Am I misunderstanding how to use sources/destinations? Or am I trying to accomplish too much in a single task?

Edit: Updated output paths to corresponding site directories.

I guess you have a typo on the question. Shouldn't the output paths be `./*1/`, `./*2/`, `./*3/`? — Lucio, Nov 06 '14 at 16:20

Ghidello · Answer 1 · 2014-11-06T22:32:53.867

I guess that the running tasks per folder recipe may help.

Update

Following the ideas in the recipe, and oversimplifying your sample just to give the idea, this can be a solution:

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);
});

score 15 · Answer 2 · answered Nov 06 '14 at 17:13

you are going to want to use merge streams if you would like to use multiple srcs but you can have multiple destinations inside of the same one. Here is an example.

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);
});

I assumed you wanted different paths piped here so there is site1 and site2, but you can do this to as many places as needed. Also you can specify a dest prior to any of the steps if, for example, you wanted to have one dest that had the .min file and one that didn't.

This solution just seems like it has a lot of repetition. Is there a better way? — David Angel, Nov 06 '14 at 17:46
@DavidAngel remember, it's just JavaScript. You can refactor the repetition out to a function that returns the stream, and just have your task call that function and combine the results. Sidebar: I prefer [`gulp-util`](https://github.com/gulpjs/gulp-util) for that stuff. — Evan Davis, Nov 06 '14 at 18:29
use [streamqueue](https://stackoverflow.com/a/26098747/2518317) instead if the order of the stuff going through these streams is important — Hashbrown, Jul 10 '19 at 11:21

Heikki · Answer 3 · 2014-11-06T18:17:17.710

You can use gulp-rename to modify where files will be written.

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('.'));
});

Important bit: use base option in gulp.src.

Anwar · Answer 4 · 2018-10-26T08:41:25.177

For the ones that ask themselves how can they deal with common/specifics css files (works the same for scripts), here is a possible output to tackle this problem :

var gulp = require('gulp');
var concat = require('gulp-concat');
var css = require('gulp-clean-css');

var sheets = [
    { src : 'public/css/home/*', name : 'home.min', dest : 'public/css/compressed' },
    { src : 'public/css/about/*', name : 'about.min', dest : 'public/css/compressed' }
];

var common = {
    'materialize' : 'public/assets/materialize/css/materialize.css'
};

gulp.task('css', function() {
    sheets.map(function(file) {
        return gulp.src([
            common.materialize, 
            file.src + '.css', 
            file.src + '.scss', 
            file.src + '.less'
        ])
        .pipe( concat(file.name + '.css') )
        .pipe( css() )
        .pipe( gulp.dest(file.dest) )
    }); 
});

All you have to do now is to add your sheets as the object notation is constructed.

If you have additionnal commons scripts, you can map them by name on the object common, then add them after materialize for this example, but before the file.src + '.css' as you may want to override the common files with your customs files.

Note that in the src attribute you can also put path like this :

'public/css/**/*.css'

to scope an entire descendence.

Neithan Max · Answer 5 · 2018-11-01T15:31:12.917

I had success without needing anything extra, a solution very similar to Anwar Nairi's

const p = {
  dashboard: {
    css: {
      orig: ['public/dashboard/scss/style.scss', 'public/dashboard/styles/*.css'],
      dest: 'public/dashboard/css/',
    },
  },
  public: {
    css: {
      orig: ['public/styles/custom.scss', 'public/styles/*.css'],
      dest: 'public/css/',
    },
    js: {
      orig: ['public/javascript/*.js'],
      dest: 'public/js/',
    },
  },
};

gulp.task('default', function(done) {
  Object.keys(p).forEach(val => {
    // 'val' will go two rounds, as 'dashboard' and as 'public'
    return gulp
      .src(p[val].css.orig)
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(autoPrefixer())
      .pipe(cssComb())
      .pipe(cmq({ log: true }))
      .pipe(concat('main.css'))
      .pipe(cleanCss())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(p[val].css.dest))
      .pipe(reload({ stream: true }));
  });
  done(); // <-- to avoid async problems using gulp 4
});

Object.keys() was the key for me. Thanks for sharing your demo! — klewis, Jun 28 '21 at 20:53

score 3 · Answer 6 · answered Jul 08 '20 at 08:33

Multiple sources with multiple destinations on gulp without using any extra plugins just doing concatenation on each js and css. Below code works for me. Please try it out.

 const gulp = require('gulp');
 const concat = require('gulp-concat');
 function task(done) {
    var theme = {
        minifiedCss: {
             common: { 
                src : ['./app/css/**/*.min.css', '!./app/css/semantic.min.css'], 
                name : 'minified-bundle.css', 
                dest : './web/bundles/css/' 
            }
        },
        themeCss:{
            common: { 
                 src : ['./app/css/style.css', './app/css/responsive.css'], 
                 name : 'theme-bundle.css', 
                 dest : './web/bundles/css/' 
            }
        },
        themeJs: {
            common: {
                src: ['./app/js/jquery-2.1.1.js', './app/js/bootstrap.js'],
                name: 'theme-bundle.js',
                dest: './web/_themes/js/'
            }
        }
    }
    Object.keys(theme).map(function(key, index) {
        return gulp.src(theme[key].common.src)
        .pipe( concat(theme[key].common.name) )
        .pipe(gulp.dest(theme[key].common.dest));
    });
    done();
}
exports.task = task;

score 0 · Answer 7 · edited Jul 21 '18 at 06:20

Using gulp-if helps me a lot.

The gulp-if first argument. is the gulp-match second argument condition

gulp-if can be found in gulp-if

import {task, src, dest} from 'gulp';
import VinylFile = require("vinyl");
const gulpif = require('gulp-if');

src(['foo/*/**/*.md', 'bar/*.md'])
    .pipe(gulpif((file: VinylFile) => /foo\/$/.test(file.base), dest('dist/docs/overview')))
    .pipe(gulpif((file: VinylFile) => /bar\/$/.test(file.base), dest('dist/docs/guides')))
});

score 0 · Answer 8 · answered Jun 29 '20 at 05:31

0

I think we should create 1 temporary folder for containing all these files. Then gulp.src point to this folder

answered Jun 29 '20 at 05:31

Hai Bui

303
1
2
9

score -1 · Answer 9 · answered Sep 05 '20 at 13:02

-1

The destination will have the same directory structure as the source.

answered Sep 05 '20 at 13:02

Anushil Kumar

674
8
8

Can I use a Gulp task with multiple sources and multiple destinations?

9 Answers9

Linked

Related