@videinfra/static-website-builder 1.17.0 → 2.0.0-beta.1

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.0.0] - 2026-01-27
+### Added
+- Replaced webpack with rolldown
+
+## [1.17.1] - 2026-01-23
+### Added
+- Sitemap generation in watch mode too
+
 ## [1.17.0] - 2026-01-15
 ### Added
 - Added sitemap task

package/README.md

@@ -5,7 +5,11 @@
 
 [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url]
 
-`static-website-builder` is a customizable static site project builder powered by Gulp, Webpack, Babel, SASS, PostCSS, TwigJS, BrowserSync
+`static-website-builder` is a customizable static site project builder powered by Gulp, Rolldown, SASS, PostCSS, TwigJS, BrowserSync
+
+## Requirements
+
+- Node.js >= 20.0.0
 
 ## Features
 
@@ -15,7 +19,7 @@
 - TWIG: Optional TwigJS template engine with optional plugins for additional functions and filters
 - Stylesheets: Autoprefixing and minification with PostCSS support 
 - SASS: Optional SASS / SCSS compilation
-- Javascript: Transpilation with Babel, bundling and minification
+- Javascript/Typescript: Transpilation, bundling and minification with rolldown
 - SVG icons: Sprite generation from individual SVG files
 
 

package/init/test/src/html/other.twig

@@ -1,3 +1,9 @@
 {% extends 'layouts/base.twig' %}
 
-{% block body %}Another file{% endblock %}
+{% block head %}
+    <link rel="stylesheet" href="/assets/stylesheets/nested-calc-test.css">
+{% endblock %}
+{% block body %}
+    Another file
+    <script type="module" src="/assets/javascripts/other.js"></script>
+{% endblock %}

package/init/test/src/javascripts/_entries-alt.js

@@ -2,12 +2,9 @@
 * All files listed in here are created / compiled and additionally
 * shared.js is automatically created, which contains all common JS (chunks / modules imported from more than 1 entry files).
 */
