Build Scripts: A concept

Backstory

I decided to prototype my new css framework on glitch as a static site. I needed a close button to inherit the styles of all buttons. To do this I looked at SASS which gives css extra features through compiling it. Specifically I wanted to use mixins and inheritance.

I tried running SASS in the terminal but glitch doesn’t give you node access to prevent people from running a discord bot with pm2.
image

Solution: build scripts

Yes, I’m writing this like a w3c proposal

There are a lot of tools used in writing static sites. We have bundlers like parcel, webpack, snowpack, browserify, we have preprocessing tools like purgecss, sass, tsc, and I could go on. The point is, getting some of these tools to work in the static site container can be real annoying. Sure, you could locate/download a node version and run it in the terminal and setup a script that you execute in the terminal but should we have to. The watch section of the glitch.json file or the watch.json file(from older glitch versions), already reloads your server based on your start command if the files changed match a specific (regex?) pattern. My idea, is that we apply this idea to build commands for static site.
This sample file uses json but in implementation you can do this in other formats. If a file called buildscripts.json exists in the app directory we read it in and look at two sections tasks and watch.
The watch section has rules, that if satisfied will invoke commands run in tasks in a separate environment with node and all the other languages installed. The tasks section is very similar to tasks in package.json. I wanted to read from package.json but adding one would turn the static site to a node project.

{
  "tasks": {
    "run sass": "sass --watch index.scss index.css",
    "typescript build": "tsc"
  },
  "watch": {
    "*.scss": "run sass",
    "*.ts": "typescript build"
  }
}

Hey, this is now possible, if a bit more complicated than your example. :sweat_smile:

2 Likes