tris-gulp-boilerplate — less think, more code 👩‍💻👨‍💻

This gulp.js boilerplate takes all the hassle out of setting up a project — it has all the necessary tools and optimizations ready to go for your website. It will help you rank higher on Google by solving issues that arise when testing your site on Google Page Speed Insights, those issues being:

• Eliminating render-blocking JavaScript and CSS in above-the-fold content
• Minifying HTML/CSS/JavaScript
• Optimizing images
• Prioritizing visible above-the-fold content
• Reducing server response time

Enabling Compression and Leveraging Browser Caching are achieved through methods unrelated to this boilerplate. Read this and this for more info. You won't achieve a 100/100 optimization score until you implement these, but you'll at least be up to 90 without them!

---

Quick start:

You need git and node.js on your computer before running

1. git clone https://github.com/tr1s/tris-gulp-boilerplate.git
2. npm install
3. gulp

You're all set, start coding!

Take a look at the gulpfile.js and/or read below for a better understanding of what's going on under the hood.

Features:

1. Browser-Sync + Live reloading
2. HTML/CSS/JavaScript minification
3. CSS autoprefixing
4. JavaScript ES6 to ES5 conversion + concatenation
5. Image optimization
6. Prioritize above-the-fold content with inline styles
7. Webfont loading

Gulp tasks explained:

Keep an eye on the ordering of the .pipe to have a clear idea of what's going on in these tasks that are in the gulpfile.js

---

const gulp = require('gulp');

Browser-Sync + Live Reloading

const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: ''
        },
    })
});

gulp.task('watch', ['browser-sync'], () => {
    gulp.watch('*.html', reload)
    gulp.watch('dev/styles/**/*.scss', ['sass'])
    gulp.watch('dev/scripts/**/*.js', ['scripts'])
});

The watch task watches for changes on all the .html, .scss, and .js files, while also recompiling the .scss and .js before it triggers the live reload. The html doesn't need to recompile, hence why it only has reload beside it. The sass and scripts task have the reload piped at the end of each respective gulp task like so - .pipe(reload({ stream: true }))

HTML

const htmlmin = require('gulp-htmlmin');

gulp.task('html', function () {
    return gulp.src('*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('public/'))
});

The html task grabs the source index.html from the root folder, minifies it, then outputs minified index.html in the public/ folder.

Sass

const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');

gulp.task('sass', () => {
    return gulp.src('dev/styles/styles.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer('last 2 versions'))
        .pipe(cleanCSS())
        .pipe(gulp.dest('public/styles/'))
        .pipe(reload({ stream: true }))
});

The sass task grabs the source .scss file and converts it all to css, then autoprefixes the css, then minifies the css, then outputs a styles.css file inside the public/styles/ folder for you to link from the index.html. After all that it reloads the page on save.

Scripts

const concat = require('gulp-concat');
const babel = require('gulp-babel');
const minify = require('gulp-babel-minify');

gulp.task('scripts', () => {
    gulp.src(['dev/scripts/smooth-scroll.js', 'dev/scripts/script.js'])
        .pipe(concat('all.js'))
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(minify({
            mangle: {
                keepClassName: true
            }
        }))
        .pipe(gulp.dest('public/scripts/'))
        .pipe(reload({ stream: true }))
});

The scripts task grabs the source JavaScript files (order matters depending on what scripts are dependent on what) and concatenates them to all.js — this reduces server response time because the browser will only need to grab one .js file instead of many. The task then uses babel to convert all.js from ES6 to ES5, then minifies, then outputs to public/scripts/ while finally reloading the page on save.

Image optimization

const imagemin = require('gulp-imagemin');

gulp.task('images', () =>
    gulp.src('dev/images/*')
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('public/images/'))
);

This task grabs all images in the dev/images/ folder, reduces the file size without altering the quality of the images, then outputs the new images in the public/images folder. Again, this is different from compression.

Webfont loading

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

WebFont.load({
  google: {
    families: ['Hind:300,600,700']
  }
});

Load fonts through Google's Webfont loader as opposed to using link tags in the header which leads to render blocking CSS. Check out their GitHub for more info.

Prioritizing above-the-fold content

Use critical to inject inline styles for above-the-fold content on your website.

const critical = require('critical');

gulp.task('critical', function () {
    critical.generate({
        inline: true,
        base: 'public/',
        src: 'index.html',
        width: 1300,
        height: 900,
        css: 'public/styles/styles.css',
        dest: 'index-critical.html',
        minify: true,
        extract: true
    });
});

The index-critical.html will generate in the public folder, simply rename it to index.html and upload it to your hosting server if you'd like to use this feature. Here's their GitHub for further reading.

---

Hope this helped! Follow me on twitter if you'd like. 💎✨🌸