gulpfile.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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('gulp-cheerio');
  7. var through2 = require('through2');
  8. var iconsource = 'public/assets/images/icons/*.svg'
  9. gulp.task('svgstore', function () {
  10. return gulp
  11. .src(iconsource)
  12. .pipe(rename({prefix: 'icon-'}))
  13. .pipe(svgmin())
  14. .pipe(cheerio({
  15. run: function ($) {
  16. // remove green-screen color
  17. $('[fill="#50E3C2"]').removeAttr('fill').parents('[fill="none"]').removeAttr('fill');
  18. $('[fill="#BD0FE1"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
  19. },
  20. parserOptions: { xmlMode: true }
  21. }))
  22. .pipe(svgstore())
  23. .pipe(through2.obj(function (file, encoding, cb) {
  24. var $ = file.cheerio;
  25. var data = $('svg > symbol').map(function () {
  26. var viewBox = $(this).attr('viewBox').split(" ")
  27. return [
  28. '.'+ $(this).attr('id') + ' {' +
  29. ' width: ' + viewBox[2] + 'px;' +
  30. ' height: ' + viewBox[3] + 'px; ' +
  31. '}'
  32. ];
  33. }).get();
  34. var cssFile = new gutil.File({
  35. path: '../../../app/assets/stylesheets/svg-dimensions.css',
  36. contents: new Buffer(data.join("\n"))
  37. });
  38. this.push(cssFile);
  39. this.push(file);
  40. cb();
  41. }))
  42. .pipe(gulp.dest('public/assets/images'));
  43. });
  44. gulp.task('watch', function () {
  45. gulp.watch(iconsource, ['svgstore']);
  46. });
  47. gulp.task('default', ['svgstore', 'watch']);