Builder: A gulp-like build system with modern JavaScript

Related tags

Build Tools builder
Overview

Builder: A gulp-like build system with modern JavaScript

What is this?

This is a build system meant to automate tasks. At this point it’s merely a concept tailored for my own needs. It has been made to mimic gulp APIs, with the goal of making integration of third-party tools much simpler than with gulp’s streaming approach. Even for APIs with identical names, the behavior may be different from gulp, and implementing the full scope of gulp functionality was never the goal.

I won’t maintain any functionality here beyond what I need myself. Feel free to fork this project and extend it however.

Sample build file

This build file will validate all JavaScript files in the scripts/ directory with ESLint, then concatenate them into one big main.js script and put it into the assets/ directory. Running it with clean command line parameter will remove the assets/ directory again.

File processing is generally being done by means of async iteration, making it easy to implement custom handling and to integrate third-party tools. Here, function concat() exemplifies the approach.

import {series, MemoryFile} from "builder";
import eslint from "./eslint.js";

export function clean()
{
  return this.src("assets/**").rm();
}

async function* concat(files, targetFileName)
{
  let result = [];
  for await (let file of files)
  {
    file = await file.read();
    result.push(file.contents);
  }
  yield new MemoryFile(targetFileName, result.join("\n"));
}

function eslintTask()
{
  return this.src("scripts/**/*.js").pipe(eslint);
}
export {eslintTask as eslint};

export let scripts = series(eslintTask, function(files)
{
  return files.pipe(concat, "main.js").dest("assets");
});

export default scripts;

You can also see a more complicated real-life example in the PfP project.

API reference

  • series(task...): Executes a number of tasks consecutively, passing the result of the previous task as the input parameter of the next one.
  • parallel(task...): Executes a number of tasks in parallel, passing its input parameter if any to all of them.
  • Builder class: this pointer will be set to an instance of this class when tasks execute
    • constructor(flags): Creates a new Builder instance. flags is a Map instance with optional command line flags to be exposed to tasks.
    • load(buildFile): Loads tasks from the specified build file.
    • run(taskNames): Runs the tasks specified in the taskNames array consecutively. Only names of tasks exported in the build file can be specified.
    • src(globs, [options]): compiles a Files object with files matching the globs specified. The globs parameter can either be a single string or an array containing multiple globs. Globs starting with ! will be used to exclude files from the result. For information on glob syntax and options see glob package.
    • hasFlag(name): Checks whether a particular command-line flag was specified.
    • getFlag(name): Retrieves the value of a particular command-line flag (will be true if no value was given).
    • log(value...): Logs the parameters to console, prefixed with the current time.
    • Builder.current: This static property will be set to the Builder instance currently running tasks.
  • Files class: a collection of files as returned by src() function or passed as first task parameter (result of the previous task in a series).
    • constructor(value...): A parameter can be either a File instance or an iterable resolving to File instances. Any promises will be resolved and nested iterables are allowed.
    • Symbol.asyncIterator: Allows async iteration over the files, yielding File instances.
    • async ensureCompletion(): Asynchronously iterates over the files, making sure any promises are resolved. Returns a new Files instance.
    • pipe(handler, parameter...): Passes the files to the specified handler (usually an async generator). Returns a new Files instance containing the files produces by the handler. Any parameters specified will be passed to the handler in addition to the current Files instance.
    • dest(targetDir): Saves all files to the specified directory. Returns a new Files instance containing the saved files.
    • rename(newName): Renames all files. newName can either be a string or a function taking a File instance and returning its new name. Returns a new Files instance containing renamed files.
    • rm(): Removes all files from disk, also removing their parent directories if these are empty. Returns a new empty Files instance.
    • watch(tasks): Waits forever watching for changes in the specified files. When a file changes, the specified tasks (single task or an array of tasks) will be run in parallel.
  • File class is the common base class of PhysicalFile and MemoryFile
    • path: File path, usually relative to the build file.
    • read(): Reads the file from disk if necessary, returns a MemoryFile instance.
  • PhysicalFile class: Represents a file on disk. Call file.read() if you need to work with file contents.
    • constructor(path)
  • MemoryFile class: Represents a file in memory. This could be a physical file read into memory and possibly modified or an entirely virtual file not stored on disk at all.
    • constructor(path, contents): contents can either be a Buffer instance or a string. The latter will result in UTF-8 encoding.
    • buffer: The Buffer instance with the file contents.
    • contents: The UTF-8 decoded file contents as a string.
You might also like...

A URL builder library for JavaScript, TypeScript

url-naong url-naong is url builder that is inspired by urlcat naong is korean name of Meowth(pokemon monster) install npm install url-naong --save Us

Jul 17, 2022

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Dec 31, 2022

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Jan 3, 2023

An authorization library that supports access control models like ACL, RBAC, ABAC in modern JavaScript platforms

An authorization library that supports access control models like ACL, RBAC, ABAC in modern JavaScript platforms

