Gulp-rewrite-resources NPM

rewrite resources and update references

gulp plugin that rewrites resources based on checksum and update references

Install

npm install --save-dev gulp-rewrite-resources

API

rewriteResources()

rewriteResources.resources(options)

options

base

Type: string Default: null

Used when rewriting references.

destination

Type: string Default: null

Used as output directory for assets.

flatten

Type: boolean Default: false

Flatten long assets path some/very/long/path/file.ext to (base)/(destination)/(file.ext)

rewriteResources.revisions()

Basic example

gulp

Please see the guide below for optimized workflow.

This basic example is not optimized for development workflow where you would like to build as fast as possible.

gulpfile.babel.js with gulp 4 syntax

import gulp from 'gulp';
import rewriteResources from 'gulp-rewrite-resources';

// process stylesheet files and rewrite
gulp.task('stylesheet', () => {
  return gulp.src('src/*.css')
  // built/css/main.396c5c28.css references src/android.svg as assets/android.c9c6ee7c.svg
  .pipe(rewriteResources.resources({destination: 'assets', base:'css'}))
  .pipe(gulp.dest('built/css'));
});

// process javascript files and rewrite
gulp.task('javascript', () => {
  return gulp.src('src/*.js')
  // built/index.html references src/main.js as main.4bc532d5.js
  .pipe(rewriteResources.resources({destination: '', base:''}))
  .pipe(gulp.dest('built'));
});

// process index.html and rewrite to reference the rewritten resources
gulp.task('html', () => {
  return gulp.src('src/index.html')
  // all references are rewritten here, see the output in example below.
  .pipe(rewriteResources.revisions())
  .pipe(gulp.dest('built'));
});

// default task
gulp.task('default', gulp.series(
  'stylesheet',
  'javascript',
  'html'
));

source before

src/index.html

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="main.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>

src/main.css

.android {
background-image: url(android.svg);
}

src/main.js

export function main() {}

src/android.svg

<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M685 483q16 0 27.5-11.5t11.5-27.5-11.5-27.5-27.5-11.5-27 11.5-11 27.5 11 27.5 27 11.5zm422 0q16 0 27-11.5t11-27.5-11-27.5-27-11.5-27.5 11.5-11.5 27.5 11.5 27.5 27.5 11.5zm-812 184q42 0 72 30t30 72v430q0 43-29.5 73t-72.5 30-73-30-30-73v-430q0-42 30-72t73-30zm1060 19v666q0 46-32 78t-77 32h-75v227q0 43-30 73t-73 30-73-30-30-73v-227h-138v227q0 43-30 73t-73 30q-42 0-72-30t-30-73l-1-227h-74q-46 0-78-32t-32-78v-666h918zm-232-405q107 55 171 153.5t64 215.5h-925q0-117 64-215.5t172-153.5l-71-131q-7-13 5-20 13-6 20 6l72 132q95-42 201-42t201 42l72-132q7-12 20-6 12 7 5 20zm477 488v430q0 43-30 73t-73 30q-42 0-72-30t-30-73v-430q0-43 30-72.5t72-29.5q43 0 73 29.5t30 72.5z"/></svg>

source after

Notice that stylesheet references are updated and files are renamed automatically.

built/index.html

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="css/main.396c5c28.css">
</head>
<body>
<script src="main.4bc532d5.js"></script>
</body>
</html>

built/css/main.396c5c28.css

.android {
background-image: url(assets/android.c9c6ee7c.svg);
}

built/main.4bc532d5.js

function main() {}

built/css/assets/android.c9c6ee7c.svg

<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M685 483q16 0 27.5-11.5t11.5-27.5-11.5-27.5-27.5-11.5-27 11.5-11 27.5 11 27.5 27 11.5zm422 0q16 0 27-11.5t11-27.5-11-27.5-27-11.5-27.5 11.5-11.5 27.5 11.5 27.5 27.5 11.5zm-812 184q42 0 72 30t30 72v430q0 43-29.5 73t-72.5 30-73-30-30-73v-430q0-42 30-72t73-30zm1060 19v666q0 46-32 78t-77 32h-75v227q0 43-30 73t-73 30-73-30-30-73v-227h-138v227q0 43-30 73t-73 30q-42 0-72-30t-30-73l-1-227h-74q-46 0-78-32t-32-78v-666h918zm-232-405q107 55 171 153.5t64 215.5h-925q0-117 64-215.5t172-153.5l-71-131q-7-13 5-20 13-6 20 6l72 132q95-42 201-42t201 42l72-132q7-12 20-6 12 7 5 20zm477 488v430q0 43-30 73t-73 30q-42 0-72-30t-30-73v-430q0-43 30-72.5t72-29.5q43 0 73 29.5t30 72.5z"/></svg>

Optimized example

For faster builds in your workflow you should consider having tasks that rewrites the built folder.

gulp

gulpfile.babel.js with gulp 4 syntax

import gulp from 'gulp';
import rewriteResources from 'gulp-rewrite-resources';
import del from 'del';

// cleanup built-optimized folder
gulp.task('optimize-cleanup', () => {
  return del('built-optimized/**/*')
});

// process stylesheet files and rewrite
gulp.task('optimize-stylesheet', () => {
  return gulp.src('built/**/*.css')
  .pipe(rewriteResources.resources())
  .pipe(gulp.dest('built-optimized'));
});

// process javascript files and rewrite
gulp.task('optimize-javascript', () => {
  return gulp.src('built/**/*.js')
  .pipe(rewriteResources.resources())
  .pipe(gulp.dest('built-optimized'));
});

// process index.html and rewrite to reference the rewritten resources
gulp.task('optimize-html', () => {
  return gulp.src('built/index.html')
  .pipe(rewriteResources.revisions())
  .pipe(gulp.dest('built-optimized'));
});

// optimize must run last after all build tasks.
gulp.task('optimize', gulp.series(
  'optimize-cleanup',
  'optimize-stylesheet',
  'optimize-javascript',
  'optimize-html'
));

crc event-stream gulp-rename gulp-rewrite-css gulp-util through2 url

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago