Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Catalyst: task automation boilerplate for experienced web developers
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']);
})();
{
"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 <haydenbleasel@gmail.com>",
"license": "ISC",
"private": true
}
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment