How to copy directory with Gulp 4

Contents
Introduction
Copy Directory
Add Logs (.on 'data')
Copy with FTP
Related Articles

Introduction

Copying directories is a very popular task for Gulp.

Usually, directories are not copied completely, but selectively.

For example, it is possible to select only the necessary files from temp and app directories.

To get acquainted with the Gulp, we will start with a simple copy and then increase the complexity.

Copy

Let' recursively copy app to dest.

Edit gulpfile.js

gulp.task('deploy2', function() { return gulp.src('app/**/*.*') .pipe(gulp.dest('dest') ); } );

gulp deploy

[14:50:36] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js [14:50:36] Starting 'deploy2'... [14:50:36] Finished 'deploy2' after 46 ms

Files were copied but if we need to check their names need to use .on

gulp.task('deploy2', function() { console.log("deploy task is running!"); return gulp.src('app/**/*.*') .on('data', function(file) { console.log(file) }) .pipe(gulp.dest('dest') ); } );

gulp deploy

[14:39:14] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js [14:39:14] Starting 'deploy'... deploy task is running! <File "index.html" <Buffer 0d 0a 0d 0a 3c 21 2d 2d 20 30 31 30 5f 63 73 73 5f 69 6e 63 20 2d 2d 3e 0d 0a 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0d 0a 3c 68 74 6d 6c 20 6c ... >> <File "temp\styles\style.css" <Buffer 2f 2a 21 20 6e 6f 72 6d 61 6c 69 7a 65 2e 63 73 73 20 76 38 2e 30 2e 31 20 7c 20 4d 49 54 20 4c 69 63 65 6e 73 65 20 7c 20 67 69 74 68 75 62 2e 63 6f ... >> <File "assets\styles\style.css" <Buffer 40 69 6d 70 6f 72 74 20 22 6e 6f 72 6d 61 6c 69 7a 65 2e 63 73 73 22 3b 0d 0a 40 69 6d 70 6f 72 74 20 22 62 61 73 65 2f 5f 67 6c 6f 62 61 6c 22 3b 0d ... >> <File "assets\styles\base\_global.css" <Buffer 68 74 6d 6c 2c 20 62 6f 64 79 20 7b 70 61 64 64 69 6e 67 3a 30 3b 20 6d 61 72 67 69 6e 3a 30 3b 7d>> <File "assets\styles\modules\_finnish_colors.css" <Buffer 2f 2a 20 48 65 69 48 65 69 2e 72 75 20 46 69 6e 6c 61 6e 64 20 2a 2f 0d 0a 2f 2a 20 24 66 69 6e 42 6c 75 65 3b 20 2d 20 66 69 6e 6e 69 73 68 20 66 6c ... >> <File "assets\styles\modules\_general.css" <Buffer 68 74 6d 6c 2c 20 62 6f 64 79 20 7b 70 61 64 64 69 6e 67 3a 30 3b 20 6d 61 72 67 69 6e 3a 30 3b 7d>> <File "assets\styles\modules\_topmenu-old.css" <Buffer 2f 2a 20 48 65 69 48 65 69 2e 72 75 20 46 69 6e 6c 61 6e 64 20 2a 2f 0d 0a 2f 2a 20 23 39 45 31 42 33 34 20 d1 8f d1 80 d0 ba d0 be 2d d0 ba d1 80 d0 ... >> <File "assets\styles\modules\_topmenu.css" <Buffer 23 6d 65 6e 75 2c 20 23 73 74 61 74 69 63 30 31 20 2c 20 23 73 74 61 74 69 63 30 32 2c 0d 0a 23 73 74 61 74 69 63 30 33 20 2c 23 73 74 61 74 69 63 30 ... >> <File "assets\styles\modules\_variables.css" <Buffer 24 66 69 6e 42 6c 75 65 3a 20 23 30 30 32 66 36 63 3b 20>> [14:39:14] Finished 'deploy2' after 81 ms

Let' take a deeper look on what exactly happens with files when copied

Edit console.log

