erwstout
6/1/2017 - 8:12 PM
Gulpfile for ZOE
Gulpfile for ZOE
/*------------------------------------------------------------------------------
Gulpfile.js
------------------------------------------------------------------------------*/
// Theme information (name, starting theme version)
var theme = 'zoe',
version = '0.2.1';
// Set the paths you will be working with
var phpFiles = ['./**/*.php', './*.php'],
htmlFiles = ['./**/*.html', './*.html'],
cssFiles = ['./assets/css/*.css', '!./assets/css/*.min.css'],
sassFiles = ['./assets/scss/**/*.scss'],
styleFiles = [cssFiles, sassFiles],
jsFiles = ['./assets/js/theme.js'],
imageFiles = ['./assets/img/*.{jpg,png,gif,svg}'],
concatFiles = [
'./assets/js/*.js',
'./node_modules/nifty-nav/src/js/nifty-nav.js',
'./node_modules/waypoints/lib/jquery.waypoints.js',
'./node_modules/waypoints/lib/shortcuts/inview.js',
'./node_modules/jquery.animate-number/jquery.animateNumber.js',
'./node_modules/remodal/dist/remodal.js',
'!./assets/js/es6.js',
'!./assets/js/classy.js',
'!./assets/js/archives.js',
'!./assets/js/classy.min.js',
'!./assets/js/archives.min.js',
'!./assets/js/classy.bundle.js',
'!./assets/js/archives.bundle.js',
'!./assets/js/es6/**/*.js',
'!./assets/js/theme.min.js',
'!./assets/js/all.js'
],
url = 'zoe.dev'; // See https://browsersync.io/docs/options/#option-proxy
// Include gulp
var gulp = require('gulp');
// Include plugins
var jshint = require('gulp-jshint'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
nano = require('gulp-cssnano'),
sourcemaps = require('gulp-sourcemaps'),
babel = require('gulp-babel'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
stylish = require('jshint-stylish'),
notify = require('gulp-notify'),
replace = require('replace'),
argv = require('yargs').usage('Usage: $ gulp version [--major, --minor, --patch, --current]').argv,
colors = require('colors'),
exec = require('child_process').exec,
styleguide = require('sc5-styleguide'),
sass = require('gulp-sass'),
outputPath = './styleguide/',
zip = require('gulp-zip');
/*------------------------------------------------------------------------------
Development Tasks
------------------------------------------------------------------------------*/
// Launch a development server
gulp.task( 'serve', function() {
browserSync.init({
proxy: url
// port: 3000
});
});
// Compile Sass
gulp.task('sass', function() {
return gulp.src( sassFiles )
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass({
includePaths: [
'./node_modules/normalize-scss/sass/',
'./node_modules/ginger-grid/',
'./node_modules/font-awesome/',
'./node_modules/nifty-nav/src/scss/'
]
})
.on('error', sass.logError))
.on('error', notify.onError("Error compiling scss!")
)
.pipe(autoprefixer({
browsers: ['last 3 versions', 'Safari > 7'],
cascade: false
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest( './assets/css' ))
.pipe(browserSync.reload({
stream: true
}));
});
// Lint JavaScript
gulp.task('lint', function() {
return gulp.src( jsFiles )
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(jshint.reporter('fail'))
.on('error', notify.onError({ message: 'Error compiling JavaScript!'}))
.pipe(sourcemaps.write())
.pipe(browserSync.reload({
stream: true
}));
});
// Compile Any Babel JS
gulp.task('babel', ['scripts'], () => {
return gulp.src('./assets/js/es6/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['es2015']
}))
//.pipe(concat('es6.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/js/'));
});
/*------------------------------------------------------------------------------
Production Tasks
------------------------------------------------------------------------------*/
// Minimize CSS
gulp.task('minify-css', ['sass'], function() {
return gulp.src( cssFiles )
.pipe(rename({
suffix: '.min'
}))
.pipe(nano({
discardComments: {removeAll: true},
autoprefixer: false,
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
calc: {mediaQueries: true},
zindex: false
}))
.pipe(gulp.dest( './assets/css' ))
.pipe(browserSync.reload({
stream: true
}));
});
// Concatenate & Minify JavaScript
gulp.task('scripts', ['lint'], function() {
return gulp.src( concatFiles )
.pipe(concat( 'all.js' ))
.pipe(gulp.dest( './assets/js/' ))
.pipe(rename('theme.min.js'))
.pipe(uglify())
.pipe(gulp.dest( './assets/js/' ));
});
gulp.task('minify-babel', function() {
return gulp.src( ['./assets/js/classy.js','./assets/js/archives.js',] )
.pipe(gulp.dest( './assets/js/' ))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest( './assets/js/' ));
});
// Compress Images
gulp.task('images', function() {
return gulp.src( imageFiles )
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest( './assets/img/' ));
});
// Package a zip for theme upload
gulp.task('package', function() {
return gulp.src( [
'./**/*',
'!bower_components',
'!node_modules',
'!bower_components/**',
'!node_modules/**'
] )
.pipe(zip( theme + '.zip' ))
.pipe(gulp.dest( './' ));
});
// Styleguide Tasks
gulp.task('styleguide:generate', function() {
return gulp.src(sassFiles)
.pipe(styleguide.generate({
title: 'ZOE Styleguide',
server: false,
rootPath: outputPath,
appRoot: '/2017/zoe/styleguide',
readOnly: true,
extraHead: [
'<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">'
],
overviewPath: 'README.md'
}))
.pipe(gulp.dest(outputPath));
});
gulp.task('styleguide:applystyles', function() {
return gulp.src('./assets/scss/theme.scss')
.pipe(sass({
includePaths: [
'./node_modules/normalize-scss/sass/',
'./node_modules/ginger-grid/'
],
errLogToConsole: true
}))
.pipe(styleguide.applyStyles())
.pipe(gulp.dest(outputPath));
});
gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);
// Update Theme Version
gulp.task('version', function(cb) {
// get current version
var currentVersion = version.split(/[.]+/);
if( argv.patch ){
// log current version
console.log('Current version is: '+version.yellow);
console.log('Updating theme version as a patch.'.cyan);
// increment patch number
currentVersion[2]++
var newPatch = currentVersion[2];
// New Version Number
var newVersion = currentVersion[0]+'.'+currentVersion[1]+'.'+newPatch;
console.log('New theme version is: '.green+ newVersion.green.bold);
// first replace updates strings
replace({
regex: version,
replacement: newVersion,
paths: [
'./style.css',
'./functions.php',
'./gulpfile.js'
],
silent: true,
});
exec(`git tag ${newVersion}`, function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
} else if ( argv.minor ) {
// log current version
console.log('Current version is: '+version.yellow);
console.log('Updating theme version as a minor release.'.cyan);
// increment minor number
currentVersion[1]++
var newMinor = currentVersion[1];
// New Version Number
var newVersion = currentVersion[0]+'.'+newMinor+'.'+'0';
console.log('New theme version is: '.green+ newVersion.green.bold);
replace({
regex: version,
replacement: newVersion,
paths: [
'./style.css',
'./functions.php',
'./gulpfile.js'
],
silent: true,
});
exec(`git tag ${newVersion}`, function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
} else if ( argv.major ) {
// log current version
console.log('Current version is: '+version.yellow);
console.log('Updating theme version as a major release.'.cyan);
// increment minor number
currentVersion[0]++
var newMajor = currentVersion[0];
// New Version Number
var newVersion = newMajor+'.'+'0'+'.'+'0';
console.log('New theme version is: '.green+ newVersion.green.bold);
replace({
regex: version,
replacement: newVersion,
paths: [
'./style.css',
'./functions.php',
'./gulpfile.js'
],
silent: true,
});
exec(`git commit -am "Bumps theme version" && git tag ${newVersion}`, function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
} else if ( argv.current ) {
// log current version
console.log('Current version is: '+version.yellow);
} else{
// log current version
console.log('Current version is: '+version.yellow);
console.error('🚨 No arguments or invalid arguments were passed. Include one of the following arguments: [--major, --minor, --patch, --current]'.red.bold);
}
});
// Build task to run all tasks and and package for distribution
gulp.task('build', ['sass', 'scripts', 'images', 'package']);
// Styles Task - minify-css is the only task we call, because it is dependent upon sass running first.
gulp.task('styles', ['minify-css']);
/*------------------------------------------------------------------------------
Default Tasks
------------------------------------------------------------------------------*/
// Default Task
gulp.task('default', ['styles', 'scripts', 'serve', 'watch']);
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch( sassFiles, ['styles']);
gulp.watch( jsFiles, ['scripts']);
gulp.watch( phpFiles, browserSync.reload );
gulp.watch( htmlFiles, browserSync.reload );
});