gulp-smoosher

Inline css and js links with file contents

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
gulp-smoosher
0.0.98 years ago10 years agoMinified + gzip package size for gulp-smoosher in KB

Readme

gulp-smoosher Build Status
Replaces css and js links with file contents

Install

Install with npm
npm install --save-dev gulp-smoosher

Example

index.html

<html>
	<head>
		<!-- smoosh -->
		<link rel='stylesheet' href='styles.css'>
		<!-- endsmoosh -->
	</head>
...

styles.css

body {
	background: red;
}

Gulpfile.js

var gulp = require('gulp');
var smoosher = require('gulp-smoosher');

gulp.task('default', function () {
	gulp.src('index.html')
		.pipe(smoosher())
		.pipe(gulp.dest('dist'));
});

dist/index.html

<html>
	<head>
		<style>body {
			background: red;
		}</style>
	</head>
...

Options

Custom js/css tags

Pass in custom js/css tags, if so desired. Example:
var gulp = require('gulp');
var smoosher = require('gulp-smoosher');

gulp.task('default', function () {
	gulp.src('index.html')
		.pipe(smoosher({
			cssTags: {
				begin: '<p:style>',
				end: '</p:style>'
			},
			jsTags: {
				begin: '<p:script>',
				end: '</p:script>'
			}
		}))
		.pipe(gulp.dest('dist'));
});

will result in the following:
<html>
	<head>
		<p:style>body {
			background: red;
		}</p:style>
		<p:script>alert('Hello world!');</p:script>
	</head>
...

Custom base dir

Say your index.html is still in your src/ directory and files you intend to smoosh are already written to your dist/. In this case, specify a custom base to resolve your files from.
gulp.task('default', ['minifyCss', 'uglifyJs'], function () {
	gulp.src('src/index.html')
		.pipe(smoosher({
			base: 'dist'
		}))
		.pipe(gulp.dest('dist'));
});

Ignore files not found

When the option ignoreFilesNotFound is true the plugin will keep running even if it finds a nonexistent file:
gulp.task('default', function () {
	gulp.src('src/index.html')
		.pipe(smoosher({
			ignoreFilesNotFound: true
		}))
		.pipe(gulp.dest('dist'));
});

Notes

If you use grunt instead of gulp, but want to perform a similar task, use grunt-html-smoosher.

Contributors

  • Gabriel Florit
  • Andrew Shaffer
  • Jackson Ray Hamilton

License

MIT © Gabriel Florit