gulpfile.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. var gulp = require('gulp');
  2. var gutil = require('gulp-util');
  3. var rename = require('gulp-rename');
  4. var svgstore = require('gulp-svgstore');
  5. var svgmin = require('gulp-svgmin');
  6. var cheerio = require('cheerio');
  7. var gcheerio = require('gulp-cheerio');
  8. var through2 = require('through2');
  9. var iconsource = 'icons/*.svg'
  10. function build(cb) {
  11. gulp
  12. .src(iconsource)
  13. .pipe(rename({prefix: 'icon-'}))
  14. .pipe(svgmin({
  15. js2svg: {
  16. pretty: true
  17. },
  18. plugins: [
  19. {
  20. removeViewBox: false,
  21. removeTitle: false,
  22. },
  23. ]
  24. }))
  25. .pipe(gcheerio({
  26. run: function ($) {
  27. // remove green-screen color
  28. $('[fill="#50E3C2"]').removeAttr('fill').parents('[fill="none"]').removeAttr('fill');
  29. $('[fill="#BD0FE1"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
  30. // color in Sketch changed slightly BD0FE1 -> BD10E0
  31. $('[fill="#BD10E0"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
  32. },
  33. parserOptions: { xmlMode: true }
  34. }))
  35. .pipe(svgstore())
  36. .pipe(through2.obj(function (file, encoding, cb) {
  37. // Side effect: generate app/assets/stylesheets/svg-dimensions.css with
  38. // information about the available icon sizes.
  39. var $ = cheerio.load(file.contents)
  40. var data = $('svg > symbol').map(function (_i, tag) {
  41. var viewBox = tag.attribs.viewbox.split(" ")
  42. return [
  43. '.'+ $(this).attr('id') + ' {' +
  44. ' width: ' + viewBox[2] + 'px;' +
  45. ' height: ' + viewBox[3] + 'px; ' +
  46. '}'
  47. ];
  48. }).get();
  49. var cssFile = new gutil.File({
  50. path: '../../../app/assets/stylesheets/svg-dimensions.css',
  51. contents: Buffer.from(data.join("\n"))
  52. });
  53. this.push(cssFile);
  54. this.push(file);
  55. cb();
  56. }))
  57. .pipe(gulp.dest('./'));
  58. cb();
  59. }
  60. exports.default = function() {
  61. gulp.watch(iconsource, build)
  62. }
  63. exports.build = build