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,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 const gulp = require("gulp");
 const gutil = require("gulp-util");
 const sourcemaps = require("gulp-sourcemaps");
 const rename = require("gulp-rename");
 const sass = require("gulp-sass");
 const postcss = require("gulp-postcss");
 const scss = require("postcss-scss");
 const autoprefixer = require("autoprefixer");
 const minify = require("gulp-minify");
+const imagemin = require('gulp-imagemin');
 
 /******************************************************************************
  * CSS
  ******************************************************************************/
 
 gulp.task("css", function() {
   return gulp.src("./static/src/scss/main.scss")
     .pipe(sourcemaps.init())
     .pipe(postcss([autoprefixer()], {syntax: scss}).on("error", gutil.log))
     .pipe(sass({outputStyle: "compressed"}).on("error", gutil.log))
@@ skipping 12 matching lines @@
     .pipe(minify({
       noSource: true,
       ext: {min:".min.js"},
       preserveComments: "some"
     }))
     .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", "watch"]);
+gulp.task("default", ["css", "js", "img", "fonts", "watch"]);