fix: include compiled css and js in the package (#1028)

* fix: include compiled css and js in the package

This PR adjusts the build:package task to also output a compiled minified js and css file. It also
fixes the compiled output including jQuery, which didn't  work due to jQuery ending up bundled by
the umd

* fix(version): add version variable to bundle js (#1024)

.releaserc.json

@@ -17,6 +17,12 @@
       "assets": [
         {"path": "dist/release.zip", "name": "release-${nextRelease.gitTag}.zip"}
       ]
-    }]
+    }],
+    ["semantic-release-plugin-update-version-in-files", {
+    "files": [
+      "package/moj/all.js"
+    ],
+    "placeholder": "0.0.0-development"
+  }]
   ]
 }

gulp/build-javascript.js

@@ -1,13 +1,15 @@
+var concat = require('gulp-concat');
 const gulp = require('gulp');
+const rename = require("gulp-rename");
 const uglify = require("gulp-uglify");
-var concat = require('gulp-concat');
 var umd = require('gulp-umd');
 
 gulp.task('build:javascript', () => {
   return gulp.src([
       'src/moj/namespace.js',
       'src/moj/helpers.js',
       'src/moj/all.js',
+      'src/moj/version.js',
       'src/moj/components/**/!(*.spec).js'
     ])
     .pipe(concat('all.js'))
@@ -22,24 +24,21 @@ gulp.task('build:javascript', () => {
     .pipe(gulp.dest('package/moj/'));
 });
 
-gulp.task('build:javascript-with-jquery', () => {
+gulp.task('build:javascript-minified', () => {
+  return gulp
+    .src("package/moj/all.js")
+    .pipe(uglify())
+    .pipe(rename("moj-frontend.min.js"))
+    .pipe(gulp.dest("package/moj"));
+})
+
+gulp.task('build:javascript-minified-with-jquery', () => {
   return gulp.src([
       'node_modules/jquery/dist/jquery.js',
       'gulp/jquery/scope.js',
-      'src/moj/namespace.js',
-      'src/moj/helpers.js',
-      'src/moj/all.js',
-      'src/moj/components/**/!(*.spec).js',
+      'package/moj/all.js',
     ])
     .pipe(concat('all.jquery.min.js'))
-    .pipe(umd({
-      exports: function() {
-        return 'MOJFrontend';
-      },
-      namespace: function() {
-        return 'MOJFrontend';
-      }
-    }))
     .pipe(uglify())
     .pipe(gulp.dest('package/moj/'));
 });

gulp/build-styles.js

@@ -0,0 +1,21 @@
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+const gulp = require("gulp");
+const postcss = require("gulp-postcss");
+const rename = require("gulp-rename");
+const sass = require("gulp-sass")(require("sass"));
+
+gulp.task("build:css", () => {
+  return gulp
+    .src("gulp/dist-scss/*.scss")
+    .pipe(sass())
+    .pipe(postcss([autoprefixer, cssnano]))
+    .pipe(
+      rename((path) => ({
+        dirname: path.dirname,
+        basename: path.basename.replace("all", "moj-frontend"),
+        extname: ".min.css",
+      }))
+    )
+    .pipe(gulp.dest("package/moj"));
+});

gulpfile.js

@@ -9,7 +9,9 @@ gulp.task(
     "build:clean",
     "build:copy-files",
     "build:javascript",
-    "build:javascript-with-jquery",
+    "build:javascript-minified",
+    "build:javascript-minified-with-jquery",
+    "build:css",
     "build:compress-images",
   )
 );

package.json

@@ -50,7 +50,8 @@
     "moment": "^2.29.4",
     "nunjucks": "^3.2.3",
     "require-dir": "^1.2.0",
-    "sass": "^1.79.3"
+    "sass": "^1.79.3",
+    "semantic-release-plugin-update-version-in-files": "^1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",

src/moj/version.js

@@ -0,0 +1 @@
+MOJFrontend.version = '0.0.0-development'