🏗️ Adding JS stack for complex admin UI

.babelrc

@@ -0,0 +1,7 @@
+{
+   "comments":false,
+   "compact":true,
+   "presets":[
+      "@babel/preset-env"
+   ]
+}

.gitignore

@@ -16,6 +16,7 @@ __pycache__
 src/openzaak/static/fonts
 src/openzaak/static/css/screen.css
 src/openzaak/static/css/admin/
+src/openzaak/static/js/
 docs/_build
 
 # Coverage reports

build/paths.js

@@ -29,5 +29,11 @@ module.exports = {
     cssDir: `${staticRoot}css/`,
 
     // Path to the fonts directory
-    fontsDir: `${staticRoot}fonts/`
+    fontsDir: `${staticRoot}fonts/`,
+
+    jsSrc: `${sourcesRoot}js/**/*.js`,
+
+    jsEntryAdmin: `${sourcesRoot}js/admin.js`,
+
+    jsDir: `${staticRoot}js/`,
 };

build/tasks/build.js

@@ -1,5 +1,8 @@
 const gulp = require('gulp');
 const { sass } = require('./sass');
+const { js } = require('./js');
 
-gulp.task('build', sass);
-exports.build = sass;
+const build = gulp.parallel(sass, js);
+
+gulp.task('build', build);
+exports.build = build;

build/tasks/js.js

@@ -0,0 +1,23 @@
+'use strict';
+var gulp = require('gulp');
+var webpack = require('webpack-stream');
+var paths = require('../paths');
+var webpackConfig = require('../../webpack.config.js');
+
+
+/**
+ * Js task
+ * Run using "gulp js"
+ * Runs webpack to compile javascript
+ */
+function js() {
+    return gulp.src(paths.jsEntryAdmin)
+        .pipe(webpack(webpackConfig))
+            .on('error', function () {
+              this.emit('end');
+            })
+        .pipe(gulp.dest(webpackConfig.output.path));
+};
+
+gulp.task('js', js)
+exports.js = js;

build/tasks/watch.js

@@ -2,7 +2,7 @@
 var gulp = require('gulp');
 var paths = require('../paths');
 const { sass } = require('./sass');
-
+const { js } = require('./js');
 
 /**
  * Watch-sass task
@@ -14,8 +14,28 @@ function watchSASS() {
     gulp.watch(paths.sassSrc, sass);
 }
 
+/**
+ * Watch-js task
+ * Run using "gulp watch-js"
+ * Runs "js" and "lint" tasks instantly and when any file in paths.jsSrc changes
+ */
+function watchJS() {
+    js();
+    gulp.watch([paths.jsSrc], js);
+}
+
+/**
+ * Watch task
+ * Run using "gulp watch"
+ * Runs "watch-js" and "watch-sass" tasks
+ */
+const watch = gulp.parallel(watchJS, watchSASS);
+
 exports.watchSASS = watchSASS;
 gulp.task('watch-sass', watchSASS);
 
-exports.watch = watchSASS;
-gulp.task('watch', watchSASS);
+exports.watchJS = watchJS;
+gulp.task('watch-js', watchJS);
+
+exports.watch = watch;
+gulp.task('watch', watch);