Initially, it's important to distinguish between two different paths of progression. There is a clear separation between the development and production environments.
When you're in the role of a developer, your focus lies on the development environment. It's recommended to recompile your files whenever there are any changes made. While they don't necessarily need to be minified, anything related to styling like SCSS files should be converted into CSS for better compatibility with browsers.
Once you've reached the point where all criteria are met and bugs are addressed, you transition to the production stage. This involves compiling or transpiling TypeScript or ES6 to JavaScript, and SCSS, LESS, etc. to CSS. Additionally, your files undergo compression to enhance loading speeds. You also prepare a repository of files that can be sent to a server or another publishing platform of your choosing.
During this process known as the build process, you generate a public or dist(ributed) folder where all the files are stored. This differs from the development environment where files are kept more temporarily.
Some popular libraries for processing include:
Common processes include:
- Combining multiple files into fewer files
- Compression and minification
- Transpilation of higher-level languages into browser-readable code (such as JS, CSS, HTML, JSON)