blog/gulpfile.js

'use strict';

var gulp = require('gulp');
var gulpIf = require('gulp-if');
var gulpRev = require('gulp-rev');
var gulpRevCollector = require('gulp-rev-collector');
var gulpRevReplace = require('gulp-rev-replace');
var gulpUglify = require('gulp-uglify');
var gulpUniqueFiles = require('gulp-unique-files');
var gulpUseRef = require('gulp-useref');
var gulpCleanCSS = require('gulp-clean-css');
var gulpResponsive = require('gulp-responsive');
var gulpCheerio = require('gulp-cheerio');
var del = require('del');
var rename = require('rename');

var dirs = {
  public: 'public',
  screenshots: 'public/build/screenshots'
};

gulp.task('useref', ['screenshot'], function() {
  var assets = gulpUseRef.assets({
    searchPath: 'public'
  });

  return gulp.src('public/**/*.html')
    .pipe(assets)
    .pipe(gulpUniqueFiles())
    .pipe(gulpIf('*.css', gulpCleanCSS()))
    .pipe(gulpIf('*.js', gulpUglify()))
    .pipe(gulpRev())
    .pipe(assets.restore())
    .pipe(gulpUseRef())
    .pipe(gulpRevReplace({
      prefix: '/'
    }))
    .pipe(gulp.dest('public'));
});

gulp.task('screenshot:clean', function() {
  return del([dirs.screenshots + '/**/*']);
});

gulp.task('screenshot:rev', ['screenshot:clean'], function() {
  return gulp.src('public/themes/screenshots/*.png')
    .pipe(gulpRev())
    .pipe(gulp.dest(dirs.screenshots))
    .pipe(gulpRev.manifest())
    .pipe(gulp.dest(dirs.screenshots));
});

gulp.task('screenshot:revreplace', ['screenshot:rev'], function() {
  var destDir = '/build/screenshots';

  return gulp.src([dirs.screenshots + '/rev-manifest.json', 'public/themes/index.html'])
    .pipe(gulpRevCollector({
      replaceReved: true,
      dirReplacements: {
        '/themes/screenshots': destDir
      }
    }))
    .pipe(gulpCheerio(function($, file) {
      $('img.plugin-screenshot-img.lazyload').each(function() {
        var img = $(this);
        var src = img.attr('data-src') || img.attr('data-org');
        if (!src) return;

        var jpgPath = replaceBackSlash(rename(src, {extname: '.jpg'}));
        var jpg2xPath = replaceBackSlash(rename(jpgPath, {suffix: '@2x'}));
        var srcset = [
          jpgPath,
          jpg2xPath + ' 2x'
        ].join(', ');

        img.attr('data-src', jpgPath)
          .attr('data-srcset', srcset)
          .attr('data-org', src);
      });
    }))
    .pipe(gulp.dest('public/themes'));
});

gulp.task('screenshot:resize', ['screenshot:rev'], function() {
  return gulp.src(dirs.screenshots + '/*.png')
    .pipe(gulpResponsive({
      '*.png': [
        {
          width: '50%',
          rename: {
            extname: '.jpg'
          }
        },
        {
          rename: {
            suffix: '@2x',
            extname: '.jpg'
          }
        }
      ]
    }, {
      progressive: true,
      format: 'jpeg',
      quality: 70,
      stats: false
    }))
    .pipe(gulp.dest(dirs.screenshots));
});

gulp.task('screenshot', ['screenshot:rev', 'screenshot:resize', 'screenshot:revreplace']);
gulp.task('default', ['useref', 'screenshot']);

function replaceBackSlash(str) {
  return str.replace(/\\/g, '/');
}