Automate the start of a frontend development workflow
TL;DR: Head over to github to view the shell script that automate the start of my frontend development workflow.
My frontend development workflow
To be honest, besides using SASS and bits of ES6, my frontend routine is probably ten years backwards. It also doesn’t help that the academy that I’m currently learning web development from is not teaching us any of the modern techniques. But that’s not the point. The point is, there are certain repetitive actions that could most likely by automated.
In general, this is what my frontend development workflow looks like:
- Create index.html
- Create vendor file and insert Flexboxgrid
- Create assets folders for css and js
- Create scss folder
- Run compile, compressed and watch scss files
- Create any other folder, like image folder
Sometimes I add Font Awesome. Most of the time, I will also be using jQuery. While these steps don’t generally take up a lot of time, it is repetitive and manual inputs do not add too much value. Npm creates more steps and there are simply too many commands to remember. Assuming I can’t be faster than other people, I can at least learn to be more efficient.
"Give me six hours to chop down a tree and I will spend the first four sharpening the axe."
Always be inspired to make your tools better.
Sharpening my tools
The answers to sharpening my tools is bash script. I also include my template SASS files in the folder with the bash script. With this, my usual workflow could be cut down dramatically to 3 simple steps.
- Git clone my automation folder
- Change the name of the cloned folder to my working directory
- Run bash run.sh (the name of the shell script file)
Well, technically, there is an additional step to align the scripts of package.json as sed, a command built for command line processing of files, could not include tab accurately in the file.
The first thing to do is to write down the commands. Shell scripts don’t allow cd, so the work around is to include functions which can do just that.
This will replace my usual workflow step no 2. Unfortunately, this will include all the content in the git repository but it is easy to clone multiple repository and keep track of the original repository this way.
Input npm command
This utilises sed to include the multiple scripts file in package.json. Basically, the syntax will look for scripts via regex. I’m not sure if there is a way to make this a multi-line command but it only works this way when I add everything in one line. With sed, it provides a very flexible way of editing the files. I’m thinking in future this will be the way I will
Create index file
This will replace my usual workflow step no 1. Simple commands to make directory and create files.
That’s it for now till I figure how to utilise and optimise a webpack workflow with the config file.