gulp-usemin

Replace references from non-optimized scripts, stylesheets and other assets to their optimized version within a set of HTML files

Getting Started

This plugin requires Gulp ~3.8.10

If you haven't used Gulp before, be sure to check out the Getting Started guide, as it explains how to create a Gulpfile as well as install and use Gulp plugins. Once you're familiar with that process, you may install this plugin with this command:

1npm install gulp-usemin-html --save-dev

Once the plugin has been installed, it may be enabled inside your Gulpfile with this line of JavaScript:

1var htmlusemin = require('gulp-usemin-html')

The "htmlusemin" task

Overview

In your project's Gulpfile, add a section.

1gulp.task('htmlusemin', function() {
2    return gulp.src([basepath + '/source/**/*.html'])
3        .pipe(usemin({
4            js: {
5                suffix: '-min',
6                enable: true
7            },
8            css: {
9                suffix: '.min',
10                enable: true
11            }
12        }))
13        .pipe(gulp.dest(basepath + '/build/'));
14});

Options

options.js

Type: Object Default value: { suffix: '.min', enable: true }

options.css

Type: Object Default value: { suffix: '.min', enable: true }

Usage Examples

Replace the '.css' to '.min.css' and replace the '.js' to '.min.js' in HTML

In this example,replaces references from non-optimized scripts, stylesheets and other assets to their optimized version within a set of HTML files`

1gulp.task('htmlusemin', function() {
2    return gulp.src([basepath + '/source/**/*.html'])
3        .pipe(usemin({
4            js: {
5                suffix: '-min',
6                enable: true
7            },
8            css: {
9                suffix: '.min',
10                enable: true
11            }
12        }))
13        .pipe(gulp.dest(basepath + '/build/'));
14});

Release History

(Nothing yet)