Catalyst: task automation boilerplate for experienced web developers

gulpfile.js

const gulp = require('gulp'),
    sync = require('browser-sync').create(),
    del = require('del'),
    minimist = require('minimist')(process.argv.slice(2)),
    $ = require('gulp-load-plugins')(),
    info = require('./package.json'),
    header = '/*! Built with Catalyst. */',
    staticFiles = gulp.src([
        'test/source/**/*',
        '!test/source/**/*.html',
        '!test/source/images/**/*',
        '!test/source/styles/**/*',
        '!test/source/scripts/**/*'
    ], { dot: true });

(() => {

    'use strict';

    gulp.task('clean', (callback) =>
        del(['test/build/', 'test/dist/']).then(() => callback));

    gulp.task('build:copy', ['clean'], () =>
        staticFiles.pipe(gulp.dest('test/build/')));

    gulp.task('build:templates', ['clean'], () =>
        gulp.src('test/source/**/*.html')
            .pipe($.plumber())
            .pipe($.specialHtml())
            .pipe(gulp.dest('test/build/')));

    gulp.task('build:fonts', ['clean'], () =>
        gulp.src('test/source/fonts/*.ttf')
            .pipe($.plumber())
            .pipe($.fontmin({ fontPath: '../fonts/' }))
            .pipe(gulp.dest('test/build/fonts')));

    gulp.task('build:images', ['clean'], () =>
        gulp.src('test/source/images/*')
            .pipe($.plumber())
            .pipe($.imagemin())
            .pipe(gulp.dest('test/build/images/'))
            .pipe($.jimp({
                '-1200': { resize: { width: 1200 } },
                '-992': { resize: { width: 992 } },
                '-768': { resize: { width: 768 } }
            }))
            .pipe($.imagemin())
            .pipe(gulp.dest('test/build/images/')));

    gulp.task('build:scripts', ['clean'], () =>
        gulp.src('test/source/scripts/**/*.js')
            .pipe($.plumber())
            .pipe($.eslint.format())
            .pipe($.babel({ presets: ['es2015'] }))
            .pipe(gulp.dest('test/build/scripts/')));

    gulp.task('build:styles', ['build:copy', 'build:templates', 'build:fonts', 'build:images', 'build:scripts'], () =>
        gulp.src(['test/source/styles/**/*.css', 'test/build/concat/**/*.css', 'test/build/fonts/**/*.css'])
            .pipe($.plumber())
            .pipe($.colorguard({ logOk: true }))
            .pipe($.autoprefixer())
            .pipe(gulp.dest('test/build/styles/'))
            .pipe(sync.reload({ stream: true, once: true })));

    gulp.task('dist:bundle', ['build:styles'], () =>
        gulp.src('test/build/**/*.html')
            .pipe($.useref())
            .pipe($.if('*.js', $.rev()))
            .pipe($.if('*.css', $.rev()))
            .pipe($.revReplace())
            .pipe(gulp.dest('test/dist/')));

    gulp.task('dist:images', ['dist:bundle'], () =>
        gulp.src('test/build/images/*')
            .pipe(gulp.dest('test/dist/images')));

    gulp.task('dist:favicons', ['dist:bundle'], () =>
        gulp.src('test/source/images/logo-square.png')
            .pipe($.favicons({
                background: '#020307',
                html: 'test/dist/index.html',
                developerURL: info.homepage,
                appName: info.name,
                appDescription: info.description,
                developerName: info.author,
                version: info.version
            }))
            .pipe(gulp.dest('test/dist/')));

    gulp.task('dist:copy', ['dist:images', 'dist:favicons'], () =>
        staticFiles.pipe(gulp.dest('test/dist/')));

    gulp.task('dist:templates', ['dist:images', 'dist:favicons'], () =>
        gulp.src('test/dist/**/*.html')
            .pipe($.htmlmin())
            .pipe(gulp.dest('test/dist/'))
            .pipe($.sitemap({ siteUrl: info.homepage }))
            .pipe(gulp.dest('test/dist/')));

    gulp.task('dist:fonts', ['dist:images', 'dist:favicons'], () =>
        gulp.src(['test/build/fonts/*', '!test/build/fonts/*.css'])
            .pipe(gulp.dest('test/dist/fonts/')));

    gulp.task('dist:styles', ['dist:images', 'dist:favicons'], () =>
        gulp.src('test/dist/**/*.css')
            .pipe($.header(header))
            .pipe($.groupCssMediaQueries())
            .pipe($.autoprefixer())
            .pipe($.csso())
            .pipe(gulp.dest('test/dist/')));

    gulp.task('dist:scripts', ['dist:images', 'dist:favicons'], () =>
        gulp.src('test/dist/**/*.js')
            .pipe($.stripDebug())
            .pipe($.uglify())
            .pipe($.header(header))
            .pipe(gulp.dest('test/dist/')));

    gulp.task('dist:robots', ['dist:templates'], () =>
        gulp.src('test/dist/index.html')
            .pipe($.robots({ useragent: '*', disallow: ['cgi-bin/'] }))
            .pipe(gulp.dest('test/dist/')));

    gulp.task('dist:humans', ['dist:templates'], () =>
        gulp.src('test/dist/index.html')
            .pipe($.humans({
                thanks: ['Node (@nodejs on Twitter)', 'Gulp (@gulpjs on Twitter)'],
                site: ['Standards: HTML5, CSS3', 'Components: jQuery, Normalize.css', 'Software: Atom'],
                note: 'Built with love by Hayden Bleasel.'
            }))
            .pipe(gulp.dest('test/dist/')));

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

    gulp.task('bump', () =>
        gulp.src(['bower.json', 'package.json'])
            .pipe($.bump({ type: minimist.type }))
            .pipe(gulp.dest('./')));

    gulp.task('preview', ['build:styles', 'browser-sync'], () =>
        gulp.watch(['test/source/**/*'], ['build:styles']));

    gulp.task('default', ['dist:copy', 'dist:templates', 'dist:fonts', 'dist:styles', 'dist:scripts', 'dist:robots', 'dist:humans']);

})();

