svgmin.gulptask.js

// Dependencies
var gulp = require('gulp'); // Gulp!
var cheerio = require('gulp-cheerio'); // Cheerio, good chap!
var filter = require('gulp-filter'); // Filter a pipeline.
var plumber = require('gulp-plumber'); // Gulp Plumber
var rename = require('gulp-rename'); // Rename
var svgstore = require('gulp-svgstore'); // Combine SVG files into one
var svgmin = require('gulp-svgmin'); // Compress SVG files

// Paths
var paths = {
  theme: './build',
  svg: './svg'
};

// Optimize all SVGs and inline all SVGs in ./sprite.
gulp.task('svgmin', function () {
  const svgBuild = paths.theme + 'svg';
  // Filter all SVGs in ./sprite/ to inline later.
  const f = filter(['**', '!*' + paths.svg + 'sprite/*.svg'], {restore: true, passthrough: false});
  // Store the stream for return
  const stream = gulp.src(paths.svg + '**/*.svg')
    .pipe(plumber())
    .pipe(cheerio({
      run: function ($) {
        $('[fill]').removeAttr('fill');
      },
      parserOptions: { xmlMode: true }
    }))
    .pipe(svgmin({
      plugins: [
        { removeTitle: true },
        { removeUselessStrokeAndFill: true }
      ],
      s2svg: {
        pretty: true
      }
    }))
    .pipe(f)
    .pipe(gulp.dest(svgBuild));

    // Restore the filter stream, inline and return
    f.restore.pipe(svgstore({inlineSvg: true}))
      .pipe(gulp.dest(svgBuild))
      .pipe(rename({extname: '.twig'})) // Also output `svg.twig`.
      .pipe(gulp.dest(svgBuild))
    ;

    return stream;
});