-module.exports = {
-    'shared': [
-        './common'
-    ],
+export default {
     'main': [
-        './common',
-        './main'
+        'common.js',
+        'main.js',
     ]
 };

package/init/test/src/javascripts/_entries.js

@@ -2,16 +2,18 @@
 * All files listed in here are created / compiled and additionally
 * shared.js is automatically created, which contains all common JS (chunks / modules imported from more than 1 entry files).
 */
-module.exports = {
-    'shared': [
-        './common'
-    ],
+export default {
     'main': [
-        './common',
-        './main'
+        'common.js',
+        'main.js',
     ],
     'other': [
-        './common',
-        './other'
-    ]
+        'common.js',
+        'other.js',
+    ],
+    'something': [
+        'common.js',
+        'something.ts',
+    ],
 };
+

package/init/test/src/javascripts/something.ts

@@ -0,0 +1,9 @@
+type Something = {
+    name: string;
+}
+
+const something: Something = {
+    name: 'something',
+}
+
+console.log(something);

package/lib/generate-gulp-tasks.js

@@ -5,6 +5,15 @@ const { series, parallel } = require('gulp');
 const { DEFAULT_TASKS, BUILD_TASKS } = require('./task-order');
 const resolveDynamicTask = require('./gulp/resolve-dynamic-task');
 
+/**
+ * Sort tasks by .order property
+ *
+ * @param {array} tasks Tasks
+ * @returns {array} Sorted tasks
+ */
+function sortTasks (tasks) {
+    return tasks.sort((a, b) => (a.order || 0) - (b.order || 0));
+}
 
 /**
  * Organize and order tasks
@@ -46,8 +55,8 @@ function generateTaskList (taskConfig) {
         }
     }
 
-    taskList.default = filter(taskList.default, taskGroup => taskGroup.length);
-    taskList.build = filter(taskList.build, taskGroup => taskGroup.length);
+    taskList.default = filter(taskList.default, taskGroup => taskGroup.length).sort(sortTasks);
+    taskList.build = filter(taskList.build, taskGroup => taskGroup.length).sort(sortTasks);
 
     return taskList;
 }

package/lib/get-path.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const memoize = require('nano-memoize');
+const { nanomemoize } = require('nano-memoize');
 const getConfig = require('./get-config');
 
 
@@ -9,7 +9,7 @@ const getConfig = require('./get-config');
  * @returns {object} Configuration
  */
 
-const getPathConfig = memoize(function () {
+const getPathConfig = nanomemoize(function () {
     return getConfig.getConfig().paths;
 });
 

package/lib/globs-helper.js

@@ -1,35 +1,67 @@
-const path = require('path');
-const flatten = require('lodash/flatten');
-const map = require('lodash/map');
-const filter = require('lodash/filter');
+const path = require("path");
+const flatten = require("lodash/flatten");
+const map = require("lodash/map");
+const filter = require("lodash/filter");
 
 const REGEX_DOT_PREFIX = /^\.+/;
 const REGEX_WINDOWS_BACKSLASH = /\\/g;
 
-
 class GlobObject {
-    constructor () {
+    constructor() {
         this.hadEmptyPaths = false;
         this.isIgnore = false;
+        this.isAllFiles = false;
         this.hasExtensions = false;
+        this.extensions = [];
         this.pathsArr = [];
+        this.pathsArrRaw = [];
     }
 
-    paths (paths) {
-        const pathsArr = Array.isArray(paths) ? paths : (typeof paths === 'string' ? [paths] : []);
+    paths(paths) {
+        const pathsArr = Array.isArray(paths)
+            ? paths
+            : typeof paths === "string"
+              ? [paths]
+              : [];
 
         if (pathsArr.length) {
             if (this.pathsArr.length) {
                 this.map((basePath) => {
                     return pathsArr.map((subPath) => {
                         // If subpath starts with specia character "!" then prepend that to the begining of full paths
-                        const negativePath = subPath[0] === '!' ? '!' : '';
-                        const subPathNormalized = negativePath ? subPath.substr(1) : subPath;
-                        return negativePath + path.join(basePath, subPathNormalized);
+                        const negativePath = subPath[0] === "!" ? "!" : "";
+                        const subPathNormalized = negativePath
+                            ? subPath.substr(1)
+                            : subPath;
+
+                        return (
+                            negativePath +
+                            path.join(basePath, subPathNormalized)
+                        );
+                    });
+                });
+
+                this.mapRaw((basePath) => {
+                    return pathsArr.map((subPath) => {
+                        // If subpath starts with specia character "!" then prepend that to the begining of full paths
+                        const negativePath = subPath[0] === "!" ? "!" : "";
+                        const subPathNormalized = negativePath
+                            ? subPath.substr(1)
+                            : subPath;
+
+                        if (negativePath) {
+                            this.isIgnore = true;
+                        }
+
+                        return (
+                            negativePath +
+                            path.join(basePath, subPathNormalized)
+                        );
                     });
                 });
             } else {
                 this.pathsArr = pathsArr;
+                this.pathsArrRaw = pathsArr;
             }
         } else {
             this.hadEmptyPaths = true;
@@ -44,23 +76,27 @@ class GlobObject {
      * @param {string|array} extensions An extension or list of extensions
      * @returns {object} GlobObject
      */
-    filesWithExtensions (extensions) {
-        const extensionsArr = typeof extensions === 'string' ? [extensions] : extensions;
+    filesWithExtensions(extensions) {
+        const extensionsArr =
+            typeof extensions === "string" ? [extensions] : extensions;
 
         if (extensionsArr && extensionsArr.length) {
-            let extensionString = '';
+            let extensionString = "";
 
             // Remove dot from the extension name
-            let extensionsArrNormalized = map(extensionsArr, (extension) => extension.replace(REGEX_DOT_PREFIX, ''));
+            let extensionsArrNormalized = map(extensionsArr, (extension) =>
+                extension.replace(REGEX_DOT_PREFIX, ""),
+            );
 
             if (extensionsArrNormalized.length > 1) {
-                extensionString = `/**/*.{${ extensionsArrNormalized.join(',') }}`;
+                extensionString = `/**/*.{${extensionsArrNormalized.join(",")}}`;
             } else {
-                extensionString = `/**/*.${ extensionsArrNormalized }`;
+                extensionString = `/**/*.${extensionsArrNormalized}`;
             }
 
-            this.hasExtensions = true;
-            return this.map((path) => `${ path }${ extensionString }`);
+            this.extensions = this.extensions.concat(extensionsArr);
+            this.hasExtensions = !!this.extensions.length > 0;
+            return this.map((path) => `${path}${extensionString}`);
         } else {
             return this;
         }
@@ -71,8 +107,9 @@ class GlobObject {
      *
      * @returns {object} GlobObject
      */
-    allFiles () {
-        return this.map((path) => `${ path }/**`);
+    allFiles() {
+        this.isAllFiles = true;
+        return this.map((path) => `${path}/**`);
     }
 
     /**
@@ -80,9 +117,23 @@ class GlobObject {
      *
      * @returns {object} GlobObject
      */
-    ignore () {
+    ignore() {
         this.isIgnore = true;
-        return this.map((path) => `!${ path }`);
+        return this.map((path) => `!${path}`);
+    }
+
+    /**
+     * Itterates through all paths
+     *
+     * @param {function} fn Itteratee function
+     * @returns {object} GlobObject
+     */
+    map(fn) {
+        this.pathsArr = filter(
+            flatten(map(this.pathsArr, fn)),
+            (path) => !!path,
+        );
+        return this;
     }
 
     /**
@@ -91,8 +142,11 @@ class GlobObject {
      * @param {function} fn Itteratee function
      * @returns {object} GlobObject
      */
-    map (fn) {
-        this.pathsArr = filter(flatten(map(this.pathsArr, fn)), (path) => !!path);
+    mapRaw(fn) {
+        this.pathsArrRaw = filter(
+            flatten(map(this.pathsArrRaw, fn)),
+            (path) => !!path,
+        );
         return this;
     }
 
@@ -101,13 +155,29 @@ class GlobObject {
      *
      * @returns {array} Array of glob paths
      */
-    toArray () {
+    toArray() {
         if (this.hadEmptyPaths && this.isIgnore) {
             // Since we exclude files / paths, don't return anything if path list was empty
             return [];
         } else {
             return map(this.pathsArr, (path) => {
-                return path.replace(REGEX_WINDOWS_BACKSLASH, '/');
+                return path.replace(REGEX_WINDOWS_BACKSLASH, "/");
+            });
+        }
+    }
+
+    /**
+     * Converts paths to an array of normalized glob paths
+     *
+     * @returns {array} Array of glob paths
+     */
+    toArrayRaw() {
+        if (this.hadEmptyPaths && this.isIgnore) {
+            // Since we exclude files / paths, don't return anything if path list was empty
+            return [];
+        } else {
+            return map(this.pathsArrRaw, (path) => {
+                return path.replace(REGEX_WINDOWS_BACKSLASH, "/");
             });
         }
     }
@@ -117,17 +187,79 @@ class GlobObject {
      *
      * @returns {array} Array of glob paths
      */
-    generate () {
-        return this.toArray();
+    generate(forChokidar = false) {
+        if (forChokidar) {
+            const paths = this.toArrayRaw().map((path) =>
+                this.isAllFiles || this.hasExtensions ? path + "/." : path,
+            );
+
+            if (this.hadEmptyPaths && this.isIgnore) {
+                return {
+                    paths: [],
+                    ignore: [],
+                };
+            } else if (this.isIgnore) {
+                return {
+                    paths: paths,
+                    ignore: chokidarFilterIgnorePaths(this.toArrayRaw()),
+                };
+            } else if (this.hasExtensions) {
+                return {
+                    paths: paths,
+                    ignore: [chokidarFilterOnlyExtensions(this.extensions)],
+                };
+            } else {
+                return {
+                    paths: paths,
+                    ignore: [],
+                };
+            }
+        } else {
+            return this.toArray();
+        }
+    }
+}
+
+function paths(paths) {
+    return new GlobObject().paths(paths);
+}
+
+function generate(...globs) {
+    const isLastArgBoolean = typeof globs[globs.length - 1] === "boolean";
+    const forChokidar = isLastArgBoolean ? globs.pop() : false;
+
+    if (forChokidar) {
+        const results = map(flatten(globs), (glob) => glob.generate(true));
+
+        return {
+            paths: flatten(results.map((result) => result.paths)),
+            ignore: flatten(results.map((result) => result.ignore)),
+        };
+    } else {
+        return flatten(map(flatten(globs), (glob) => glob.generate(false)));
     }
 }
 
-function paths (paths) {
-    return (new GlobObject()).paths(paths);
+/**
+ * Create chokidar filter function to only allow certain extensions
+ * @param {array} extensions
+ * @returns {function}
+ */
+function chokidarFilterOnlyExtensions(extensions) {
+    return function (path, _stats) {
+        return !extensions.some((extension) => path.endsWith(`.${extension}`));
+    };
 }
 
-function generate (...globs) {
-    return flatten(map(flatten(globs), (glob) => glob.toArray()));
+/**
+ * Create chokidar filter function to ignore certain paths
+ * @param {array} ignorePaths
+ * @returns {function}
+ */
+function chokidarFilterIgnorePaths(ignorePaths) {
+    return function (path, _stats) {
+        return ignorePaths.some((ignorePath) => path.startsWith(ignorePath));
+    };
 }
 
 module.exports = {

package/lib/gulp/task-watch.js

@@ -1,21 +1,20 @@
-const gulp = require('gulp');
-const chokidar = require('chokidar');
-const debounce = require('just-debounce');
-const asyncDone = require('async-done');
-
+const { parallel } = require("gulp");
+const chokidar = require("chokidar");
+const debounce = require("lodash/debounce");
+const asyncDone = require("async-done");
 
 /**
  * Gulp task watch function using latest chokidar
  * with better OSX support and file watching functionality
  * than outdated gulp.watch
  */
-module.exports = function taskWatch (globs, callback) {
-    const parallelCallback = gulp.parallel(callback);
-    const debouncedCallback = debounce(onChange, 200);
+module.exports = function taskWatch(globs, callback, isParallel = false) {
+    const parallelCallback = isParallel ? callback : parallel(callback);
+    const debouncedCallback = debounce(onChange, 120);
     let running = false;
     let queued = false;
 
-    function onChange () {
+    function onChange() {
         if (running) {
             queued = true;
         } else {
@@ -23,7 +22,7 @@ module.exports = function taskWatch (globs, callback) {
             asyncDone(parallelCallback, runComplete);
         }
     }
-    function runComplete (err) {
+    function runComplete(_err) {
         running = false;
 
         // If we have a run queued, start onChange again
@@ -33,10 +32,35 @@ module.exports = function taskWatch (globs, callback) {
         }
     }
 
-    return chokidar.watch(globs, {
-        ignoreInitial: true
-    })
-        .on('add', debouncedCallback)
-        .on('change', debouncedCallback)
-        .on('unlink', debouncedCallback);
+    // Re-check that file matches!
+    // This is needed because for ignore filter for extensions we allow filter to go through if there is no Stats object,
+    // otherwise `chokidar` will not emit `change` event for new filters and sub-folders.
+    // That's why we need to re-check here to make sure that file matches!
+    function isIgnoredPath(path) {
+        return globs.ignore.some((ignore) => ignore(path));
+    }
+
+    if (!globs.paths) {
+        throw new Error("No paths provided for chokidar watch");
+    }
+
+    return chokidar
+        .watch(globs.paths, {
+            ignoreInitial: true,
+        })
+        .on("add", (path) => {
+            if (!isIgnoredPath(path)) {
+                debouncedCallback(path);
+            }
+        })
+        .on("change", (path) => {
+            if (!isIgnoredPath(path)) {
+                debouncedCallback(path);
+            }
+        })
+        .on("unlink", (path) => {
+            if (!isIgnoredPath(path)) {
+                debouncedCallback(path);
+            }
+        });
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@videinfra/static-website-builder",
-  "version": "1.17.0",
+  "version": "2.0.0-beta.1",
   "description": "Customizable static site project builder",
   "license": "MIT",
   "engines": {
-    "node": ">=14.15.0 <17"
+    "node": ">=20.0.0"
   },
   "bugs": {
     "url": "https://github.com/videinfra/static-website-builder/issues"
@@ -25,21 +25,17 @@
     "test-watch": "gulp --config=init/test/config/config.js"
   },
   "dependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.21.5",
-    "@csstools/postcss-nested-calc": "^3.0.0",
-    "autoprefixer": "^10.4.14",
-    "babel-loader": "^8.3.0",
-    "browser-sync": "^2.29.3",
-    "chalk": "4.0.0",
-    "chokidar": "^3.5.3",
-    "cross-env": "^7.0.3",
-    "cssnano": "^6.0.1",
+    "@csstools/postcss-nested-calc": "^5.0.0",
+    "@rollup/plugin-replace": "^6.0.3",
+    "autoprefixer": "^10.4.23",
+    "browser-sync": "^3.0.4",
+    "chalk": "4.1.2",
+    "chokidar": "^5.0.0",
+    "cross-env": "^10.1.0",
+    "cssnano": "^7.1.2",
     "del": "^6.0.0",
-    "dotenv": "^16.4.7",
-    "gulp": "^4.0.2",
+    "dotenv": "^17.2.3",
+    "gulp": "^5.0.1",
     "gulp-cached": "^1.1.1",
     "gulp-data": "^1.3.1",
     "gulp-dependents": "^1.2.5",
@@ -47,25 +43,24 @@
     "gulp-if": "^3.0.0",
     "gulp-ignore": "^3.0.0",
     "gulp-plumber": "^1.2.1",
-    "gulp-postcss": "^9.0.1",
+    "gulp-postcss": "^10.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-sitemap": "^8.0.0",
     "gulp-sizereport": "^1.2.1",
-    "gulp-sourcemaps": "^3.0.0",
+    "gulp-sourcemaps": "^2.6.5",
     "gulp-svgmin": "^4.1.0",
     "gulp-svgstore": "^9.0.0",
     "lodash.clone": "^4.3.2",
     "lodash.some": "^4.2.2",
     "map-stream": "^0.1.0",
     "minimist": "^1.2.8",
-    "nano-memoize": "1.3.0",
-    "sass": "^1.93.2",
+    "nano-memoize": "3.0.16",
+    "sass": "^1.97.3",
     "through": "^2.3.8",
-    "twig": "^1.10.5",
-    "webpack": "^4.46.0",
-    "webpack-watch-files-plugin": "^1.2.1"
+    "twig": "^1.17.1"
   },
   "devDependencies": {
-    "jest": "^29.6.2"
+    "jest": "^30.2.0",
+    "rolldown": "^1.0.0-rc.1"
   }
 }

package/plugins/example/task.js

@@ -1,5 +1,5 @@
 const gulp = require('gulp');
-const memoize = require('nano-memoize');
+const { nanomemoize } = require('nano-memoize');
 
 const globs = require('@videinfra/example-website-builder/lib/globs-helper');
 const getConfig = require('@videinfra/example-website-builder/lib/get-config');
@@ -12,7 +12,7 @@ const taskWatch = require('../../lib/gulp/task-watch');
 
 // Paths and files which gulp will watch and run on
 // Using memoize to cache the result, for performance
-const getGlobPaths = memoize(function () {
+const getWatchGlobPaths = function (forChokidar = false) {
     const sourcePaths = getPaths.getSourcePaths('example');
     const extensions = getConfig.getTaskConfig('example', 'extensions');
     const ignore = getConfig.getTaskConfig('example', 'ignore');
@@ -22,6 +22,9 @@ const getGlobPaths = memoize(function () {
         globs.paths(sourcePaths).filesWithExtensions(extensions), // Files to watch
         globs.paths(sourcePaths).paths(ignore).ignore(),          // Exclude files and folders from being processed
     );
+};
+const getGlobPaths = nanomemoize(function () {
+    return getWatchGlobPaths(false);
 });
 
 
@@ -41,7 +44,7 @@ function example () {
 }
 
 function exampleWatch () {
-    return taskWatch(getGlobPaths(), example);
+    return taskWatch(getWatchGlobPaths(true), example);
 }
 
 

package/tasks/browser-sync/preprocess-config.js

@@ -30,10 +30,5 @@ module.exports = function preprocessBrowserSyncConfig (config = {}, fullConfig)
         }
     }
 
-    // Set additional files to watch, convert file paths to globs
-    if (config.files) {
-        config.files = globs.paths(getPaths.getProjectPath()).paths(files).generate();
-    }
-
     return config;
 }

package/tasks/browser-sync/task.js

@@ -4,3 +4,6 @@ const getConfig = require('./../../lib/get-config');
 exports.watch = function browserSync (callback) {
     bs.init(getConfig.getTaskConfig('browserSync'));
 };
+
+// Execute as first task
+exports.watch.order = -2;

package/tasks/env/get-env.js

@@ -36,7 +36,8 @@ function getEnvData () {
         // dotenv file order is reversed, values in first file overwrite all other
         // file values
         path: envFiles.reverse(),
-        processEnv: envVariables
+        processEnv: envVariables,
+        quiet: true,
     });
 
     // Remap property names