gulp-minify-inline's Introduction

gulp-minify-inline

gulp-minify-inline is a gulp plugin to uglify inline scripts and minify inline styles. Works best with gulp-minify-html.

Uses cheerio to parse HTML, UglifyJS2 to uglify JS code and clean-css to minify CSS code.

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev gulp-minify-inline

Usage

Straightforward way:

var minifyInline = require('gulp-minify-inline');

gulp.task('minify-inline', function() {
  gulp.src('src/*.html')
    .pipe(minifyInline())
    .pipe(gulp.dest('dist/'))
});

Need a bit more control?

var minifyInline = require('gulp-minify-inline');

var options = {
	js: {
		output: {
			comments: true
		}
	},
	jsSelector: 'script[type!="text/x-handlebars-template"]',
	css: {
		keepSpecialComments: 1
	},
	cssSelector: 'style[do-not-minify!="true"]'
};

gulp.task('minify-inline', function() {
  gulp.src('src/*.html')
    .pipe(minifyInline(options))
    .pipe(gulp.dest('dist/'))
});

Options

Right now the following options are supported:

js contains parameters to pass to UglifyJS2 (for documetation refer to the project homepage). Set it to false to disable JS uglification globally.
jsSelector passed to cheerio as a selector for script tags. This allows you to avoid uglification of certain script tags (e.g. ones containing templates or other non-JS payload). Default: 'script'.
css contains parameters to pass to clean-css (for documetation refer to the project homepage). Set it to false to disable CSS minification globally.
cssSelector passed to cheerio as a selector for style tags. This allows you to avoid minification of certain style tags. Default: 'style'.