scss and ts building with gulp, fixed eslint/prettier

front/.eslintrc.js

@@ -1,13 +1,41 @@
 module.exports = {
   env: {
+    browser: true,
     es6: true,
   },
-  extends: ["airbnb-typescript/base", "prettier"],
+  extends: ["airbnb-typescript", "prettier", "prettier/@typescript-eslint"],
   parser: "@typescript-eslint/parser",
+  parserOptions: {
+    sourceType: "module",
+    project: "./tsconfig.json",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
   plugins: ["@typescript-eslint", "prettier"],
   rules: {
-    "no-unused-vars": "off", // broken with typescript
-    "import/no-unresolved": "off", // conflicting with typescript
-    "import/extensions": "off", // conflicting with typescript
+    // prettier
+    "prettier/prettier": ["error"],
+    // TypeScript
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/no-object-literal-type-assertion": "off",
+    // import
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        js: "never",
+        ts: "never",
+      },
+    ],
+  },
+  settings: {
+    "import/resolver": {
+      node: {
+        extensions: [".js", ".ts", ".json"],
+      },
+    },
+    "import/extensions": [".js", ".ts"],
   },
 };

front/.prettierrc.json

@@ -1 +1,5 @@
-{}
+{
+  "semi": true,
+  "printWidth": 100,
+  "trailingComma": "all"
+}

front/gulpfile.js

@@ -0,0 +1,37 @@
+const gulp = require("gulp");
+const ts = require("gulp-typescript");
+const sourceMaps = require("gulp-sourcemaps");
+const babel = require("gulp-babel");
+const sass = require("gulp-sass");
+
+const tsProject = ts.createProject("tsconfig.json");
+const buildTs = () =>
+  tsProject
+    .src()
+    .pipe(sourceMaps.init())
+    .pipe(ts({}))
+    .pipe(
+      babel({
+        presets: ["@babel/env", "minify"],
+        comments: false,
+      }),
+    )
+    .pipe(sourceMaps.write("."))
+    .pipe(gulp.dest("build"));
+
+const buildSass = () =>
+  gulp
+    .src("src/*.scss")
+    .pipe(sourceMaps.init())
+    .pipe(
+      sass({
+        outputStyle: "compressed",
+      }),
+    )
+    .pipe(sourceMaps.write("."))
+    .pipe(gulp.dest("build"));
+
+gulp.task("build:ts", buildTs);
+gulp.task("build:sass", buildSass);
+
+gulp.task("build", gulp.parallel(buildTs, buildSass));

front/package.json

@@ -5,17 +5,39 @@
   "license": "AGPL-3.0",
   "author": "Laura Liberda <laura@selfisekai.rocks>, Dominika Liberda <dominika@sdomi.pl>",
   "scripts": {
-    "build": "tsc && cp -rT build ../webroot/assets/"
+    "build": "yarn gulp build && yarn build:copy",
+    "build:copy": "cp -rT build ../webroot/assets/",
+    "build:ts": "yarn gulp build:ts",
+    "build:sass": "yarn gulp build:sass",
+    "lint": "yarn lint:eslint",
+    "lint:fix": "yarn lint:prettier:fix && yarn lint:eslint:fix",
+    "lint:eslint": "yarn eslint ./src",
+    "lint:eslint:fix": "yarn eslint --fix ./src",
+    "lint:prettier:fix": "yarn prettier --check --write ./src"
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@types/gulp": "^4.0.7",
+    "@types/gulp-babel": "^6.1.29",
+    "@types/gulp-sass": "^4.0.0",
+    "@types/gulp-sourcemaps": "^0.0.32",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
+    "babel-preset-minify": "^0.5.1",
+    "bulma": "^0.9.1",
     "eslint": "^7.10.0",
     "eslint-config-airbnb-typescript": "^11.0.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "node-sass": "^4.14.1",
     "prettier": "^2.1.2",
     "typescript": "^4.0.3"
   }

front/src/style.scss

@@ -0,0 +1,2 @@
+// TODO: only import necessary styles
+@import "../node_modules/bulma/bulma.sass";