gulp-html-replace's Introduction

gulp-html-replace

Replace build blocks in HTML with links to combined/compressed scripts or styles.

Usage

Install gulp-html-replace as a development dependency:

npm install --save-dev gulp-html-replace

Blocks in your HTML file should look like this:

<!-- build:<name> -->
...
<!-- endbuild -->

name is the replacement task name.

Syntax looks like this:

// single task name replacement
htmlreplace('js', 'scripts/bundle.min.js')

// single task with multiple files
htmlreplace('css', ['normalize.css', 'main.css'])

// multiple tasks
htmlreplace({
    'javascripts': 'bundle.js',
    'styles': ['style.css', 'new.css']
})

Correct tags will be determined automatically based on file extensions. Currently supported js and css.

Blocks with orphaned task names will be removed.

Example

index.html:

<!DOCTYPE html>
<html>
    <head>
    .....
    <!-- build:styles -->
    <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 htmlreplace = require('gulp-html-replace');

gulp.task('default', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'styles': '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>
    .....

Recommend Projects