gulp-breadcrumbs

A Gulp plugin that creates breadcrumbs for a site based on folder names.

e.g. if your site is example.org and you have a file called ~/htodcs/foo/bar/baz/index.html then (assuming htdocs is your root folder) the breadcrumbs output should look like this... example.org / foo / bar / baz

Install

npm install gulp-breadcrumbs --save-dev

Example

Using gulp-breadcrumbs

In your HTML create a placeholder for the breadcrumbs. The breadcrumbs is appended to the content of an element whose id is breadcrumbs. For example:

<nav id="breadcrumbs"></nav>

In gulpfile.js add

var gulp = require('gulp');
var breadcrumbs = require('breadcrumbs');
var config = {
    "ignore": 8,
    "msg": "<span title='Click here to go to the home page.'>Home</span>",
    "before": "<nav id='breadcrumbs'>"
}
 
// example task that uses breadcrumbs
gulp.task('breadcrumbs',
    function () {
        return gulp.src("**.*.html")
        .pipe(breadcrumbs())
        .pipe(gulp.dest('./dest/'));
    }
);face

Then run gulp breadcrumbs from the command line.

Configuration

The config object can be configured as follows:

ignore

An integer value that defines how many layers of the path from the root up should be ignored, so if your source code is in /a/b/c/d/e/f/g/h/subfolder/ then a to g would be ignored and the crumbs would read only "Home/subfolder" e.g. "ignore": 8

msg

The message to use for the home/root node. e.g. "msg": "<span title='Click here to go to the home page.'>Home</span>"

before

The text that should come immediately before the inserted breadcrumbs (so it should be unique in order that the breadcrumb generating code can find it and know where to stick the code). e.g. "before": "<nav id='breadcrumbs'>"

Contribute

Build

If you alter the source and wish to build it run you can get all the dependencies by running:

npm install

Thereafter, each rebuild should require only gulp or gulp watch.

Ideas

See the issues page if you have suggestions / questions.