README

gulp-resource-hints

Add resource hints to your html files

Introduction

Resource hints are a great way to reduce loading times on your progressive website. At the time of this writing, only Chrome has support for the major resource hints, but prefetch and dns-prefetch have fairly wide availability among browsers. Further reading here.

Install

$ npm install --save-dev gulp-resource-hints

Usage

(optional) place the string ##gulp-resource-hints## in each of your HTML files' <head>, ideally right after your last <meta> tag. If not provided, resource hints will be inserted after your last <meta> in your document's <head>, or prepended to <head>, whichever comes first.
Add gulp-resource-hints to one of your Gulp tasks to parse your HTML files for static and external assets, and prepend them with resource hints to their respective <head>.

const gulp = require('gulp')
const resourceHints = require('gulp-resource-hints')

gulp.task('resourceHints', function (cb) {
  return gulp.src('./app/**/*.html')
    .pipe(resourceHints())
    .pipe(gulp.dest('./dist/'))
})

Input example

app/index.html

<html>
  <head>
  ##gulp-resource-hints##
  </head>
  <body>

    <img src="asset/image1.jpg" alt="">
    <img src="asset/image2.jpg" alt="">
    <img src="asset/image3.png" alt="">
    <img src="asset/image4.svg" alt="">
  </body>
</html>

Output example

dist/index.html

<html>
  <head>
  <link rel="prefetch" href="asset/image1.jpg" /><link rel="prefetch" href="asset/image2.jpg" /><link rel="prefetch" href="asset/image3.png" /><link rel="prefetch" href="asset/image4.svg" />
  </head>
  <body>

    <img src="asset/image1.jpg" alt="">
    <img src="asset/image2.jpg" alt="">
    <img src="asset/image3.png" alt="">
    <img src="asset/image4.svg" alt="">
  </body>
</html>

Options

resourceHints([options])

options <Object> - see default options

pageToken <String> : add your own custom string replace token (default is ##gulp-resource-hints##)
silent <Boolean> : disable logs and warnings (default is false)
paths <Object> : custom string patterns for their respective resource hint.
- dns-prefetch <String> : custom URL pattern. Default is //* (all non-relative URLs)
- preconnect <String> : custom URL pattern.
- prerender <String> : custom glob pattern.
- prefetch <String> : custom glob pattern. Default is all locally-served fonts and images.
- preload <String> : custom glob pattern.

URL Patterns

Similar to glob, url patterns work like so:

// Example 1: single wildcard
var options = {
  paths: {
    'dns-prefetch': '*unpkg.com'
  }
}

'https://unpkg.com/react@15.3.1/dist/react.min.js' // match
'https://unpkg.com/history@4.2.0/umd/history.min.js' // match
'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' // no match

/* ----- */

// Example 2: comma-separated wildcards
var options {
  paths: {
    preconnect: '*unpkg.com,//cdnjs.cloudflare.com*'
  }
}

'https://unpkg.com/react@15.3.1/dist/react.min.js' // match
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js' // match
'https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js' // no match

Changelog

See latest release.

Did my package help you out? Let me know!

Twitter: @EnricoTrain | GitHub: theetrain | Email: enrico@theetrain.ca
Report an issue

gulp-resource-hintsdeprecated

Usage no npm install needed!