CODEWITHSUNDEEP
javascriptnode.jsgulp
David Angel
David Angel

Reputation: 991

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

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.

Upvotes: 50

Views: 70898

Answers (9)

Anushil Kumar
Anushil Kumar

Reputation: 692

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

Upvotes: -1

Naveen Kumar
Naveen Kumar

Reputation: 41

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;

Upvotes: 3

Hai Bui
Hai Bui

Reputation: 303

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

Upvotes: 0

Neithan Max
Neithan Max

Reputation: 11776

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

Upvotes: 3

Anwar
Anwar

Reputation: 4246

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.

Upvotes: 4

xsilen T
xsilen T

Reputation: 1753

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

Upvotes: 0

Ghidello
Ghidello

Reputation: 1863

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

Upvotes: 64

Heikki
Heikki

Reputation: 15417

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.

Upvotes: 6

ckross01
ckross01

Reputation: 1671

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.

Upvotes: 15

Related Questions