Rewrite file references relative to the current file in the stream. Pass gulp-relate an object containing containing a handle used in the source and the path it should rewrite to.

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="assets//css/styles.css">
</head>
<body>
  <p>Oh. My. Glob.</p>
</body>
</html>

gulpfile.js

var gulp = require('gulp');
var relate = require('gulp-relate');

gulp.task('page', function() {
  return gulp.src('./src/*.html')
    .pipe(gulp.dest('./app/'))
    .pipe(relate({assets: './app/assets/'}))
    .pipe(gulp.dest('./app/'))
});

This comes in hand especially well with stream-based template systems, where assets are referenced in layouts and partials agnostic to any specific rendered file. For example, gulp-relate was conceived with this issue in mind from working with Nunjucks.

var gulp = require('gulp');
var data = require('gulp-data');
var fm = require('front-matter');
var render = require('gulp-nunjucks-render');

gulp.task('render', function() {
  return gulp.src('./src/*.html')
    .pipe(data(function(file){
       var content = fm(String(file.contents));
       file.contents = new Buffer(content.body);
       return content.attributes;
    }))
    .pipe(render())
    .pipe(gulp.dest('./app/'))
    .pipe(relate({
      assets: './app/assets/'
    }))
    .pipe(gulp.dest('./app/'))
});

FAQs

What is gulp-relate?

Is gulp-relate popular?

Is gulp-relate well maintained?

Package last updated on 16 Oct 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

gulp-relate

gulp-relate

Usage

Related posts

Author Typosquatting on npm: Attackers Impersonate Sindre Sorhus with Malicious ‘chalk-node’ Package

Supply Chain Attack on LottieFiles Player Caused by Compromised npmjs Credentials