🎉 Include sprite inline in a template.

frontend/gulpfile.js

@@ -2,93 +2,31 @@ const fs = require("fs");
 const path = require("path");
 const l = require("lodash");
 
-const CleanCSS = require("clean-css");
 const gulp = require("gulp");
-const gulpif = require("gulp-if");
-const gzip = require("gulp-gzip");
-
-const mustache = require("gulp-mustache");
-const rename = require("gulp-rename");
+const gulpSass = require("gulp-sass");
+const gulpGzip = require("gulp-gzip");
+const gulpMustache = require("gulp-mustache");
+const gulpRename = require("gulp-rename");
 const svgSprite = require("gulp-svg-sprite");
+const gulpPostcss = require("gulp-postcss");
 
 const mkdirp = require("mkdirp");
 const rimraf = require("rimraf");
 const sass = require("sass");
 const autoprefixer = require("autoprefixer")
-const postcss = require("postcss")
+const clean = require("postcss-clean");
 
 const mapStream = require("map-stream");
-
-
 const paths = {};
 paths.resources = "./resources/";
 paths.output = "./resources/public/";
 paths.dist = "./target/dist/";
-paths.scss = "./resources/styles/**/*.scss";
+
 
 /***********************************************
  * Helpers
  ***********************************************/
 
-function isProduction() {
-  return (process.env.NODE_ENV === "production");
-}
-
-function scssPipeline(options) {
-  const write = (_path, data) => {
-    return new Promise((resolve, reject) => {
-      fs.writeFile(_path, data, function(err) {
-        if (err) { reject(err); }
-        else { resolve(); }
-      });
-    });
-  };
-
-  const touch = (_path) => {
-    return new Promise((resolve, reject) => {
-      return fs.utimes(_path, new Date(), new Date(), () => {
-        resolve(_path);
-      });
-    })
-  };
-
-  const render = (input) => {
-    return new Promise((resolve, reject) => {
-      sass.render({file: input}, async function(err, result) {
-        if (err) {
-          console.log(err.formatted);
-          reject(err);
-        } else {
-          resolve(result.css);
-        }
-      });
-    });
-  };
-
-  const postprocess = (data, input, output) => {
-    return postcss([autoprefixer])
-      .process(data, {map: false, from: input, to: output})
-  };
-
-  return function(next) {
-    const input = options.input;
-    const output = options.output;
-
-    return mkdirp(path.dirname(output))
-      .then(() => render(input))
-      .then((res) => postprocess(res, input, output))
-      .then(async (res) => {
-        await write(output, res.css);
-        await touch(output);
-        return res;
-      })
-      .catch((err) => null)
-      .then(() => {
-        next();
-      });
-  };
-}
-
 // Templates
 
 function readLocales() {
@@ -158,7 +96,7 @@ function templatePipeline(options) {
     const locales = readLocales();
     const manifest = readManifest();
 
-    const tmpl = mustache({
+    const tmpl = gulpMustache({
       ts: ts,
       th: th,
       manifest: manifest,
@@ -168,7 +106,7 @@ function templatePipeline(options) {
 
     return gulp.src(input)
       .pipe(tmpl)
-      .pipe(rename("index.html"))
+      .pipe(gulpRename("index.html"))
       .pipe(gulp.dest(output))
       .pipe(touch());
   };
@@ -178,18 +116,23 @@ function templatePipeline(options) {
  * Generic
  ***********************************************/
 
-gulp.task("scss:main-default", scssPipeline({
-  input: paths.resources + "styles/main-default.scss",
-  output: paths.output + "css/main-default.css"
-}));
+gulpSass.compiler = sass;
 
-gulp.task("scss", gulp.parallel("scss:main-default"));
+gulp.task("scss", function() {
+  return gulp.src(paths.resources + "styles/main-default.scss")
+    .pipe(gulpSass().on('error', gulpSass.logError))
+    .pipe(gulpPostcss([
+      autoprefixer,
+      clean({format: "keep-breaks", level: 1})
+    ]))
+    .pipe(gulp.dest(paths.output + "css/"));
+});
 
 gulp.task("svg:sprite", function() {
   return gulp.src(paths.resources + "images/icons/*.svg")
-    .pipe(rename({prefix: "icon-"}))
-    .pipe(svgSprite({mode:{symbol: {inline: false}}}))
-    .pipe(gulp.dest(paths.output + "images/svg-sprite/"));
+    .pipe(gulpRename({prefix: "icon-"}))
+    .pipe(svgSprite({mode:{symbol: {inline: true}}}))
+    .pipe(gulp.dest(paths.output + "images/sprites/"));
 });
 
 gulp.task("template:main", templatePipeline({
@@ -197,7 +140,7 @@ gulp.task("template:main", templatePipeline({
   output: paths.output
 }));
 
-gulp.task("templates", gulp.series("template:main"));
+gulp.task("templates", gulp.series("svg:sprite", "template:main"));
 
 /***********************************************
  * Development
@@ -226,22 +169,16 @@ gulp.task("dev:dirs", async function(next) {
 });
 
 gulp.task("watch:main", function() {
-  gulp.watch(paths.scss, gulp.series("scss"));
-  gulp.watch(paths.resources + "images/**/*",
-             gulp.series("svg:sprite", "copy:assets:images"));
+  gulp.watch(paths.resources + "styles/**/**.scss", gulp.series("scss"));
+  gulp.watch(paths.resources + "images/**/*", gulp.series("copy:assets:images"));
 
   gulp.watch([paths.resources + "templates/*.mustache",
               paths.resources + "locales.json"],
              gulp.series("templates"));
 });
 
-gulp.task("build", gulp.parallel("scss", "svg:sprite", "templates", "copy:assets"));
-
-gulp.task("watch", gulp.series(
-  "dev:dirs",
-  "build",
-  "watch:main"
-));
+gulp.task("build", gulp.parallel("scss", "templates", "copy:assets"));
+gulp.task("watch", gulp.series("dev:dirs", "build", "watch:main"));
 
 /***********************************************
  * Production
@@ -258,6 +195,6 @@ gulp.task("dist:copy", function() {
 
 gulp.task("dist:gzip", function() {
   return gulp.src(`${paths.dist}**/!(*.gz|*.br|*.jpg|*.png)`)
-    .pipe(gzip({gzipOptions: {level: 9}}))
+    .pipe(gulpGzip({gzipOptions: {level: 9}}))
     .pipe(gulp.dest(paths.dist));
 });