Recently, I wanted a bash script that would take a common styles.css file, shove the contents in the middle of a variable JavaScript file, and copy that to my clipboard for quick updates of a Webflow custom code section. Here’s how that works.
Grab each section individually.
To get my custom styles inserted where I needed them in the JavaScript file, I started by pulling the styles file contents into a variable. Then, I did the same for the first and second part of the JavaScript file that would surround the CSS.
Pulling the whole contents of a file into a variable is straightforward — cat out the file.
web_styles="$(cat css/web-styles.css)"
Splitting up the contents of the JavaScript file first required finding the line to split on, which varied among the files I wanted to insert my CSS into.
Awk is a useful Linux command for pattern matching, so I was able to search for the line in each JavaScript file thatI wanted to precede the styles. The pattern to match on is surrounded by forward slashes, and characters that need escaping are preceded with a backslash. In this example, the pattern I am matching on is ‘(document).ready’.
I saved a second variable with the line number following the pattern-matched one for splicing the second part of the javascript file out.
file_path="someFilePath.js"
start_styles_line_num=$(awk '/\(document\)\.ready/ {print NR}' $file_path)
next_line_num=$(($start_styles_line_num+1))
Using the two line numbers above, I set two variables with the spliced-out sections. The first grabs from the file start (head) and goes to the pattern I’d matched on above. The second grabs from the end of the file (tail) back to the line following the pattern. Now we have all three sections — the start of the JavaScript file (beginning_doc), the common styles (web_styles), and the end of the JavaScript file (end_doc). Now, it’s time to mash them all together.
beginning_doc="$(echo "$updated_doc" | head -n $start_styles_line_num)"
end_doc="$(echo "$updated_doc" | tail --lines=+$next_line_num)"
Output all the parts.
I struggled for a while over-engineering the step of getting each code slice in its correct order. Primarily, I was trying to use the gsub string function of awk to locate the correct spot to insert the CSS content. In the end, the simplest solution was to just echo out the broken-out code blocks along with any other amendments.
echo "<script>"
echo "$beginning_doc"
echo " const cssStyles = \`"
echo "$web_styles"
echo " \`;"
echo " \$('<style>').prop('type', 'text/css').html(cssStyles).appendTo('head');"
echo "$end_doc"
echo "</script>"
Finally, I used pbcopy in a second script to automatically pipe all the output onto my clipboard for easy pasting into Webflow (note pbcopy is specific to MacOS).
output="$relativePath/registration-js.sh"
echo "$output" | tee >(pbcopy)Writing a Bash Script to Insert the Contents of One File into Another
And that’s it! Writing a bash script is a great way to make repetitive tasks trivial and speed up your development process.