gulpfile.babel.js

'use strict';

import path from 'path';
import fs from 'fs';

import gulp from 'gulp';
import runSequence from 'run-sequence';
import gutil from 'gulp-util';
import gulpIf from 'gulp-if';
import sourcemaps from 'gulp-sourcemaps';

import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import cssnano from 'gulp-cssnano';
import gcmq from 'gulp-group-css-media-queries';
import stylelint from 'gulp-stylelint';
const critical = require('critical').stream;

import pug from 'gulp-pug';
import data from 'gulp-data';
import htmlmin from 'gulp-htmlmin';

import webpack from 'webpack';
import webpackStream from 'webpack-stream';
import webpackConfig from './webpack.config.js';

import imagemin from 'gulp-imagemin';
import imageminWebp from 'imagemin-webp';

import browserSync from 'browser-sync';

import eslint from 'gulp-eslint';
import mocha from 'gulp-mocha';
import istanbul from 'gulp-istanbul';

import changed from 'gulp-changed';
import cached from 'gulp-cached';
import jsonConcat from 'gulp-json-concat';
import plumber from 'gulp-plumber';
import htmlreplace from 'gulp-html-replace';
import cdnizer from 'gulp-cdnizer';
import gulpif from 'gulp-if';

import modernizr from 'modernizr';
import modernizrConfig from './modernizr-config.json';

import del from 'del';
import rename from 'gulp-rename';

const argv = require('yargs').argv;

import pkg from './package.json';

// ========================================
// VARIABLES
// ========================================

const dataFolder = './data';

function getDirectories(srcPath) {
  return fs
    .readdirSync(srcPath)
    .filter(file => fs.statSync(path.join(srcPath, file)).isDirectory());
}

const langs = getDirectories(dataFolder) || [];

if (argv.l === undefined) {
  argv.l = 'en'; // Default language
}

const dirs = {
  root: '.',
  src: 'src',
  dest: 'dist',
};

const sassPaths = {
  src: `${dirs.src}/styles/main.scss`,
  dest: `${dirs.dest}/styles/`,
};

const pugPaths = {
  src: `${dirs.src}/views/index-${argv.l}.pug`,
};

const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';



// ========================================
// PUG / HTML
// ========================================

