Automate SVG steps

[jdaudier]

I feel like the first two steps of the SVG process can be automated with this grunt task perhaps?

So that all we have to do is drop a SVG file into the src/svg-icons directory and it'll be minified after running a grunt task.

Thoughts? @paulfalgout

[peterblazejewicz]

@jdaudier Something like this?

grunt dev
Running "clean:dist" (clean) task
>> 1 path cleaned.

Running "connect:server" (connect) task
Started connect web server on http://0.0.0.0:8000

Running "notify:watch" (notify) task

Running "watch" task
Waiting...
Running "svgmin:dist" (svgmin) task
✔ src/svg-icons/github-mark.svg (saved 1 B 0%)
✔ src/svg-icons/github-square.svg (saved 10 B 0%)
✔ src/svg-icons/gitter-square.svg (saved 0 B 0%)
✔ src/svg-icons/hamburger.svg (saved 21 B 4%)
✔ src/svg-icons/play.svg (saved 0 B 0%)
✔ src/svg-icons/twitter-square.svg (saved 2 B 0%)
✔ src/svg-icons/twitter.svg (saved 0 B 0%)
Total saved: 34 B

Running "svgstore:default" (svgstore) task
File src/images/svg-sprite.svg created.

Running "sass:dist" (sass) task
....

diff --git a/gruntfile.js b/gruntfile.js
index 4189736..e83f51d 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -105,6 +105,20 @@ module.exports = function(grunt) {
       }
     },

+    svgmin: {
+      options: {
+        // custom *disabled* features
+        plugins: [],
+      },
+      dist: {
+        files: [{
+          expand: true,
+          cwd: 'src/svg-icons/',
+          src: ['*.svg'],
+          dest: 'src/svg-icons/'
+        }]
+      }
+    },
     svgstore: {
       options: {},
       default : {
@@ -142,7 +156,7 @@ module.exports = function(grunt) {
       },
       svg: {
         files: 'src/svg-icons/*.svg',
-        tasks: ['svgstore', 'sass']
+        tasks: ['svgmin', 'svgstore', 'sass']
       },
       styles: {
         files: 'src/stylesheets/**/*.scss',
@@ -239,6 +253,7 @@ module.exports = function(grunt) {
   ]);

   grunt.registerTask('compile-site', [
+    'svgmin',
     'svgstore',
     'sass',
     'concat',
diff --git a/package.json b/package.json
index f211148..8b68e98 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "gitty": "samccone/gitty",
     "grunt": "0.4.5",
     "grunt-contrib-clean": "0.6.0",
+    "grunt-contrib-concat": "0.5.0",
     "grunt-contrib-connect": "0.9.0",
     "grunt-contrib-copy": "0.5.0",
     "grunt-contrib-imagemin": "0.9.2",
@@ -45,6 +46,7 @@
     "grunt-notify": "0.4.1",
     "grunt-postcss": "0.2.0",
     "grunt-sass": "0.17.0",
+    "grunt-svgmin": "^2.0.0",
     "grunt-svgstore": "0.5.0",
     "handlebars": "2.0.0",
     "highlight.js": "8.2.0",
@@ -53,7 +55,6 @@
     "marked": "0.3.2",
     "mkdirp": "0.5.0",
     "semver": "4.2.0",
-    "underscore": "1.6.0",
-    "grunt-contrib-concat": "0.5.0"
+    "underscore": "1.6.0"
   }
 }

• add grunt-svgmin to deps
• add svgmin task to grunt file and wire it up to be run before svgstore

I can upload a branch so you could play with it (and then could do PR)

Thanks!

[paulfalgout]

Hmm so I think the first 2 steps are optional. svgo will strip a bunch of stuff out of your svg.. and sometimes you do want those things.. But for people copying some random vector from an illustrator created svg or something similar it'll remove a bunch of the added junk that won't be used.

Perhaps we should just change the instructions so that step 1 says something like

Drop an optimized SVG file into the src/svg-icons directory (svgo is a good optimization tool)

[jdaudier]

@peterblazejewicz if you can load up a branch, that'll be great. I'm not super familiar with writing gruntfiles so that'll be helpful.

@paulfalgout will look at @peterblazejewicz's branch and get back to ya. Tks!

[peterblazejewicz]

@jdaudier here: https://github.com/peterblazejewicz/marionettejs.com/tree/add/grunt-svgmin

[paulfalgout]

Yeah I think I'm :-1: on this, but perhaps I could be convinced otherwise.

On the one hand, having this reduces any need for concern about optimizing the svgs and it makes it consistent.

On the other hand, the optimization is nice, but in the end moderately insignificant. And while it's typically ideal to optimize, there are so many different ways to use svg, and svgo has to be customized differently if you use anything outside of the norm.

What this means is if we go ahead with forcing the optimization we will be preventing certain features of svg from being added to the sprite, as by default these features are stripped by svgo, which is what you'd want for the typical case.

That said it's difficult to come up with a specific use case we may want, but things like copyright info and tag ids will be stripped from svgs.. ids being useful if you want some specific javascript interaction.

So I suppose if svgs are only ever used for simple icons, we should do it.. otherwise we should just inform on how to optimize, maybe remove it as necessary steps.. and if the file doesn't get optimized it's really not too big of a deal.. particularly after gzipping..

[jdaudier]

hi @paulfalgout and @peterblazejewicz - sorry I didn't get a chance to review this yet... maybe in the next few days. i just got my laptop back after lending it to a friend.