Automatically copy files to another folder with gulp

There are times when using a front-end JavaScript framework and running a production build in a 'dist' folder, that there will be a 'public' folder in a separate root and location. Initially it could be a copy and paste by hand but this becomes very repetitive, but with 'gulp' this can be made an automatic process every time you update the 'dist' folder.

Now this tutorial is based on you already having knowledge of setting up projects via 'npm' for example using frameworks such as 'angular', 'vuejs'. If not there are other tutorials on this website that go through the very basics of setup and installation.

 Install Gulp

First let's install 'Gulp' globally by opening up terminal and entering the following.

npm install gulp -g
npm install gulpjs/gulp-cli -g

Now let’s install it locally to our project folder.

cd your-project-directory
npm install gulp

Now you may ask why am I installing this twice? Well it works on the basis that you can use it globally for all your user command lines but also when migrating projects with node it won't cause any difficulties for gulp and its extended dependencies.

 Install gulp dependency

Now we need to install 'gulp-watch' which will check for any amended files in the build folder and keep looping.

npm install --save-dev gulp-watch

 Create automated gulp tasks

Now let's create the 'gulpfile.js' file and open it in your chosen code editing application.

touch gulpfile.js
open -a "Adobe Dreamweaver CC 2018" /your-project-directory/gulpfile.js

In the file set your source folder (dist) and the destination folder (public). We are also tagging our task to the 'default' which is called every time you use 'gulp' in the terminal - otherwise you could just use 'gulp watch-amended-folder'.

var gulp = require('gulp');

// Keeps watching for amended files
var watch = require('gulp-watch');

var paths = {
    source: './dist',
    destination: './public'
};

gulp.task('default', ['watch-amended-folder']);

gulp.task('watch-amended-folder', function() {

    return gulp.src(paths.source + '/**/*', {base: paths.source})
        .pipe(watch(paths.source, {base: paths.source}))
        .pipe(gulp.dest(paths.destination));
});

So let's see it working in the terminal and create 2 tabs.

Terminal Tab 1

cd your-project-directory
gulp

// Should output
[17:47:47] Using gulpfile /your-project-directory/gulpfile.js
[17:47:47] Starting 'watch-amended-folder'...

Terminal Tab 2 (example)

cd your-project-directory
npm run build

You should see the directory replace the files in the public folder every time you call 'npm run build'.

 What is happens if you want to clear the contents of the destination folder?

Install the dependency 'gulp-clean-dest'.

npm install --save-dev gulp-clean-dest

Then open the 'gulpfile.js' file again.

var gulp = require('gulp');

// Keeps watching for amended files
var watch = require('gulp-watch');
// Clears the destination folder
var cleanDest = require('gulp-clean-dest');

var paths = {
    source: './dist',
    destination: './public'
};

gulp.task('default', ['watch-amended-folder']);

gulp.task('watch-amended-folder', function() {

    return gulp.src(paths.source + '/**/*', {base: paths.source})
        .pipe(watch(paths.source, {base: paths.source}))
        .pipe(cleanDest(paths.destination))
        .pipe(gulp.dest(paths.destination));
});

Hope this has been a nice starting point.