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

Keywords

FAQs

What is gulp-resource-hints?

Is gulp-resource-hints popular?

Is gulp-resource-hints well maintained?

Package last updated on 06 Jun 2017

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-resource-hints