Use gulp instead of flask-assets

app/__init__.py

@@ -1,5 +1,4 @@
 from flask import Flask
-from flask_assets import Bundle, Environment
 from flask_compress import Compress
 from flask_limiter import Limiter
 from flask_limiter.util import get_remote_address
@@ -33,8 +32,7 @@
 
 
 def create_app(config_class=Config):
-    app = Flask(__name__, static_url_path="/assets")
-    assets = Environment(app)
+    app = Flask(__name__, static_url_path="/assets", static_folder=Config.STATIC_DIR)
     app.config.from_object(config_class)
     app.jinja_env.lstrip_blocks = True
     app.jinja_env.trim_blocks = True
@@ -97,7 +95,6 @@ def create_app(config_class=Config):
     }
 
     # Initialise app extensions
-    assets.init_app(app)
     compress.init_app(app)
     csrf.init_app(app)
     limiter.init_app(app)
@@ -117,24 +114,6 @@ def create_app(config_class=Config):
     app.config["ASSETS_AUTO_BUILD"] = True  # Enable automatic rebuilding of assets
     app.config["ASSETS_MANIFEST"] = "cache"  # Enable cache manifest
 
-    # Create static asset bundles
-    css = Bundle(
-        "src/scss/govuk-frontend.scss",
-        filters="libsass, cssmin",  # Use SCSS filter to convert SCSS to CSS, then CSS minification
-        output="dist/css/application-%(version)s.min.css",
-    )
-    # Concat all JS files into one.
-    js = Bundle(
-        "src/js/*.js",
-        "*.js",
-        filters="jsmin",
-        output="dist/js/application-%(version)s.min.js",
-    )
-    if "css" not in assets:
-        assets.register("css", css)
-    if "js" not in assets:
-        assets.register("js", js)
-
     # Register blueprints
     from app.main import bp as main_bp
 

app/config/__init__.py

@@ -4,6 +4,9 @@
 # Allows .env to be used in project for local development.
 load_dotenv()
 
+here = lambda *x: os.path.join(os.path.abspath(os.path.dirname(__file__)), *x)
+PROJECT_ROOT = here("..")
+root = lambda *x: os.path.join(os.path.abspath(PROJECT_ROOT), *x)
 
 class Config(object):
     ENVIRONMENT = os.environ.get("CLA_ENVIRONMENT", "production")
@@ -20,3 +23,4 @@ class Config(object):
     SESSION_COOKIE_HTTPONLY = True
     # SESSION_COOKIE_SECURE = True
     SENTRY_DSN = os.environ.get("SENTRY_DSN")
+    STATIC_DIR = os.path.join(root(), "static/dist")

app/templates/base.html

@@ -21,7 +21,8 @@
     <meta name="description" content="{{config['SERVICE_NAME']}}">
     <meta name="keywords" content="GOV.UK, govuk, gov, government, uk, frontend, ui, user interface, jinja, python, flask, port, template, templating, macro, component, design system, html, forms, wtf, wtforms, widget, widgets, example">
     <meta name="author" content="{{config['DEPARTMENT_NAME']}}">
-    {% assets "css" %}<link type="text/css" href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
+    <link type="text/css" href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet">
+
 {% endblock %}
 
 {% block bodyStart %}
@@ -168,10 +169,8 @@
 {% endblock %}
 
 {% block bodyEnd %}
-    {% assets "js" %}
         <script nonce="{{ csp_nonce() }}" type="module">
-            import { initAll } from "{{ ASSET_URL }}";
+            import { initAll } from "{{ url_for('static', filename='scripts.js') }}";
             initAll();
         </script>
-    {% endassets %}
 {% endblock %}

gulpfile.js

@@ -0,0 +1,58 @@
+const fs = require('node:fs');
+
+const gulp= require("gulp")
+const sass = require('gulp-sass')(require('sass'));
+const minify = require('gulp-minify');
+var concat = require('gulp-concat');
+
+
+const STYLES_PATHS = ["app/static/src/**/*.scss"]
+const SCRIPTS_PATHS = ["app/static/src/**/*.js", "node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js"]
+const ASSETS_PATH = ["node_modules/govuk-frontend/dist/govuk/assets/**/*"]
+const DST_PATH = "app/static/dist"
+
+function clean(cb) {
+    const dir = DST_PATH
+    fs.rmSync(dir, { recursive: true, force: true }, err => {
+      if (err) {
+        throw err;
+      }
+      console.log(`${dir} is deleted!`);
+    });
+    cb();
+}
+function create(cb) {
+    const dir = DST_PATH;
+    try {
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir);
+        console.log(`${dir} is created!`);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+    cb()
+}
+function buildStyles(cb){
+    return gulp.src(STYLES_PATHS)
+        .pipe(sass({outputStyle: "compressed"}).on('error', sass.logError))
+        .pipe(minify())
+        .pipe(concat("styles.css"))
+        .pipe(gulp.dest(DST_PATH));
+    cb();
+}
+
+function buildsSripts(cb){
+    return gulp.src(SCRIPTS_PATHS)
+        .pipe(concat("scripts.js"))
+        .pipe(gulp.dest(DST_PATH));
+    cb();
+}
+
+function buildImages(cb) {
+    return gulp.src(ASSETS_PATH)
+        .pipe(gulp.dest(DST_PATH));
+    cb();
+}
+
+exports.default = gulp.series(clean, create, buildStyles, buildsSripts, buildImages);