1

This small snippet below attempts to copy two projects, projA and projB from their folders into the gulp folder. It passes the paths for the two folders via an array. The code executes correctly but only the last path in the array. So only projB is copied over. 

`const gulp = require('gulp');`

`var pathsToProj = [        // source               // base              destination
                ['../../projA/eb_aws/**/*.*', 'projA/eb_aws', 'gulp-proj1/src/projA/eb_aws'],
                ['../../projB/eb_aws/**/*.*', 'projB/eb_aws', 'gulp-proj1/src/projB/eb_aws'],
              ];    

    pathsToProj.forEach(pathToProj => {`

        gulp.task('copyFiles', function(){
            return gulp.src(pathToProj[0], {base: pathToProj[1]})
                .pipe(gulp.dest(pathToProj[2]));
        });

        gulp.task('default', gulp.series('copyFiles', async function (cb){
            cb();   
        }));
    });

Another anomaly is that the project folder is copied to /gulp-proj1/ (/gulp/proj1/projB) and not to /gulp-proj1/src/ as I intended it to be.

Any help to resolve this is appreciated. Thanks.

Mark
  • 143,421
  • 24
  • 428
  • 436
user3728534
  • 13
  • 4

2 Answers2

2

It is because of the combination of forEach and gulp's asynchronous nature. The forEach's will quickly cycle through - without waiting for each function within to complete. So before the first copyFile completes it is called again, which restarts the task and only the last one typically completes. It is entirely dependent on how fast or slow your internal task takes which is not good. That internal function should be synchronous to ensure it does what you expect.

For further discussion, see, e.g., Using async/await with a forEach loop and similar. Also see MDN forEach:

forEach expects a synchronous function

forEach does not wait for promises. Kindly make sure you are aware of the implications while using promises(or async functions) as forEach callback.

So basically any other for type loop would work. Here is a much simpler version of your code that works:

// gulp.task('copyFiles', function (cb) {
function copyFiles(cb) {

  for (const pathToProj of pathsToProj) {

    gulp.src(pathToProj[0])
      .pipe(gulp.dest(pathToProj[1]));
  };
  cb();
};

gulp.task('default', gulp.series(copyFiles));

Note for testing purposes I focused on this one issue and not your second question about the destination folder.

Mark
  • 143,421
  • 24
  • 428
  • 436
  • Thanks for that very clear and easy to understand explanation on why my code was not working. I saw other very nerdy explanations on the same i couldn't understand. However this code gives me the same result as mine. It too ran just once copying only one of the 2 project folder to my gulp folder. – user3728534 Jun 14 '20 at 03:22
  • Well, I tested it several times and it worked correctly....and I had three src's in the `pathsToProj` array so ... – Mark Jun 14 '20 at 03:38
  • I have no clue that why it should work on your machine and not mine. I tried to use your code as is. Really surprising. – user3728534 Jun 14 '20 at 06:34
0

I modified the code snippet by Mark above as follows to get the desired output:

tasks = function copyFiles(cb) {
  var paths = new Array();  
  for (const pathToProj of pathsToProj) {
    paths.push(gulp.src(pathToProj[0], {base: pathToProj[1]})
        .pipe(gulp.dest(pathToProj[2])));
  };
  cb();
  return paths  
};

gulp.task('default', gulp.series(tasks) );

However, I still cannot get the folders copied where I want. They end up at /gulp-proj1/ instead of ending up at /gulp-proj1/src/. Thanks.

user3728534
  • 13
  • 4