Modern build system

Replace gulp with direct esbuild and sass

Author: PowerKiKi

.github/workflows/main.yml

@@ -43,10 +43,7 @@ jobs:
             # Prepare our app
             - run: mysql --protocol=tcp --user=root --execute='SET GLOBAL sql_mode = "";'
             - run: cp application/configs/application.sample.ini application/configs/application.ini
-            - run: composer install --ansi --classmap-authoritative
-            - run: php bin/update_database.php
-            - run: yarn install --frozen-lockfile
-            - run: ./node_modules/.bin/gulp
+            - run: ./bin/build.sh
 
             # Lint and tests
             - run: ./vendor/bin/php-cs-fixer fix --format=checkstyle | cs2pr

README.md

@@ -11,17 +11,16 @@ an IMDb movie). This is possible thanks to the use of user-script (greasemonkey
 * PHP with cURL module
 * Apache
 * MariaDB
-* gulp
 
 ## Installation
 
 1. Create a database and a user in MariaDB (eg: "mqueue")
-2. Download latest version: ``git clone https://github.com/PowerKiKi/mqueue.git``
-3. In application/configs/, copy application.sample.ini to application.ini and edit database configuration
-4. Run ``yarn install && gulp``
+2. Download latest version: `git clone https://github.com/PowerKiKi/mqueue.git`
+3. In `application/configs/`, copy `application.sample.ini` to `application.ini` and edit database configuration
+4. Run `./bin/build.sh`
 5. Open mQueue in your browser (something similar to http://mqueue/ or http://localhost/mqueue/public/)
 
 ## Upgrade
 
-1. Download latest version: ``git pull``
-2. Run ``yarn install && gulp``
+1. Download latest version: `git pull`
+2. Run `./bin/build.sh`

application/sass/_local.scss

@@ -1,3 +1,4 @@
+@use "variables";
 :root {
     --font-color: #595959;
 }
@@ -25,17 +26,17 @@ body {
     background: white;
     width: 900px;
     margin: 0 auto;
-    border: 6px solid $color1;
+    border: 6px solid variables.$color1;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     padding-bottom: 2em;
 }
 
 #header {
-    background-image: repeating-linear-gradient(-45deg, $color1, $color1 15px, $color2 15px, $color2 30px);
-    background-image: -webkit-repeating-linear-gradient(-45deg, $color1, $color1 15px, $color2 15px, $color2 30px);
-    background-color: $color2;
+    background-image: repeating-linear-gradient(-45deg, variables.$color1, variables.$color1 15px, variables.$color2 15px, variables.$color2 30px);
+    background-image: -webkit-repeating-linear-gradient(-45deg, variables.$color1, variables.$color1 15px, variables.$color2 15px, variables.$color2 30px);
+    background-color: variables.$color2;
     h1 {
         margin: 0px;
         a {
@@ -389,7 +390,7 @@ div.flashmessenger {
     #search {
         opacity: 0.8;
         width: 10em;
-        border: 2px solid $color1;
+        border: 2px solid variables.$color1;
         &:hover, &:focus {
             opacity: 1;
         }

application/sass/_status.scss

@@ -1,4 +1,5 @@
-@import "variables";
+@use "variables";
+@use "sass:math";
 
 $status_dimension: 16px;
 $preloader_width : 5 * $status_dimension;
@@ -33,9 +34,9 @@ $preloader_height: 6px;
 
         > .preloader {
             display: block !important;
-            margin-top: ($status_dimension - $preloader_height) / 2;
+            margin-top: math.div($status_dimension - $preloader_height, 2);
             height: $preloader_height;
-            background-color: $color1;
+            background-color: variables.$color1;
             border-radius: 3px;
             animation-name: preloaderAnimation;
             animation-duration: 1.5s;

application/sass/application.scss

@@ -1,13 +1,14 @@
+@use "sass:meta";
+@use "variables";
 @CHARSET "UTF-8";
 
-@import "variables";
-@import "local";
-@import "status";
+@include meta.load-css("local");
+@include meta.load-css("status");
 
 @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
-    @import "handheld";
+    @include meta.load-css("handheld");
 }
 
 @media print {
-    @import "print";
+    @include meta.load-css("print");
 }

application/sass/both.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @CHARSET "UTF-8";
 
-@import "status";
+@include meta.load-css("status");

bin/build.sh

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+
+# Try to use specific PHP, or fallback to default version
+PHP=`which php7.2` || PHP='php'
+COMPOSER="$PHP `which composer` --no-interaction --no-plugins"
+
+# Exit script on any error
+set -e
+
+echo "Installing git hooks..."
+ln -fs ../../bin/pre-commit.sh .git/hooks/pre-commit
+
+echo "Updating Node.js packages..."
+yarn install
+
+echo "Updating all PHP dependencies via composer..."
+$COMPOSER install --classmap-authoritative --ignore-platform-reqs
+
+echo "Updating database..."
+$PHP ./bin/update_database.php
+
+echo "Compiling CSS..."
+./node_modules/.bin/sass --style=compressed --no-source-map application/sass/:public/css/
+
+echo "Compiling JavaScript..."
+./node_modules/.bin/esbuild --minify public/js/*.js --outdir=public/js/min
+cat public/js/application/*.js  | ./node_modules/.bin/esbuild --minify > public/js/min/application.js

bin/sql/version.0.sql

@@ -20,7 +20,7 @@ SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
 --
 
 CREATE TABLE IF NOT EXISTS `movie` (
-  `id` varchar(7) collate utf8_bin NOT NULL,
+  `id` varchar(8) collate utf8_bin NOT NULL,
   `dateUpdate` timestamp NOT NULL default CURRENT_TIMESTAMP,
   `title` varchar(512) collate utf8_bin NOT NULL,
   PRIMARY KEY  (`id`)
@@ -35,7 +35,7 @@ CREATE TABLE IF NOT EXISTS `movie` (
 CREATE TABLE IF NOT EXISTS `status` (
   `id` int(11) NOT NULL auto_increment,
   `idUser` int(11) NOT NULL,
-  `idMovie` varchar(7) collate utf8_bin NOT NULL,
+  `idMovie` varchar(8) collate utf8_bin NOT NULL,
   `rating` tinyint(4) NOT NULL,
   PRIMARY KEY  (`id`),
   UNIQUE KEY `unique_status` (`idUser`,`idMovie`),

gulpfile.js

@@ -2,12 +2,10 @@
   "name": "mqueue",
   "private": true,
   "dependencies": {
-    "gulp": "^4.0.2",
-    "gulp-concat": "^2.6.1",
-    "gulp-sass": "^4.1.0",
-    "gulp-terser": "^2.0.1",
-    "highcharts": "^9.0.1",
+    "esbuild": "^0.25.1",
+    "highcharts": "^12.1.2",
     "jquery": "^3.6.0",
+    "sass": "^1.86.0",
     "timeago": "^1.6.7"
   }
 }