Gulp-gotohead NPM

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`