search

gabrielflorit / gulp-smoosher

Inline css and js links with file contents
MIT License
35 stars 6 forks source link

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

License

MIT © Gabriel Florit