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

gulpfile.js

Index: gulpfile.js
===================================================================
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -20,16 +20,17 @@
 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())
@@ -52,21 +53,59 @@
       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"]);