Casbin-Core 💖 Looking for an open-source identity and access management solution like Okta, Auth0, Keycloak ? Learn more about: Casdoor News: still w

Oct 20, 2022

🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.

JavaScript Stack from Scratch Welcome to my modern JavaScript stack tutorial: JavaScript Stack from Scratch. 🎉 This is the V2 of the tutorial, major

Jan 4, 2023

The AKE-less General Purpose Build System with JavaScript DSL for Node.js platform.

The AKE-less General Purpose Build System with JavaScript DSL for Node.js platform.

The AKE-less General Purpose Build System with JavaScript DSL for Node.js platform. Inspired by NUKE. This project is reaching a mature stage, althoug

Oct 16, 2022

A query builder for PostgreSQL, MySQL and SQLite3, designed to be flexible, portable, and fun to use.

knex.js A SQL query builder that is flexible, portable, and fun to use! A batteries-included, multi-dialect (MSSQL, MySQL, PostgreSQL, SQLite3, Oracle

Jan 4, 2023

(WIP) Universal PWA Builder

(WIP) Universal PWA Builder

WORK IN PROGRESS Features Framework Agnostic Build with your preferred framework or with none at all! Official presets for Preact, React, Vue, and Sve

Dec 29, 2022

(WIP) Universal PWA Builder

(WIP) Universal PWA Builder

WORK IN PROGRESS Features Framework Agnostic Build with your preferred framework or with none at all! Official presets for Preact, React, Vue, and Sve

Dec 26, 2022

Main repository for the Sphinx documentation builder

Sphinx Sphinx is a tool that makes it easy to create intelligent and beautiful documentation for Python projects (or other documents consisting of mul

Jan 2, 2023

A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

Dec 28, 2022

Burger builder project using React, Hooks and Context API.

Burger builder project using React, Hooks and Context API.

Burger Builder In this project, I made a context-api project by creating hamburgers with 3 different materials. Project setup npm install Project star

Jun 17, 2021

UX plugin for Oxygen Builder

=== Recoda Workspace for Oxygen === Contributors: Renato Corluka Donate link: https://paypal.me/__insert_some_pp_me Tags: oxygen, oxygen builder, util

Dec 3, 2022

Chappe - 🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

Chappe - 🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

Chappe Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine. Chappe is a Developer Do

Jan 1, 2023

A Sequelize web builder interface. To make your own sequelize schema

A Sequelize web builder interface. To make your own sequelize schema

Mar 9, 2022

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

A free and open source resume builder. Go to App What is this app all about? Reactive Resume is a free and open source resume builder that’s built to

Jan 3, 2023

Drag and drop page builder and CMS for React, Vue, Angular, and more

Drag and drop page builder and CMS for React, Vue, Angular, and more

Drag and drop page builder and CMS for React, Vue, Angular, and more Use your code components and the stack of your choice. No more being pestered for

Jan 9, 2023

Vite Electron Builder Boilerplate

This is template for secure electron applications. Written following the latest safety requirements, recommendations and best practices.

Dec 15, 2022

Create Persian Calendar as html helper with tag builder c# , and convert selected persian date to gregorian date

Create Persian Calendar as html helper with tag builder c# , and convert selected persian date to gregorian date

Persian-Calendar Use JS,Html,CSS,C# White theme for Persian Calendar , easy to use. Create Persian Calendar as html helper. Use Tag builder in c# for

Feb 28, 2022
Owner
Wladimir Palant
Wladimir Palant
Clarity is a scalable, accessible, customizable, open source design system built with web components

Clarity is an open source design system that brings together UX guidelines, design resources, and coding implementations with Web Components

VMware 6.5k Dec 31, 2022
Build node packages into deployable applications

strong-build Build a node application package, preparing it for deploy to production. It is useful standalone, but is commonly used to build applicati

StrongLoop and IBM API Connect 47 Mar 3, 2022
Grunt: The JavaScript Task Runner

Grunt: The JavaScript Task Runner Documentation Visit the gruntjs.com website for all the things. Support / Contributing Before you make an issue, ple

grunt 12.2k Dec 31, 2022
A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript.

InversifyJS A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript. About InversifyJS is a ligh

inversify 9.5k Jan 4, 2023
Gulp.js command execution for humans

Gulp.js command execution for humans. As opposed to similar plugins or to child_process.exec(), this uses Execa which provides: Better Windows support

ehmicky 55 Dec 14, 2022
Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp

Quick start dự án Pug, Sass, Gulp Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp #️⃣ Setup Cài đặt Node js Tới thư mục project cài template và các mo

Nguyễn Quang Sang 3 Oct 7, 2022
⚙️ Static site boilerplate. Using Gulp, PugJS, and Sass.

?? Alaska | Static-site Boilerplate ⚡ Fastest way to build HTML and CSS static sites. You don't have to learn complicated tools to build simple websit

Alaska Labs 8 Sep 10, 2022
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Fabio Spampinato 9 Sep 17, 2022