package.json

{
  "name": "catalyst",
  "version": "1.0.0",
  "description": "Catalyst is a task automation boilerplate for experienced web developers.",
  "main": "gulpfile.js",
  "devDependencies": {
    "babel-preset-es2015": "*",
    "browser-sync": "*",
    "del": "*",
    "eslint": "*",
    "gulp": "*",
    "gulp-autoprefixer": "*",
    "gulp-babel": "*",
    "gulp-bump": "*",
    "gulp-colorguard": "*",
    "gulp-concat": "*",
    "gulp-csso": "*",
    "gulp-eslint": "*",
    "gulp-favicons": "*",
    "gulp-fontmin": "*",
    "gulp-group-css-media-queries": "*",
    "gulp-header": "*",
    "gulp-htmlmin": "*",
    "gulp-humans": "*",
    "gulp-if": "*",
    "gulp-imagemin": "*",
    "gulp-jimp": "*",
    "gulp-load-plugins": "*",
    "gulp-plumber": "*",
    "gulp-rev": "*",
    "gulp-rev-replace": "*",
    "gulp-robots": "*",
    "gulp-sitemap": "*",
    "gulp-special-html": "*",
    "gulp-strip-debug": "*",
    "gulp-uglify": "*",
    "gulp-useref": "*",
    "gulp-util": "*",
    "gulp-w3cjs": "*",
    "minimist": "*"
  },
  "scripts": {
    "test": "gulp"
  },
  "keywords": [
    "scalable",
    "website",
    "scaffold",
    "gulp"
  ],
  "author": "Hayden Bleasel <[email protected]>",
  "license": "ISC",
  "private": true
}

tree

test
└── source
    ├── fonts
    │   ├── SourceSansPro-Light.ttf
    │   └── SourceSansPro-Semibold.ttf
    ├── images
    │   └── logo-square.png
    ├── index.html
    ├── scripts
    │   ├── catalyst.js
    │   └── hello.js
    └── styles
        ├── global.css
        └── type.css