Combine JS, CSS, PNG files

[art-in]

Currently there is 13 resource file requests and 1 API request.
14 requests | 59 KB transferred | 1.67 s (load: 1.39 s, DomContentLoaded: 797 ms)

Ideally there should be 4 (HTML, JS, CSS, PNG) resource requests.

[art-in]

To achieve this I need some build system.

For example, Gulp.

Build introduces new layer of abstraction, so I need the process to be as much unobtrusive as possible.

1. Build should happen only before deploying.
2. Ideally, there shouldn't be any evidence of build system in the code (like special directives). I.e. references (links to js in html, links to images in css) should be defined as if no postprocessing will happen later.

[art-in]

Introduced build system (gulp).
Put all build-related files to /build -folder.

Producing:

• minified & combined js files
• minified & combined css files
• sprite from png files & referencing it from css
• patched html with references to minified js and css files
• patched configuration file with production specific values

Introduced config facility (nconf)
Server now looking for two files in root-folder:

• config.json
• config.overrides.json (with all values to override defaults)

---

Pain:
The pain was when installing gulp-sprite-generator plugin. Required Python2.7 and VS 2010 C++... Complete installation guide here.
This plugin makes application (specifically - build system) tied to Windows, by the way.
UPDATE: Surprisingly, there is no problem in using build in Linux (C9). I only had to install gulp, and that's all.

[art-in]

Currently there is 4 resource file requests and 1 API request.

Was:
14 requests | 59 KB transferred | 1.67 s (load: 1.39 s, DomContentLoaded: 797 ms)
Now:
5 requests | 59.7 KB transferred | 1.16 s (load: 878 s, DomContentLoaded: 839 ms)