Creating a production workflow

The development workflow that we built in the previous sections is an amazing improvement for the project; however, we are not finished yet. In this section, you will see how to optimize the project that is to be run in the production environments.

In this section, you will learn how to minimize your JavaScript and CSS files to obfuscate your source code and reduce the time the browser takes to load the asset files. The images can also be minified in order to reduce its weight without altering its appearance.

Gulp useref

The gulp-useref plugin processes your HTML files to concatenate your JavaScript and CSS assets into a single file. Please note that the JavaScript is already processed by Browserify, therefore, it is not necessary to process the JavaScript files with useref; on the other hand, CSS can be processed here.

You will need to install the plugin with npm as a development dependency:

$ npm install --save-dev gulp-useref

Then, to use it, you will need to...