Gulpfile for ZOE

gulpfile.js

/*------------------------------------------------------------------------------
  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 );
});