back to npm/webpack, removed gulp

.github/workflows/ci.yml

@@ -24,26 +24,26 @@ jobs:
       - name: Test
         run: dotnet test --no-restore --verbosity normal
 
-  # build-Js:
+  build-Js:
 
-  #   runs-on: ubuntu-latest
-  #   strategy:
-  #     fail-fast: false
-  #     matrix:
-  #       node: [16]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [16]
     
-  #   steps:
-  #     - uses: actions/checkout@v2
+    steps:
+      - uses: actions/checkout@v2
       
-  #     - name: Install Node ${{ matrix.node }}
-  #       uses: actions/setup-node@v2
-  #       with:
-  #         node-version: ${{ matrix.node }}
+      - name: Install Node ${{ matrix.node }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
 
-  #     - name: Install Node Packages
-  #       working-directory: ./Selector.Web
-  #       run: npm ci
+      - name: Install Node Packages
+        working-directory: ./Selector.Web
+        run: npm ci
       
-  #     - name: Compile Front-end
-  #       working-directory: ./Selector.Web
-  #       run: npm run build --if-present
+      - name: Compile Front-end
+        working-directory: ./Selector.Web
+        run: npm run build --if-present

Selector.Web/Pages/Shared/_Layout.cshtml

@@ -41,9 +41,7 @@
         </div>
     </footer>
 
-    <script src="~/lib/jquery/dist/jquery.min.js"></script>
-    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="~/js/site.js" asp-append-version="true"></script>
+    <script type="module" src="~/js/app.bundle.js"></script>
 
     @await RenderSectionAsync("Scripts", required: false)
 </body>

Selector.Web/gulpfile.js

@@ -1,21 +0,0 @@
-/// <binding AfterBuild='default' Clean='clean' />
-/*
-This file is the main entry point for defining Gulp tasks and using Gulp plugins.
-Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
-*/
-
-var gulp = require("gulp");
-var del = require("del");
-
-var paths = {
-  scripts: ["scripts/**/*.js", "scripts/**/*.ts", "scripts/**/*.map"],
-};
-
-gulp.task("clean", function () {
-  return del(["wwwroot/scripts/**/*"]);
-});
-
-gulp.task("default", function (done) {
-    gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
-    done();
-});

Selector.Web/package.json

@@ -5,7 +5,8 @@
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "gulp"
+    "build": "npx webpack build --config ./webpack.prod.js",
+    "devbuild": "npx webpack build --config ./webpack.dev.js"
   },
   "repository": {
     "type": "git",
@@ -17,8 +18,15 @@
     "url": "https://github.com/Sarsoo/Selector/issues"
   },
   "homepage": "https://github.com/Sarsoo/Selector#readme",
+  "dependencies": {
+    "bootstrap": "^5.1.3"
+  },
   "devDependencies": {
-    "del": "^6.0.0",
-    "gulp": "^4.0.2"
+    "clean-webpack-plugin": "^4.0.0",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.4.4",
+    "webpack": "^5.59.1",
+    "webpack-cli": "^4.9.1",
+    "webpack-merge": "^5.8.0"
   }
 }

Selector.Web/scripts/index.ts

@@ -1,3 +1,4 @@
+import {SecondWatcher} from "./second";
 
 namespace Selector.Web {
     class Watcher {
@@ -5,3 +6,8 @@ namespace Selector.Web {
         static ex2: string = "awdwad";
     }
 }
+
+let sec = new SecondWatcher();
+
+console.log("hello world!");
+console.log(sec);

Selector.Web/scripts/second.ts

@@ -0,0 +1,5 @@
+
+export class SecondWatcher {
+    public static example: string = "string";
+    public static ex2: string = "awdwad";
+}

Selector.Web/tsconfig.json

@@ -1,14 +1,15 @@
 {
+    "compileOnSave": true,
     "compilerOptions": {
         "sourceMap": true,
         "noImplicitAny": true,
         "noEmitOnError": true,
         "module": "es6",
         "target": "es5",
-        "allowJs": true
+        "allowJs": true,
+        "outDir": "./wwwroot/js"
     },
-    "exclude": [
-        "node_modules",
-        "wwwroot"
+    "include": [
+        "scripts/**/*"
     ]
 }

Selector.Web/webpack.common.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    entry: {
+        app: './scripts/index.ts',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                exclude: /node_modules/,
+            }
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin()
+    ],
+    resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'wwwroot/js')
+    }
+};

Selector.Web/webpack.dev.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+	mode: 'development',
+	devtool: 'inline-source-map',
+	watch: true
+});

Selector.Web/webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+	mode: 'production',
+	devtool: 'source-map'
+});