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.
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"
}
}