Build front-end resources

For ease of development, I split CSS and JS files into separate modules, which are then glued and minified – this is a standard practice for high-performance sites. To build, I use Grunt.js, which, it would seem, already has all the necessary tools to perform these tasks.

But even here I did not find anything suitable. The fact is that the date of the last update of the minified file is important to me, because I want to substitute it in the file URL to effectively reset the cache. Therefore, you need to update the target file only when one of the source files has changed.

To solve this problem, I wrote my own collector: grunt-frontend. It works as follows. During concatenation and minification of several files into one, it writes the structure of the source files and their md5 fingerprint to a special file .build-catalog.json. At the next build, the plugin looks at the structure and content of the source files: if nothing has changed, then the final file is not minified or updated.

This not only reduces build time, but also allows you to save important data of the final file such as the update date and md5 fingerprint. All this data is stored in .build-catalog.json, it is desirable to store it outside version control.

For minification, the CSSO libraries (with automatic inlining of all files connected via @import) and UglifyJS are used.

Leave a Reply

Your email address will not be published. Required fields are marked *