Replace build blocks in HTML. Like useref but done right.
Version 1.0 introduces streaming support, less confusing API, new option keepUnused and full code overhaul. It also introduces some breaking changes but don't worry, you won't be needed to change your code, it's just a bit different syntax.
- If you used single task like this:
htmlreplace('js', 'script.js')just change it tohtmlreplace({js: 'script.js'}) - If you used single task with template:
htmlreplace('js', 'script.js', '<script="%s">')change it tohtmlreplace({js: {src: 'script.js', tpl: '<script="%s">'}) filesrenamed tosrc, see previous example. Rename if needed.
That should be enough for you code to continue to work with the new version.
Install:
npm install --save-dev gulp-html-replacePut some blocks in your HTML file:
<!-- build:<name> -->
Everything here will be replaced
<!-- endbuild -->name is the name of the block. Could consist of letters, digits, underscore ( _ ) and hyphen ( - ) symbols.
Type: Object
{task-name: options}
- task-name - The name of the block in your HTML.
- options -
String|Array|ObjectThe replacement. See examples below.
// Options is a single string
htmlreplace({js: 'js/main.js'})
// Options is an array of strings
htmlreplace({js: ['js/monster.js', 'js/hero.js']})If your options strings ends with
.jsor.cssthey will be replaced by correct script/style tags, so you don't need to specify a template like in the example below.
// Options is an object
htmlreplace({
js: {
src: 'img/avatar.png',
tpl: '<img src="%s" align="left">'
}
})- src -
String|ArraySame thing as in simple example. - tpl -
StringTemplate string. Uses util.format() internally.
So, in the above example
%swill be replaced withimg/avatar.pngproducing<img src="img/avatar.png" align="left">as a result.
- Type:
Boolean - Default:
false
Whether to keep blocks with unused names or remove them.
index.html:
<!DOCTYPE html>
<html>
<head>
<!-- build:css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js -->
<script src="js/player.js"></script>
<script src="js/monster.js"></script>
<script src="js/world.js"></script>
<!-- endbuild -->gulpfile.js:
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
gulp.task('default', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'styles.min.css',
'js': 'js/bundle.min.js'
}))
.pipe(gulp.dest('build/'));
});Result:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<script src="js/bundle.min.js"></script>