img.js

'use strict';

// Gulp and node
const gulp = require('gulp');
const cp = require('child_process');
const notify = require('gulp-notify');
const size = require('gulp-size');

// Basic workflow plugins
// const browserSync = require('browser-sync');
// const browserify = require('browserify');
// const source = require('vinyl-source-stream');
// const buffer = require('vinyl-buffer');
// const clean = require('gulp-clean');
// const sass = require('gulp-sass');
// const jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
// const messages = {
//     jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
// };

// // Performance workflow plugins
// const htmlmin = require('gulp-htmlmin');
// const prefix = require('gulp-autoprefixer');
// const sourcemaps = require('gulp-sourcemaps');
// const uglify = require('gulp-uglify');
// const critical = require('critical');
// const sw = require('sw-precache');

// Image Generation
const responsive = require('gulp-responsive');
const $ = require('gulp-load-plugins')();
const rename = require('gulp-rename');
const imagemin = require('gulp-imagemin');

const src = {
  css: '_sass/main.scss',
  js: '_js/scripts.js',
}
const dist = {
  css: '_site/assets/css',
  js: '_site/assets/js',
}

function handleErrors() {
  var args = Array.prototype.slice.call(arguments);
  notify.onError({
    title: 'Compile Error',
    message: '<%= error.message %>'
  }).apply(this, args);
  this.emit('end'); // Keep gulp from hanging on this task
}

// Build the Jekyll Site
// gulp.task('jekyll-build', function (done) {
//     browserSync.notify(messages.jekyllBuild);
//     return cp.spawn( jekyll , ['build'], {stdio: 'inherit'})
//         .on('close', done);
// });

// gulp.task('deploy', ['jekyll-build'], function () {
//     return gulp.src('./_site/**/*')
//         .pipe(deploy());
// });

// // Rebuild Jekyll & do page reload
// gulp.task('rebuild', ['jekyll-build'], function (done) {
//     browserSync.reload();
//     done();
// });

// // Serve after jekyll-build
// gulp.task('browser-sync', ['sass', 'js', 'sw', 'jekyll-build'], function() {
//     browserSync({
//         server: {
//             baseDir: '_site'
//         }
//     });
// });

// SASS
// gulp.task('sass', function() {
//   return gulp.src(src.css)
//     .pipe(sourcemaps.init())
//     .pipe(sass({
//       outputStyle: 'compressed',
//       includePaths: ['scss'],
//       onError: browserSync.notify
//     }).on('error', sass.logError))
//     .pipe(prefix())
//     .pipe(sourcemaps.write('./maps'))
//     .pipe(gulp.dest(dist.css))
//     .pipe(browserSync.reload({ stream: true }))
//     .pipe(gulp.dest('assets/css'));
// });

// //  JS
// gulp.task('js', function() {
//   return browserify(src.js, {debug: true, extensions: ['es6']})
//     .transform('babelify', {presets: ['es2015']})
//     .bundle()
//     .on('error', handleErrors)
//     .pipe(source('bundle.js'))
//     .pipe(buffer())
//     .pipe(sourcemaps.init({loadMaps: true}))
//     .pipe(uglify())
//     .pipe(sourcemaps.write('./maps'))
//     .pipe(size())
//     .pipe(gulp.dest(dist.js))
//     .pipe(browserSync.reload({stream: true}))
//     .pipe(gulp.dest('assets/js'))
// });

// gulp.task('critical', function (cb) {
//   critical.generate({
//     base: '_site/',
//     src: 'index.html',
//     css: ['assets/css/main.css'],
//     dimensions: [{
//       width: 320,
//       height: 480
//     },{
//       width: 768,
//       height: 1024
//     },{
//       width: 1280,
//       height: 960
//     }],
//     dest: '../_includes/critical.css',
//     minify: true,
//     extract: false,
//     ignore: ['@font-face']
//   });
// });

// gulp.task('watch', function() {
//   gulp.watch('_sass/**/*.scss', ['sass']);
//   gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_posts/*.md',  'pages_/*.md', '_include/*html'], ['rebuild']);
//   gulp.watch(src.js, ['js']);
// });

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

// Minify HTML
// gulp.task('html', function() {
//     gulp.src('./_site/index.html')
//       .pipe(htmlmin({ collapseWhitespace: true }))
//       .pipe(gulp.dest('./_site'))
//     gulp.src('./_site/*/*html')
//       .pipe(htmlmin({ collapseWhitespace: true }))
//       .pipe(gulp.dest('./_site/./'))
// });

// gulp.task('sw', function() {
//   const rootDir ='./';
//   const distDir = './_site';

//   sw.write(`${rootDir}/sw.js`, {
//     staticFileGlobs: [distDir + '/**/*.{js,html,css,png,jpg,svg}'],
//     stripPrefix: distDir
//   });
// });

// Images
gulp.task('img', function() {
  return gulp.src('_img/posts/*.{png,jpg}')
    .pipe($.responsive({
      // For all the images in the folder
      '*': [{
        width: 230,
        rename: {suffix: '_placehold'},
      }, {
        // thubmnail
        width: 535,
        rename: { suffix: '_thumb' },
      }, {
        // thumbnail @2x
        width: 535 * 2,
        rename: { suffix: '_thumb@2x' },
      }, {
        width: 575,
        rename: { suffix: '_xs'}
      }, {
        width: 767,
        rename: {suffix: '_sm'}
      }, {
        width: 991,
        rename: { suffix: '_md' }
      }, {
        width: 1999,
        rename: { suffix: '_lg' }
      }, {
        // max-width hero
        width: 1920,
      }],
    }, {
      quality: 70,
      progressive: true,
      withMetadata: false,
    }))
    .pipe(imagemin())
    .pipe(gulp.dest('assets/img/posts/'));
});


// gulp.task('clean', function () {
//     return gulp.src('_site', {read: false})
//       .pipe(clean());
// });

// gulp.task('serve', function() {
//   browserSync({
//     server: {
//       baseDir: '_site'
//     }
//   });
// });

gulp.task('build', ['img']);