barebones/gulpfile.babel.js

import gulp from 'gulp';
import clean from 'gulp-clean';
import sass from 'gulp-sass';
import gulpif from 'gulp-if';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import { rollup } from 'rollup';
import buble from 'rollup-plugin-buble';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import multiEntry from 'rollup-plugin-multi-entry';
import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-js';
import imagemin from 'gulp-imagemin';
import notify from 'gulp-notify';
import runSequence from 'run-sequence';
import path from 'path';

/**
 * Barebones config
 */
import config from './config.barebones';

const { log } = console;
let production = false; // = build
let error = false;

/**
 * Tasks - in order
 */
const tasks = ['styles', 'scripts', 'images'];

/**
 * Notification
 *
 * @param {string} message
 * @param {string} status
 */
function notification(message = '', status = 'success') {
  return gulp.src('./node_modules/gulp-notify/test/fixtures/1.txt')
    .pipe(notify({
      title: 'Barebones',
      message,
      icon: path.join(__dirname, `assets/icons/${status}.png`),
    }));
}

/**
 * Clean
 */
gulp.task('clean', () => (
  gulp.src([`${config.base.public}`, `${config.base.public}/js`], {
    read: false,
  })
  .pipe(clean())
));

/**
 * Styles
 */
gulp.task('styles', () => {
  const stylesheets = config.styles;
  stylesheets.push(`${config.base.src}/styles/*.scss`);

  gulp.src(stylesheets)
    .pipe(gulpif(!production, sourcemaps.init()))
    .pipe(sass({
      outputStyle: production ? 'compressed' : 'nested',
    }).on('error', (err) => {
      notification('Failed to compile styles. 😱', 'error');
      log(err.stack);
      error = true;
    }))
    .pipe(autoprefixer({
      browsers: ['last 10 versions'],
    }))
    .pipe(gulpif(!production, sourcemaps.write('.')))
    .pipe(gulp.dest(`${config.base.public}`));
});

const roll = (entry, dest) => {
  let env = 'development';
  if (production) {
    env = 'production';
  }

  return rollup({
    entry,
    plugins: [
      multiEntry(),
      buble(),
      nodeResolve({
        browser: true,
        main: true,
        jsnext: true,
      }),
      commonjs({
        include: [
          'node_modules/**',
          `${config.base.src}/**`,
        ],
      }),
      json(),
      replace({
        'process.env.NODE_ENV': JSON.stringify(env),
      }),
      production ? uglify({}, minify) : '',
    ],
  }).then((bundle) => {
    bundle.write({
      format: 'iife',
      moduleName: 'BarebonesBundle',
      sourceMap: !production,
      dest,
    });
  }).catch((err) => {
    notification('Failed to compile scripts. 😱', 'error');
    log(err.stack);
    error = true;
  });
};

gulp.task('scripts', (cb) => {
  if (config.scripts.length) {
    config.scripts.forEach((filePath) => {
      const formattedPath = filePath.replace(/^\/|\/$/g, ''); // remove leading forward slash
      const entry = `${config.base.src}/scripts/${formattedPath}`;
      const dest = `${config.base.public}/js/${formattedPath.replace('.js', '.min.js')}`;
      // regex to remove duplicate forward slashes
      roll(entry.replace(/([^:]\/)\/+/g, '$1'), dest.replace(/([^:]\/)\/+/g, '$1'));
    });
  }
  cb();
});

/**
 * Watch
 */
gulp.task('watch-files', tasks, () => {
  gulp.watch(`${config.base.src}/styles/**/*.scss`, ['styles']);
  gulp.watch(`${config.base.src}/scripts/**/*.js`, ['scripts']);
  gulp.watch(`${config.base.src}/images/**/*.*`, ['images']);
});

/**
 * Images
 */
gulp.task('images', (cb) => {
  // hadle all images that are not svg
  gulp.src(`${config.base.src}/images/**/*.*`)
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{
        removeViewBox: false,
      }],
    }))
    .pipe(gulp.dest(`${config.base.public}/img`))
    .on('end', () => cb());
});

/**
 * Main Tasks
 */
gulp.task('watch', cb => (
  runSequence('clean', () => {
    runSequence(tasks, 'watch-files', () => {
      if (!error) {
        notification('Watching files... 👀');
      }
      cb();
    });
  })
));

gulp.task('build', (cb) => {
  production = true;

  runSequence('clean', () => {
    runSequence(tasks, () => {
      if (!error) {
        notification('Build complete! 🍻');
        cb();
      }
    });
  });
});

gulp.task('default', cb => (
  runSequence('clean', () => {
    runSequence(tasks, () => {
      cb();
    });
  })
));