When sourcing media for a site, the usual process will be to create a folder for fonts, another for images, and so on, if any part of the process is likely to fail, then it is likely to be with applying incorrect links in our code. The risk of this happening will of course increase if we have a particularly complex folder structure!

Instead, we can take an alternative approach: why not get PostCSS (or a plugin) to do the work for us?

We can use the postcss-assets plugin for this purpose; if we specify a name, it will look in the files relative to the source file, then file paths specified in the loadPaths configuration option, and finally search in the URL specified in the basePath config path. The beauty of this is that we can simply reference the image name, and provided PostCSS finds an image with the same name in one of these preassigned locations, then it will substitute in the appropriate path for us at compilation.

If a link needs to change, then no problem, we can either add a new one in, or modify the existing one; CSS styles will be updated at the next compilation. Let's put this into practice, using the postcss-assets plugin, in a simple demo.

Remember the moody landscape image from Chapter 4, Building Media Queries?

In our first example, we're going to rework this demo, but this time use the postcss-assets plugin (available from https://github.com/borodean/postcss-assets) to automate the insertion of links for all of our assets. We'll focus on images and fonts, but this can equally apply to media such as videos as well.

Here's a screenshot to remind ourselves of that image:

Let's make a start:

Okay, the image is displayed, along with the text in Roboto font, but how does it all work? It's worth taking a few moments to explore the code; setting it up correctly will help save you a lot of time!

Most of what is in the gulp file you will recognize from earlier demos—we've included the same linting, renaming, and source map creations as before. In addition to the new assets task (to handle our asset links), we've removed the autoprefixer task; we're not calling anything that requires vendor prefixes, so there is no need to use it.

The key process in the gulp file centers on this code—this creates, and substitutes in, the correct asset links. We start with the options configuration object—the loadPaths take care of the asset locations, and relativeTo tells the plugin to set relative links in relation to the dest/ folder. In this case, loadPaths defines specific folders to use; we use relativeTo to make these paths relative:

var options = {
  loadPaths: ['img/', 'fonts/'],
  relativeTo: 'dest/'
};

The dest/ folder is used in our creation process—in reality, this would be the location of our CSS style sheets on the production server. This next simple task simply calls the postcss-assets plugin, and processes each style sheet found in the src folder:

gulp.task('assets', function() {
  return gulp.src('src/*.css')
    .pipe(postcss([ assets(options) ]))
    .pipe(gulp.dest('dest/'));
});

We then simply call the task, if we were to call gulp from a command prompt, then it will run all of these tasks:

gulp.task('default', ['assets', 'lint-styles', 'rename', 'sourcemap']);

All in all, a very simple but highly effective tool, it removes the need to insert any links manually, provided we've included them within the configuration object.

Alright…let's move on: we've covered a simple method to ensure we always have the right links for font or image files. There is still an element of manual work required though—do we really need to include all of the lines added for our custom font?

Well, we could always just use a font hosted on Google, but that destroys the point of using PostCSS! Instead, we can simply use the custom font name in our style sheet, but get PostCSS to add in the custom font-face declaration automatically at compilation. Intrigued? Let's take a look at how, as part of our next exercise.