Okay. Lets jump right in!
Below is a list of resources that you can refer to on Transpilers:
Pre-processing can be thought of as something equivalent to transpiling. Just to get the idea that is. Before jumping to any conclusions, let’s take a look at a couple of definitions given by some popular websites:
According to Wikipedia, a preprocessor is “a program that processes its input data to produce output that is used as input to another program”.
That is more of a generic definition of what is a pre-processor. There are variety pre-processors can be found in various domains. Here what we are mostly concerned about are web-specific pre-processors called “CSS pre-processors”.
An article from freecodecamp says, “CSS Preprocessors compile the code which is written using a special compiler. They then use that to create a CSS file, which can then be referenced by the main HTML document.”
Going by those definitions, think of a CSS pre-processor as “a simple programming language” with its own syntax (i.e. variables, nesting, mixins, operators, functions, selector inheritance, etc) for writing the source code that will be interpreted or compiled into CSS. Similar to transpiling, the pre-processor also takes one form of input and turns it into another format. When it comes to web development, CSS pre-processors such as SASS and LESS are the most popular pre-processors that we encounter on regular basis. CSS pre-processors extend CSS by providing traditional programming language features that are not available on CSS itself thus allowing the developer to have more control over his/her design.
Below are some of the useful resources that will teach you more about CSS pre-processors:
- A simple google search like “what is css pre processing” can go a long way 🙂
According to Wikipedia, lint or a linter is “a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs.” Simply put, you use a linter to programmatically identify and fix syntax and styling errors in your source code.
Instead of repeating the same information that is already available online, here are some of the best of such references I’ve found on the topic by googling:
Below is a list of some valuable references that you should read that will help you gain a fair understanding of the concept of minification and the tools used to achieve the minification:
Popular options for Module bundlers include Browserify and Webpack. I have personally used Webpack a lot and therefore it has been my go-to option while developing a web application. Below I have included some of the most comprehensive and well rounded beginner-friendly guides on how to use Webpack for building your own applications.
Task runners are specialized NodeJS tools designed with the purpose of automating common development tasks such as minification, concatenation, and re-compilation of source files, spinning up and restarting development servers, optimizing images, etc. Personally, I look at task runners as a stripped-down or less sophisticated variant of a Module Bundlers such as Webpack. Popular examples for task runners include Grunt and Gulp.
Below is a list of some fine resources on task runners that you can refer to if you are interested in learning more about those.
Happy Coding!!! 👋👋👋