gulp-gotohead

Put into the HEAD of a HTML document snippets of code CSS or Javascript.

Overview

If you care about your website performance, you surely care about CSS and JavaScript minification, probably image optimization too, but what about the rendering of all this, do you care? This Gulp plugin was made to help you with that.

When we separate the code of the visible content from the other it's possible to optimize the speed of rendering of the page, obtaining a gain in the overall performance.

Getting Started

This plugin require Gulp ~3.8.6

npm install --save-dev gulp-gotohead

The "gotohead" task

var gulp = require('gulp');
var gotohead = require('gulp-gotohead');
 
var styles = ['./public/css/style1.css', './public/css/style2.css'];
var scripts = ['./public/js/script1.js', './public/js/script2.js'];
 
gulp.task('Styles', function () {
    return gulp.src(styles)
    .pipe(gotohead({orig:'./public/index.html'}));
});
gulp.task('Scripts', ['Styles'], function () {
    return gulp.src(scripts)
    .pipe(gotohead({tag:'script', orig:'./public/index.html'}));
});
 
gulp.task('JadeStyles', function () {
    return gulp.src(styles)
    .pipe(gotohead({jade: true, orig:'./public/template.jade'}));
});
gulp.task('JadeScripts', ['Styles'], function () {
    return gulp.src(scripts)
    .pipe(gotohead({jade: true, tag:'script', orig:'./public/template.jade'}));
});
 
gulp.task('gotohead', ['Styles', 'Scripts', 'JadeStyles', 'JadeScripts']);
gulp.task('default', ['gotohead']);

Options

Nome	Valor
tag	String style or script. Default: style
jade	Boolean true or false. Default: false. Used to HTML wrote with Jade.
orig	String path/to/origin/file.html. Define the path to HTML file.
dest	String path/to/destiny/file.html. If not defined, will be the same that origin.
separator	String ; Default: \n

Extra

May be you are interested in compress your files before you put it into the HEAD, see an example of code in gulpfile.js.

Licence

MIT