• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About

Copying Files From One Folder To Another In Gulp.js

Front End Development · July 20, 2014

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.

Dwayne

12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jolan Green
Jolan Green
6 years ago

This is amazing, I can’t believe how simple this was.

0
Damon
Damon
6 years ago

Using gulp.src(‘…’, {read:false}) will speed things up a ton

0
Diogo Nechtan
Diogo Nechtan
6 years ago

You can also use with gulp-flatten, to join all files in the same folder. (https://www.npmjs.org/package/gulp-flatten)

var flatten = require(‘gulp-flatten’);
gulp.task(‘copy-index-html’, function() {
gulp.src(‘./index.html’, { read: false })
.pipe(flatten())
// Perform minification tasks, etc here
.pipe(gulp.dest(‘./public’));
});

0
Mike Graham
Mike Graham
5 years ago

Soon Aurelia will be able to load css and other resource files just like it loads javascript modules (via systemjs loader). So you just jspm install bootstrap and then you just require it in your html template. not sure that addresses your production scenario, but it is going to be very cool ๐Ÿ™‚ ๐Ÿ™‚

0
Ashley Grant
Ashley Grant
5 years ago

To expand on what @cmichaelgraham said, this is what the app.html file will look like in the next release of the Aurelia Skeleton:

0
Ashley Grant
Ashley Grant
5 years ago

Hmmm.. let’s try that again (thanks HTML stripper ๐Ÿ™‚ )

<template>
<require from=’nav-bar.html’></require>
<require from=”bootstrap/css/bootstrap.css”></require>

<nav-bar router.bind=”router”></nav-bar>

<div class=”page-host”>
<router-view></router-view>
</div>
</template>

0
mateu oliver
mateu oliver
5 years ago

Thank you for sharing. It has been very useful.

0
geremyAB
geremyAB
5 years ago

Thanks a lot for your post! helps me to build a task to implement fonts to my project with zurb foundation (https://github.com/zurb/foundation-icon-fonts/issues). Love Gulp!

0
vivek soni
vivek soni
5 years ago

Your copy font task copies the directory structure as well , is there any way to put all fonts directly inside build/fonts directory,

(currently it is putting fonts like build/fonts/font_awesome/fonts/fonts.ttf)

0
Mojo Blanco
Mojo Blanco
3 years ago

Exactly what I was looking for. Thanks

0
TAJG
TAJG
3 years ago

Perfect, simple, elegant and just what the doctor ordered!

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • Removing A Character From The Start/End of a String In Javascript
  • Removing Duplicate Objects From An Array By Property Name In Javascript
  • Microsoft Flight Simulator 2020 Settings for The HP Reverb G2 Headset and RTX 3070 Graphics Card
  • How To Convert FormData To JSON Object
  • How To Easily Mock Moment.js In Jest
  • Is Blazor The Future of Development?
  • A Tested (and working) Streamlabs OBS Display Capture Black Screen Fix
  • How To Mock uuid In Jest
  • An Honest Review of The Galaxycove Star Projector (read before you buy)

Recent Comments

  • imzi on NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Bubba Rodgers on Yarn Slow In Windows? Disable Windows Defender
  • Jacob Zwickler on How To Mock uuid In Jest
  • Elvis on Testing Event Listeners In Jest (Without Using A Library)
  • soumitra patra on Fixing WordPress 404 Custom Post Type Archive Pagination Issues with Posts Per Page

Copyright © 2021 ยท Dwayne Charrington ยท Log in

wpDiscuz