• Stars
    star
    388
  • Rank 110,734 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Rewrite occurences of filenames which have been renamed by gulp-rev

gulp-rev-replace Build Status

Rewrite occurrences of filenames which have been renamed by gulp-rev

Note: this package is no longer maintained. Development continues in TheDancingCode/gulp-rev-rewrite.

Install

$ npm install --save-dev gulp-rev-replace

Usage

Pipe through a stream which has both the files you want to be updated, as well as the files which have been renamed.

For example, we can use gulp-useref to concatenate assets in an index.html, and then use gulp-rev and gulp-rev-replace to cache-bust them.

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');

gulp.task("index", function() {
  var jsFilter = filter("**/*.js", { restore: true });
  var cssFilter = filter("**/*.css", { restore: true });
  var indexHtmlFilter = filter(['**/*', '!**/index.html'], { restore: true });

  return gulp.src("src/index.html")
    .pipe(useref())      // Concatenate with gulp-useref
    .pipe(jsFilter)
    .pipe(uglify())             // Minify any javascript sources
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso())               // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(indexHtmlFilter)
    .pipe(rev())                // Rename the concatenated files (but not index.html)
    .pipe(indexHtmlFilter.restore)
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('public'));
});

It is also possible to use gulp-rev-replace without gulp-useref:

var rev = require("gulp-rev");
var revReplace = require("gulp-rev-replace");
gulp.task("revision", ["dist:css", "dist:js"], function(){
  return gulp.src(["dist/**/*.css", "dist/**/*.js"])
    .pipe(rev())
    .pipe(gulp.dest(opt.distFolder))
    .pipe(rev.manifest())
    .pipe(gulp.dest(opt.distFolder))
})

gulp.task("revreplace", ["revision"], function(){
  var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");

  return gulp.src(opt.srcFolder + "/index.html")
    .pipe(revReplace({manifest: manifest}))
    .pipe(gulp.dest(opt.distFolder));
});

API

revReplace(options)

options.canonicalUris

Type: boolean

Default: true

Use canonical Uris when replacing filePaths, i.e. when working with filepaths with non forward slash (/) path separators we replace them with forward slash.

options.replaceInExtensions

Type: Array

Default: ['.js', '.css', '.html', '.hbs']

Only substitute in new filenames in files of these types.

options.prefix

Type: string

Default: ``

Add the prefix string to each replacement.

options.manifest

Type: Stream (e.g., gulp.src())

Read JSON manifests written out by rev. Allows replacing filenames that were reved prior to the current task.

options.modifyUnreved, options.modifyReved

Type: Function

Modify the name of the unreved/reved files before using them. The filename is passed to the function as the first argument.

For example, if in your manifest you have:

{"js/app.js.map": "js/app-98adc164.js.map"}

If you wanted to get rid of the js/ path just for .map files (because they are sourcemaps and the references to them are relative, not absolute) you could do the following:

function replaceJsIfMap(filename) {
    if (filename.indexOf('.map') > -1) {
        return filename.replace('js/', '');
    }
    return filename;
}

return gulp.src(opt.distFolder + '**/*.js')
    .pipe(revReplace({
        manifest: manifest,
        modifyUnreved: replaceJsIfMap,
        modifyReved: replaceJsIfMap
    }))
    .pipe(gulp.dest(opt.distFolder));

Contributors

  • Chad Jablonski
  • Denis Parchenko
  • Evgeniy Vasilev
  • George Song
  • Håkon K. Eide
  • Juan Lasheras
  • Majid Burney
  • Simon Ihmig
  • Vincent Voyer
  • Bradley Abrahams

License

MIT © James K Nelson

More Repositories

1

create-react-blog

Start and deploy your own statically rendered blog with create-react-app
JavaScript
548
star
2

starter-kit

Project boilerplate using React, Redux and Uniloc
JavaScript
467
star
3

govern

Component-based state management for JavaScript.
TypeScript
266
star
4

react-pacomo

Automatic Namespacing for your React className props
JavaScript
193
star
5

javascript-cheatsheets

A collection of cheatsheets for JavaScript
HTML
177
star
6

webpack-black-triangle

A minimal webpack/ES6 project template with a spinning black triangle
JavaScript
166
star
7

memamug-client

Memamug helps you remember faces. Written with React, Maxim & Rails.
JavaScript
109
star
8

