Issue 6182 - Add build step for fonts and images in help.eyeo.com

gulpfile.js

 /*!
  * This file is part of help.eyeo.com.
  * Copyright (C) 2017-present eyeo GmbH
  *
  * help.eyeo.com is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * help.eyeo.com is distributed in the hope that it will be useful,
@@ skipping 45 matching lines @@
     .pipe(sourcemaps.write("./"))
     .pipe(gulp.dest("./static/dist/js"))
 });
 
 /******************************************************************************
  * Images
  ******************************************************************************/
 
 gulp.task("img", function() {
   return gulp.src(["./static/src/img/**"])
     .pipe(imagemin([

[juliandoucette, 2017/12/14 13:01:44]

This could be an expensive process. I wonder if we can/should make it optional
and/or can use cache somehow?

[ire, 2017/12/16 09:59:24]

If I go with my suggestion for this task to replace the contents of the `src`
directory as well, then I don't think this would be expensive (since the images
will already be optimised?). What do you think?

[juliandoucette, 2017/12/18 17:11:16]

Are you suggesting that we run this task to automatically optimize images before
we commit them?

If so, that seems like a case against "src" and "dist" directories (because we
can add "min" to js/css and src images will no longer be *just* src images).

(I don't think it really matters whether or not we have "src"/"dist" as long as
src files and source maps are accessible.)

[ire, 2017/12/20 08:44:20]

Yes. Since the gulp task is watching the src/img directory, any images put there
would be automatically optimised (in the src folder), plus moved to the dist
folder. 
Yes it seems so. I think the separation of the "src" and "dist" is useful for
the css and js files, because otherwise things can get a bit messy having all
the files together (particularly for the js files since css is already separated
by scss). 

I see that the (proposed) img gulp task would be a bit of a weird application of
the src/dist folders. My inclination is to go ahead anyway, because I think it's
worth having the separation.

       imagemin.svgo({
         plugins: [
           {removeDimensions: false},
           {removeXMLNS: false},
           {cleanupIDs: true}
         ]
       })
     ]))
     .pipe(gulp.dest("./static/dist/img"));
 });
 
 /******************************************************************************
  * Fonts
  ******************************************************************************/
 
 gulp.task("fonts", function() {
   return gulp.src(["./static/src/fonts/**"])

[ire, 2017/12/13 12:15:43]

I couldn't find any information on build/optimisation steps for fonts. I added
this to optimise the svg font files

[juliandoucette, 2017/12/14 13:01:44]

I wonder if this is necessary / how much overhead it adds :/

[ire, 2017/12/16 09:59:24]

Probably not necessary, just thought to mention it in case you had any ideas. 

[juliandoucette, 2017/12/18 17:11:16]

I think we can exclude this then (and add it later if necessary).

[ire, 2017/12/20 08:44:20]

Do you mean to exclude this whole task? Or to exclude the imagemin?

[juliandoucette, 2018/01/04 15:45:35]

Exclude imagemin. Excluding the whole task would mean moving fonts from src to
dist and not ignoring dist (which I may not have a problem with, but it's
unnecessary).

[ire, 2018/01/05 07:56:08]

Ack. That's what I thought, just confirming. Done.

-    .pipe(imagemin([
-      imagemin.svgo({
-        plugins: [
-          {removeDimensions: false},
-          {removeXMLNS: false},
-          {cleanupIDs: true}
-        ]
-      })
-    ]))
     .pipe(gulp.dest("./static/dist/fonts"));
 });
 
 /******************************************************************************
  * Watch
  ******************************************************************************/
 
 gulp.task("watch", function() {
   gulp.watch("./static/src/scss/**/*.scss", ["css"]);
   gulp.watch("./static/src/js/**/*.js", ["js"]);
   gulp.watch("./static/src/img/**", ["img"]);
   gulp.watch("./static/src/fonts/**", ["fonts"]);
 });
 
 /******************************************************************************
  * Default
  ******************************************************************************/
 
 gulp.task("default", ["css", "js", "img", "fonts", "watch"]);