2013 › home
Frontend build tool wishlist
For quite a long time now, I have been toying around an idea of a perfect build tool to deploy front-end projects. This article is all about my wishlist from such a tool.
Assuming, you have completed the development work on the frontend of your next web project and are ready to deploy it in production. A typical project involves concatenating and minifying the assets, checking the code for errors, compressing the images and testing it across different combination and breed of browsers, devices and operating system. So, here goes my wishlist,
The typical build process of a project follows,
Compilation
> Linting
> Concatenation
> Compression
> Miscellaneous
Hence, I have divided the build task into the following categories,
If you use some kind of a pre-processor in your workflow to write your HTML, CSS or JavaScript, the compilation of code into its raw form naturally becomes the first step of any build task.
Linting refers to validating your code against errors, suspicous code and checking if the code corresponds to a certain style guidelines.
.html
, .css
and .js
files.Concatenation combines several files of the same type into a single file so that you can reduce the number of HTTP requests to the server.
.css
and .js
files separately with added flexiblity to choose the order in which the files are merged.Compression helps reduce the overall size of the resource being transferred across the network. Following are some of the ways we can achieve compression,
.png
, .jpg
, .gif
and .svg
images with the ability to choose the compression/optimization level..html
, .css
and the .js
document with optional features like add banner, keep special comments and report useful statistics at the end of the process.Using hash-ed filenames in addition to the Expiry headers, can help bust the cache without worrying about old assets wreaking havoc on your site.
.css
, .js
and images embedded in CSS) with hash-ed filenames to bust the cache and update the references in the source code.Some of the tasks that do not belong to any of the aforementioned categories are below,
.html
, .css
and .js
files indicating the license, author and the version no of the file with the ability to automatically increment the no. after every iteration.(~4kb)
.I understand that no build tool would ever be able to meet the outrageous demands of the list above. However, I started with a project on Github to compile a list of ready-to-use grunt/gulp plugins that accomplishes most of the tasks.