Copying Files From One Folder To Another In Gulp.js

I absolutely love Gulp.js, I’ve all but used it as a replacement for Grunt as it feels a lot cleaner and requires significantly less configuration to get things happening.

Recently whilst installing Bootstrap and Font Awesome using Bower, I needed to copy the font files from the Bower package into the actual directory (because the bower_components won’t be on the live site and thus referencing the module files makes no sense).

Inside of my gulpfile.js I simply add in the following and it copies my fonts. Best of all, this method does not require any Gulp plugin or additional install. This is basic straight-up globbing and copying using streams.

gulp.task('copyfonts', function() {
   gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}')
   .pipe(gulp.dest('./fonts'));
});

What the above code will do is copy the Font Awesome font files to my local fonts directory so they can be referenced. This function can be used to copy any kind of files, I’m just using it for fonts.

Want to copy an index file from a source directory and do with it what you want? Perhaps minify it, strip out placeholder variables.

gulp.task('copy-index-html', function() {
    gulp.src('./index.html')
    // Perform minification tasks, etc here
    .pipe(gulp.dest('./public'));
});

The possibilities are endless. Because of Gulp’s approach to using streams, you can pipe files and folders, modify them and copy them to wherever you want within your web application.