gulp-usemin

gulp-usemin

Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).

This task is designed for gulp 3.

Attention: v0.2.0 dont minify files by default.

Usage

First, install gulp-usemin as a development dependency:

npm install --save-dev gulp-usemin

Then, add it to your gulpfile.js:

var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');
var minifyHtml = require('gulp-minify-html');
var minifyCss = require('gulp-minify-css');

gulp.task('usemin', function() {
  gulp.src('./*.html')
    .pipe(usemin({
      cssmin: minifyCss(),
      htmlmin: minifyHtml(),
      jsmin: uglify()
    }))
    .pipe(gulp.dest('build/'));
});

API

Blocks

Blocks are expressed as:

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

• type: either js or css
• alternate search path: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
• path: the file path of the optimized file, the target output

An example of this in completed form can be seen below:

<!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

Options

cssmin

Type: Object

Plugin for minify output css.

htmlmin

Type: Object

Plugin for minify output html.

jsmin

Type: Object

Plugin for minify output js.

Use case

|
+- app
|   +- index.html
|   +- assets
|       +- js
|          +- foo.js
|          +- bar.js
|   +- css
|       +- clear.css
|       +- main.css
+- dist

We want to optimize foo.js and bar.js into optimized.js, referenced using relative path. index.html should contain the following block:

    <!-- build:css style.css -->
    <link rel="stylesheet" href="css/clear.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <!-- endbuild -->

    <!-- build:js js/optimized.js -->
    <script src="assets/js/foo.js"></script>
    <script src="assets/js/bar.js"></script>
    <!-- endbuild -->

We want our files to be generated in the dist directory. gulpfile.js should contain the following block:

gulp.task('usemin', function(){
  gulp.src('./app/index.html')
    .pipe(usemin({jsmin: uglify()}))
    .pipe(gulp.dest('dist/'));
});

This will generate the following output:

|
+- app
|   +- index.html
|   +- assets
|       +- js
|          +- foo.js
|          +- bar.js
+- dist
|   +- index.html
|   +- js
|       +- optimized.js
|   +- style.css

index.html output:

    <link rel="stylesheet" href="style.css"/>

    <script src="js/optimized.js"></script>