When developing js and css files, it is more convenient to keep the files in their original form, and when in production, they need to be mined and joined. There are several assembly systems, however, it is very difficult and problematic to use them. At least I was so tired of them that I decided to write my own collector. It turned out very convenient, so I decided to share it with you.
Another problem with which I decided to fight is not the convenience of connecting files in html. In order to connect one file you need to write:
<script type="text/javascript" src="..."></script>
')
If there are 20 files, then it all turns into a jumble, where it is difficult to find something. In this case, the scripts and css need to be connected in different parts of the page. And if you need, for example, bootstrap to throw in another directory, then you need to change the path at the beginning and at the end of the page. In general, I decided that it would be much faster to attach files:
<use> file1.css file2.js dir/ file3.js file4.css </use>
Also in use I added
some nice features . For example, insert the current domain (host). But my song is not about that.
In order to use the tag was enough and you did not need to create a file with the assembly config, you had to write your middleware to express.
Those. the build happens on the fly: when the browser requests a file in production, it returns minimized, although on disk it is in its original form. I connected the automatic compilation of less, sass, coffeescript, jade, haml and md. Which also happens on the fly.
Naturally, all this may not in the best way affect the performance of the production server. Therefore, in production, the results are cached in memory. In the meantime, I added caching of results after gzip (why should the processor be loading anything in vain). Browser caching (ETag) is also available. In general, it turned out faster than the standard static middleware Express / Connect and loads less disk and stone.
Standard middleware twice removes the file statistics and reads the file from the disk, and then zip the result. My just spits out data from memory.
It connects in a few lines.
npm install fast-static
var fastStatic= require('fast-static'); app.use('/static',fastStatic.use('./static'));
Then, instead of script / link, use the use tag in html files.
That's all. Just do not forget to env change from server sales.
In general, it turned out a convenient assembly system.
Features
- Converts: coffee, haml, less, jade, sass, md
- Simplified connection of files through the use tag
- Auto-detect mime-type by extension
- supports gzip (caches gzip in memory)
- supports browser cache (ETag)
When env = production optimizes
- minimization of css, js and html
- merge files
- inserts small images into css
- caches results in memory
Full githaba documentation:
https://github.com/Hkey1/fast-static-
UPDATE
The new version appeared the incl files in the directory dir / *
A simple library library appeared - just add the name and version to the use tag. For example "bootstrap 3.1.1"
Significantly accelerated cache on the browser side.