gulp.task('deploy2', function() { console.log("deploy task is running!"); return gulp.src('app/**/*.*') .on('data', function(file) { console.log({ contents: file.contents, path: file.path, cwd: file.cwd, base: file.base, // path component helpers relative: file.relative, dirname: file.dirname, basename: file.basename, stem: file.stem, extname: file.extname }); }) .pipe(gulp.dest('dest')); });

gulp deploy

[15:19:05] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js [15:19:05] Starting 'deploy2'... deploy2 task is running! { contents: <Buffer 0d 0a 0d 0a 3c 21 2d 2d 20 30 31 30 5f 63 73 73 5f 69 6e 63 20 2d 2d 3e 0d 0a 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0d 0a 3c 68 74 6d 6c 20 6c ... >, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\index.html', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'index.html', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', basename: 'index.html', stem: 'index', extname: '.html' } { contents: <Buffer 40 69 6d 70 6f 72 74 20 22 6e 6f 72 6d 61 6c 69 7a 65 2e 63 73 73 22 3b 0d 0a 40 69 6d 70 6f 72 74 20 22 62 61 73 65 2f 5f 67 6c 6f 62 61 6c 22 3b 0d ... >, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app\\assets\\styles\\style.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'assets\\styles\\style.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app\\assets\\styles', basename: 'style.css', stem: 'style', extname: '.css' } { contents: <Buffer 2f 2a 21 20 6e 6f 72 6d 61 6c 69 7a 65 2e 63 73 73 20 76 38 2e 30 2e 31 20 7c 20 4d 49 54 20 4c 69 63 65 6e 73 65 20 7c 20 67 69 74 68 75 62 2e 63 6f ... >, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app\\temp\\styles\\style.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'temp\\styles\\style.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app\\temp\\styles', basename: 'style.css', stem: 'style', extname: '.css' } { contents: <Buffer 68 74 6d 6c 2c 20 62 6f 64 79 20 7b 70 61 64 64 69 6e 67 3a 30 3b 20 6d 61 72 67 69 6e 3a 30 3b 7d>, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app\\assets\\styles\\base\\_global.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'assets\\styles\\base\\_global.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app\\assets\\styles\\base', basename: '_global.css', stem: '_global', extname: '.css' } { contents: <Buffer 2f 2a 20 48 65 69 48 65 69 2e 72 75 20 46 69 6e 6c 61 6e 64 20 2a 2f 0d 0a 2f 2a 20 24 66 69 6e 42 6c 75 65 3b 20 2d 20 66 69 6e 6e 69 73 68 20 66 6c ... >, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules\\_finnish_colors.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'assets\\styles\\modules\\_finnish_colors.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules', basename: '_finnish_colors.css', stem: '_finnish_colors', extname: '.css' } { contents: <Buffer 68 74 6d 6c 2c 20 62 6f 64 79 20 7b 70 61 64 64 69 6e 67 3a 30 3b 20 6d 61 72 67 69 6e 3a 30 3b 7d>, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules\\_general.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'assets\\styles\\modules\\_general.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules', basename: '_general.css', stem: '_general', extname: '.css' } { contents: <Buffer 2f 2a 20 48 65 69 48 65 69 2e 72 75 20 46 69 6e 6c 61 6e 64 20 2a 2f 0d 0a 2f 2a 20 23 39 45 31 42 33 34 20 d1 8f d1 80 d0 ba d0 be 2d d0 ba d1 80 d0 ... >, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules\\_topmenu-old.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'assets\\styles\\modules\\_topmenu-old.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules', basename: '_topmenu-old.css', stem: '_topmenu-old', extname: '.css' } { contents: <Buffer 23 6d 65 6e 75 2c 20 23 73 74 61 74 69 63 30 31 20 2c 20 23 73 74 61 74 69 63 30 32 2c 0d 0a 23 73 74 61 74 69 63 30 33 20 2c 23 73 74 61 74 69 63 30 ... >, path: 'C:\\Users\\ao\\Desktop\\Sites \\heihei\\app\\assets\\styles\\modules\\_topmenu.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'assets\\styles\\modules\\_topmenu.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules', basename: '_topmenu.css', stem: '_topmenu', extname: '.css' } { contents: <Buffer 24 66 69 6e 42 6c 75 65 3a 20 23 30 30 32 66 36 63 3b 20>, path: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules\\_variables.css', cwd: 'C:\\Users\\ao\\Desktop\\Sites\\heihei', base: 'C:\\Users\\ao\\Desktop\\Sites\\heihei\\app', relative: 'assets\\styles\\modules\\_variables.css', dirname: 'C:\\Users\\ao\\Desktop\\Sites\\heihei \\app\\assets\\styles\\modules', basename: '_variables.css', stem: '_variables', extname: '.css' } [15:19:05] Finished 'deploy2' after 78 ms

path - path to file

cwd - directory where script was started

Specs

gulpjs.com/docs/en/api/src

Copy with FTP

Manual on sending files with ftp can be found here

Related Articles
Gulp
Concat multiple css to one
Send files via ftp with Gulp
Gulp series
Process only changed files with gulp.watch().on('change')
Copy Directory Gulp
Video Tutorials
JavaScript
NodeJS
NPM
Web