Gulp: Is it possible to copy files into different folders within one task?

[leftstick]

My case was done by Grunt as following:

copy: {
            dev: {
                files: [{
                    expand: true,
                    cwd: 'bower_components/',
                    src: ['underscore/underscore.js', 'jquery/jquery.js', 'angular/angular.js', 'angular-route/angular-route.js', 'ng-grid/ng-grid-2.0.8.debug.js'],
                    dest: 'build/libs/',
                    flatten: true
                }, {
                    expand: true,
                    cwd: 'bower_components/',
                    src: ['ng-grid/ng-grid.css', 'jquery.ui/themes/base/jquery.ui.theme.css'],
                    dest: 'build/css/',
                    flatten: true
                }, {
                    expand: true,
                    cwd: 'bower_components/jquery.ui/themes/base/',
                    src: ['images/*'],
                    dest: 'build/css/'
                }]
            }
        }

I am wondering if it is possible to do the same thing with Gulp? Cause i like the gulp's streaming style, but no idea how to do it?

[appleboy]

Depend your task, for example: coffee task

gulp.task('coffee', function() {
    return gulp.src('app/assets/coffeescript/**/*.coffee')
        .pipe(changed('app/assets/js/', { extension: '.js' }))
        .pipe(coffeelint({'indentation': {
            'name': 'indentation',
            'value': 4,
            'level': 'error'
        }}))
        .pipe(coffeelint.reporter())
        .pipe(coffee({bare: true}))
        .pipe(gulp.dest('app/assets/js/'))
        .pipe(gulp.dest('dist/assets/js/'))
        .pipe(size())
        .pipe(connect.reload());
});

Copy file to different folder after executing coffee command.

[leftstick]

@appleboy, Thanks for your quick response. Maybe i didn't describe the question clearly.
Let's back to my grunt example, some js file like underscore, angular..., i want them to be copied to the build/libs/; For the css files like ng-grid.css, jquery.ui.theme.css... i want them to be copied to build/css/. Actually, they are different source, not only the destination.

[appleboy]

Try the following copy task using gulp copy command.

gulp.task('copy', function() {
    gulp.src(['underscore/underscore.js', 'jquery/jquery.js', 'angular/angular.js', 'angular-route/angular-route.js', 'ng-grid/ng-grid-2.0.8.debug.js'])
        .pipe(gulp.dest('build/libs/'))
    gulp.src(['ng-grid/ng-grid.css', 'jquery.ui/themes/base/jquery.ui.theme.css'])
        .pipe(gulp.dest('build/css/'))
    gulp.src('images/**/*')
        .pipe(gulp.dest('build/css/'))
});

[contra]

It's as simple as

gulp.src(['your','source','files'])
  .pipe(gulp.dest('output folder'))

Please keep questions to StackOverflow

[leftstick]

hi, @appleboy, Sorry, my wrong question.
The real concern from me is, according to the doc as following:

Note: By default, tasks run with maximum concurrency -- e.g. it launches all the tasks at once and waits for nothing. If you want to create a series where tasks run in a particular order, you need to do two things:

1. give it a hint to tell it when the task is done,
2. and give it a hint that a task depends on completion of another.

How to make your solution supported as an sync task that i have another task rely on it.

For example i have another task called template, once i launch the template task as following:

gulp.task('template', ['copy'], function(){
    //do some stuff
});

The copy task as your solution is not really a sync task, therefore, template would be launched as well as copy.

[appleboy]

@leftstick reference: Running tasks in series

[leftstick]

@appleboy , I've read this.

I mean, if i have only one stuff to do in the task, it's ok by returning the stream:

gulp.task('copy', function(){
    return gulp.src('file1').pipe(gulp.dest('dest1'));
});

But as your solution, i can do more stuff in a task, how to return multiple streams?

[contra]

@leftstick https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md check the docs

[leftstick]

@Contra, Thanks very much

[leadingcode]

// Copy recursive folder and all files from ./src to ./build DIR
// if you have copy all subcategories - use /*
gulp.task('copy', function () {
gulp.src([
'./src/assets//_',
'./src/_.php',
'./src/parts//',
'./src/phpexcel//_',
'./src/presentation/__/_',
'./src/scripts/_/_',
'./src/*.manifest',
],{
"base" : "./src"
})
.pipe(gulp.dest('build'));

[yelexin]

This is my solution:

function copyPasswordFaasTemplate(cb) {
  Promise.all([
    new Promise(resolve => {
      src(path.resolve(__dirname, 'src', 'userpool', 'settings', 'password', 'template.js'))
        .pipe(dest(path.resolve(__dirname, 'dist', 'src', 'userpool', 'settings', 'password')))
        .on('end', resolve);
    }),
    new Promise(resolve => {
      src(path.resolve(__dirname, 'src', 'userpool', 'settings', 'password', 'pwd-faas-tpl.yml'))
        .pipe(dest(path.resolve(__dirname, 'dist', 'src', 'userpool', 'settings', 'password')))
        .on('end', resolve);
    }),
    new Promise(resolve => {
      src(path.resolve(__dirname, 'src', 'userpool', 'settings', 'password', '.env.template'))
        .pipe(dest(path.resolve(__dirname, 'dist', 'src', 'userpool', 'settings', 'password')))
        .on('end', resolve);
    }),
    new Promise(resolve => {
      src(path.resolve(__dirname, 'src', 'userpool', 'settings', 'password', 'test.html'))
        .pipe(dest(path.resolve(__dirname, 'dist', 'src', 'userpool', 'settings', 'password')))
        .on('end', resolve);
    }),
  ]).then(() => {
    cb();
  });
}

This can avoid async problems.

[phated]

Don't use streams inside promises. You are just asking for tons of hard-to-debug problems.