• 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
  • Aurelia 2 Consulting/Freelance Work

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
8 years ago

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

0
Damon
Damon
8 years ago

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

0
Diogo Nechtan
Diogo Nechtan
8 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
7 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
7 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
7 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
7 years ago

Thank you for sharing. It has been very useful.

0
geremyAB
geremyAB
7 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
7 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
5 years ago

Exactly what I was looking for. Thanks

0
TAJG
TAJG
5 years ago

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

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 ยท Dwayne Charrington ยท Log in

wpDiscuz