gs

gulp-smoosher

Inline css and js links with file contents

Showing:

Popularity

Downloads/wk

184

GitHub Stars

34

Maintenance

Last Commit

5yrs ago

Contributors

4

Package

Dependencies

6

Size (min+gzip)

26.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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>
...

NOTE: Make sure to wrap the tags you want to be imported with the smoosh and endsmoosh comments.

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
  • lneves12

License

MIT © Gabriel Florit

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial