Recreate translations when changed on dev (#5042)

build-scripts/gulp/gather-static.js

@@ -65,6 +65,12 @@ function copyMapPanel(staticDir) {
   );
 }
 
+gulp.task("copy-translations", (done) => {
+  const staticDir = paths.static;
+  copyTranslations(staticDir);
+  done();
+});
+
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
   const staticPath = genStaticPath(paths.static);

build-scripts/gulp/translations.js

@@ -12,6 +12,7 @@ const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
 const { mapFiles } = require("../util");
 const env = require("../env");
+const paths = require("../paths");
 
 const inDir = "translations";
 const workDir = "build-translations";
@@ -144,7 +145,7 @@ gulp.task(
   "create-test-translation",
   gulp.series("create-test-metadata", function createTestTranslation() {
     return gulp
-      .src("src/translations/en.json")
+      .src(path.join(paths.translations_src, "en.json"))
       .pipe(
         transform(function(data, file) {
           return recursiveEmpty(data);
@@ -166,7 +167,7 @@ gulp.task(
  */
 gulp.task("build-master-translation", function() {
   return gulp
-    .src("src/translations/en.json")
+    .src(path.join(paths.translations_src, "en.json"))
     .pipe(
       transform(function(data, file) {
         return lokaliseTransform(data, data, file);
@@ -341,7 +342,7 @@ gulp.task(
       return gulp
         .src(
           [
-            "src/translations/translationMetadata.json",
+            path.join(paths.translations_src, "translationMetadata.json"),
             workDir + "/testMetadata.json",
             workDir + "/translationFingerprints.json",
           ],

build-scripts/gulp/webpack.js

@@ -3,6 +3,7 @@ const gulp = require("gulp");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
 const log = require("fancy-log");
+const path = require("path");
 const paths = require("../paths");
 const {
   createAppConfig,
@@ -58,9 +59,13 @@ const handler = (done) => (err, stats) => {
 gulp.task("webpack-watch-app", () => {
   // we are not calling done, so this command will run forever
   webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
-    {},
+    { ignored: /build-translations/ },
     handler()
   );
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-translations", "copy-translations")
+  );
 });
 
 gulp.task(

build-scripts/paths.js

@@ -29,4 +29,6 @@ module.exports = {
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_root: path.resolve(__dirname, "../hassio/build"),
   hassio_publicPath: "/api/hassio/app/",
+
+  translations_src: path.resolve(__dirname, "../src/translations"),
 };