react-zen

React utilities for working with APIs
TypeScript
108
star
9

uniloc

Universal JavaScript Route Parsing and Generation
JavaScript
95
star
10

raw-react-part-1

Learn Raw React - No JSX, Flux, ES6, Webpack, ...
JavaScript
74
star
11

memamug-server

Memamug helps you remember faces. Written with React, Maxim & Rails
Ruby
68
star
12

use-codemirror

CodeMirror support for React
JavaScript
66
star
13

retil

The React Utility Library
TypeScript
46
star
14

maxim

Maxim provides a simple way to structure JavaScript applications, letting you focus on the parts that matter.
JavaScript
45
star
15

pacomo

A Method For Structuring Stylesheets in React-based Applications
42
star
16

cura-firebase-example

A React/Firebase starter with serverless SSR, routing and styled components.
JavaScript
29
star
17

reactjs.tokyo

Source for reactjs.tokyo. Built with universal-react-scripts and Firebase.
JavaScript
28
star
18

raw-react-part-2

Solution for Learn Raw React: Ridiculously Simple Forms
JavaScript
26
star
19

react-black-triangle

An opiniated React starter kit. Clone, follow the README, and have a working app in under two minutes.
JavaScript
26
star
20

sitepack

A JavaScript tool for building static web sites.
JavaScript
25
star
21

react-cx

Combine styles from CSS Modules with a `cx` prop.
JavaScript
24
star
22

react-base

Higher order component to handle merging callbacks, prefixing classnames and props passthrough.
JavaScript
21
star
23

raw-react-part-3

Learn Raw React - Routing
JavaScript
19
star
24

armo-breadboard

Themeable live coding for React.
JavaScript
16
star
25

popup-trigger

A helper for triggering popups on focus, hover, and selection.
TypeScript
15
star
26

memcord

Memcords let you pass Records as React props without breaking PureComponent.
TypeScript
14
star
27

mdx-loader

Webpack loader for MDX (i.e. JSX-infused Markdown) using mdx-it
JavaScript
14
star
28

react-typescript-firebase-navi

A starter kit to get you started faster than all the other starter kits 🚅🔥🚀🍒
TypeScript
13
star
29

vouch.chat

JavaScript
11
star
30

derby-i18n

i18n support for derby.js
JavaScript
10
star
31

numbat-ui

CSS
10
star
32

use-promised-state

A state hook for React that doesn't whinge if used once used after unmount.
JavaScript
9
star
33

react-controllers

Utilities for creating React controller components
TypeScript
9
star
34

react-c

An implementation of Pacomo, a system to help structure your React stylesheets.
JavaScript
9
star
35

universal-react-app

A server-rendered starter forked from create-react-app
JavaScript
8
star
36

use-sx

Composable styles for React
TypeScript
8
star
37

node-joyo-kanji

A list of the Joyo Kanji packaged for node.js
8
star
38

react-routing-library

Concurrent routing that grows with your app.
TypeScript
7
star
39

firebase-react-demo

A simple demo of adding Firebase Functions/Hosting to a Create React App project
JavaScript
6
star
40

react-elemap

A tool for transforming React elements.
JavaScript
5
star
41

react-armory-helpers

Packages that can used with ES6 `import` within React Armory guides
4
star
42

static-directory-loader

Copy files into your public directory with a webpack import
JavaScript
4
star
43

react-junctions

JavaScript
3
star
44

meteor-yaml

Meteor smart package for YAML parsing/generation
JavaScript
2
star
45

mdx-cra-demo

JavaScript
2
star
46

junctions-react-app

A demo project using Junctions in the structure generated by Create React App
JavaScript
2
star
47

react-base-control

Higher order component to manage control-related events and state.
JavaScript
2
star
48

numbat-ui-example

JavaScript
1
star
49

angular-deputy

Resources with associations, computed values and offline support for AngularJS
CoffeeScript
1
star
50

m-and-c-in-mvc-talk

CSS
1
star
51

now-cura

Now builder for Create Universal React App
TypeScript
1
star
52

junctions-tutorial

Companion repo for the Junctions tutorial
JavaScript
1
star
53

armo

React stuff
JavaScript
1
star
54

vouch-landing

A landing page built in 2 hours with React and Firebase
JavaScript
1
star