gulp.task('compile-pug', () => {
  return gulp.src(pugPaths.src)
    .pipe(plumber(error => {
      console.log(error);
      this.emit('end');
    }))
    .pipe(data(() => {
      return require(`./data/${argv.l}/_project.json`);
    }))
		.pipe(pug({
      locals: {},
      pretty: true,
    }))
    .pipe(rename({
      basename: 'index',
    }))
    .pipe(gulp.dest(dirs.dest))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('pug-rebuild', ['compile-pug'], () => {
  browserSync.reload();
});

gulp.task('minify-html', () => {
  langs.forEach(lang => {
    return gulp.src(`./dist/index-en.html`)
      .pipe(htmlmin({
        collapseWhitespace: true,
        removeComments: true,
      }))
      .pipe(rename({
        basename: 'index',
      }))
      // .pipe(gulpif(lang !== 'en', gulp.dest(`${dirs.dest}/${lang}`), gulp.dest(`${dirs.dest}`)))
      .pipe(gulp.dest(`${dirs.dest}`));
  });
});

gulp.task('compile-all-pug', () => {
  langs.forEach(lang => {
    return gulp.src(`${dirs.src}/views/index-${lang}.pug`)
      .pipe(data(() => {
        return require(`./data/${lang}/_project.json`);
      }))
      .pipe(pug({
        locals: {},
        pretty: true,
      }))
      .pipe(gulp.dest(`${dirs.dest}`));
  });
});

// ========================================
// CSS
// ========================================

gulp.task('compile-styles', () => {
  return gulp.src(sassPaths.src)
    .pipe(plumber(error => {
      console.log(error);
      this.emit('end');
    }))
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gcmq())
    .pipe(cssnano())
    // .pipe(uncss({
    //   html: [dirs.dest + '/**/*.html']
    // }))
    .pipe(rename({
      suffix: '.min',
    }))
    .pipe(gulpIf(isDevelopment, sourcemaps.write('.')))
    .pipe(gulp.dest(sassPaths.dest))
    .pipe(browserSync.reload({stream: true}));
});

// Generate & Inline Critical-path CSS
gulp.task('critical', () => {
  langs.forEach(lang => {
    return gulp.src(`${dirs.dest}/index-${lang}.html`)
      .pipe(critical({
        base: 'dist/',
        inline: true,
        css: 'dist/styles/main.min.css',
        minify: true,
        ignore: [/url\(/, '@font-face', /print/],
      }))
      .pipe(htmlmin({
        collapseWhitespace: true,
        removeComments: true,
      }))
      .pipe(rename({
        basename: 'index',
      }))
      .pipe(gulpif(lang !== 'en', gulp.dest(`${dirs.dest}/${lang}`), gulp.dest(`${dirs.dest}`)))
  })
});

gulp.task('lint-css', function lintCssTask() {
  return gulp.src(dirs.src + '/styles/**/*.scss')
    .pipe(cached('css'))
    .pipe(stylelint({
      reporters: [
        {
          formatter: 'string',
          console: true,
        }
      ],
    }));
});

// ========================================
// JAVASCRIPT
// ========================================

gulp.task('lint', () => {
  return gulp.src(dirs.src + '/scripts/**/*.js')
  .pipe(cached('lint'))
  .pipe(eslint())
  .pipe(eslint.format())
  .pipe(eslint.results(results => {
    // Called once for all ESLint results.
    console.log(`Total Results: ${results.length}`);
    console.log(`Total Warnings: ${results.warningCount}`);
    console.log(`Total Errors: ${results.errorCount}`);
  }));
});

gulp.task('webpack', () => {
  return gulp.src(dirs.src + '/scripts/main.js')
    .pipe(plumber(error => {
      console.log(error);
      this.emit('end');
    }))
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulp.dest(dirs.dest + '/scripts/'))
    .pipe(browserSync.reload({stream: true}));
});

// ========================================
// IMAGES
// ========================================

gulp.task('compress-images', ['compress-webp'], () => {
  return gulp.src(dirs.src + '/img/**/*.{jpg,png,svg}')
    .pipe(imagemin([
      imagemin.jpegtran({progressive: true}),
      imagemin.optipng({optimizationLevel: 5}),
    ]))
    .pipe(gulp.dest(dirs.dest + '/img/'));
});

gulp.task('compress-webp', () => {
  return gulp.src(dirs.src + '/img/**/*.webp')
    .pipe(imagemin([
      imageminWebp({quality: 70})
    ]))
    .pipe(gulp.dest(dirs.dest + '/img/'));
});

// ========================================
// TDD
// ========================================

gulp.task('coverage', function() {
  return gulp.src(dirs.src + '/scripts/**/*.js')
    .pipe(istanbul({
        includeUntested: true,
    }))
    .pipe(istanbul.hookRequire());
});

gulp.task('report', function() {
  gulp.src(dirs.src + '/scripts/**/*.js', { read: false })
    .pipe(istanbul.writeReports());
});

gulp.task('mocha', function() {
  return gulp.src('test/**/*.test.js', { read: false })
    .pipe(mocha({
      reporter: 'spec',
      compilers: 'js:babel-core/register',
      require: ['jsdom-global'],
    }));
});

// ========================================
// SERVER
// ========================================

gulp.task('browser-sync', () => {
  browserSync({
    server: {
      baseDir: './dist',
      index: 'index.html',
    },
    notify: false,
    browser: true,
    open: true,
  });
});

gulp.task('browser-reload', () => {
  browserSync.reload();
});

// ========================================
// MISC
// ========================================

gulp.task('cdn', () => {
  langs.forEach(lang => {
    return gulp.src(`./dist/index-${lang}.html`)
      .pipe(cdnizer({
        defaultCDNBase: '//everywhere-8a59.kxcdn.com',
        allowRev: true,
        files: [
          '/scripts/app.bundle.js',
          '/styles/main.min.css',
          '/favicon-32x32.png',
          '/favicon-16x16.png',
          '/apple-touch-icon.png',
          '/browserconfig.xml',
          '/service-worker.js',
          '/safari-pinned-tab.svg',
          '/manifest.json',
          '/img/social/facebook-banner.jpg',
          '/img/logos/logo-front-end-checklist.jpg',
          '/img/logos/logo-front-end-checklist.webp',
        ]
      }))
      .pipe(gulp.dest(dirs.dest));
    })
});

gulp.task('clean-dist', () => {
  return del(['./dist'], {force: true});
});

gulp.task('clean-tmp', () => {
  return del(['!./dist/index.html', './dist/index-*.html'], {force: true});
});

gulp.task('clean-coverage', () => {
  return del(['./coverage']);
});

gulp.task('json-rebuild', () => {
  return gulp.src(`./data/${argv.l}/items/*.json`)
    .pipe(jsonConcat('./_items.json', data => {
      return new Buffer(JSON.stringify(data));
    }))
    .pipe(gulp.dest(`./data/${argv.l}`))

    .on('finish', () => {
      return gulp.src([ `./data/${argv.l}/_items.json`, `./data/${argv.l}/project/*.json`])
        .pipe(jsonConcat('./_project.json', data => {
          return new Buffer(JSON.stringify(data));
        }))
        .pipe(gulp.dest(`./data/${argv.l}`));
    })
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('json-rebuild-all', () => {
  langs.forEach(lang => {
    return gulp.src(`./data/${lang}/items/*.json`)
      .pipe(jsonConcat('./_items.json', data => {
        return new Buffer(JSON.stringify(data));
      }))
      .pipe(gulp.dest(`./data/${lang}`))

      .on('finish', () => {
        return gulp.src([ `./data/${lang}/_items.json`, `./data/${lang}/project/*.json`])
          .pipe(jsonConcat('./_project.json', data => {
            return new Buffer(JSON.stringify(data));
          }))
          .pipe(gulp.dest(`./data/${lang}`));
      });
    });
});

gulp.task('copy', () => {
  return gulp.src([
    // Copy all files
    `${dirs.src}/*.*`,
    `${dirs.src}/_headers`,
    `!${dirs.src}/modernizr-custom.min.js`,
  ], {
    // Include hidden files by default
    dot: true,
  })
  .pipe(gulp.dest(dirs.dest));
});

gulp.task('modernizr', done => {
  modernizr.build(modernizrConfig, code => {
    fs.writeFile(`${dirs.src}/modernizr-custom.min.js`, code, done);
  });
});

// ##########################################
// LIST TASKS
// ##########################################

gulp.task('watch', function () {
  gulp.watch(dirs.src + '/styles/**/*.scss', ['lint-css', 'compile-styles']);
  gulp.watch(dirs.src + '/views/**/*.pug', ['pug-rebuild']);
  gulp.watch(['!'+ dirs.src + `/data/${argv.l}/**/_*.json`, dirs.src + '/data/**/*.json'], ['json-rebuild']); // When JSON files are updated, concatenate these
  gulp.watch(dirs.src + '/data/**/_*.json', ['compile-pug']); // When JSON are updated, compile PUG files
  gulp.watch(dirs.src + '/img/**/*', ['compress-images']);
  gulp.watch([dirs.src + '/scripts/**/*.js'], ['lint', 'webpack']);
  gulp.watch(['test/**'], ['mocha']);
});

gulp.task('dev', ['compile-pug', 'compile-styles', 'compress-images', 'webpack', 'json-rebuild', 'browser-sync', 'watch']);

gulp.task('build', done => {
  runSequence(
    ['clean-dist', 'json-rebuild-all', 'modernizr'],
    ['lint-css'],
    ['compile-all-pug'],
    ['compile-styles', 'compress-images', 'webpack'],
    ['cdn'],
    ['copy'],
    ['minify-html'],
    done
  );
});

gulp.task('test', done => {
  runSequence('clean-coverage', 'coverage', 'mocha', 'report', done);
});

gulp.task('default', ['browser-sync', 'watch']);