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.
This is amazing, I can’t believe how simple this was.
Using gulp.src(‘…’, {read:false}) will speed things up a ton
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’));
});
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 🙂 🙂
To expand on what @cmichaelgraham said, this is what the app.html file will look like in the next release of the Aurelia Skeleton:
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>
Thank you for sharing. It has been very useful.
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!
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)
Exactly what I was looking for. Thanks
Perfect, simple, elegant and just what the doctor ordered!