![gulp minify gulp minify](https://www.ezzylearning.net/wp-content/uploads/Gulp-Tasks.png)
Our web application might also break if any of the assets are cached, and the client would receive an outdated version. It would also have been nice to serve minified versions of these files, which are usually much smaller than the originals. That way, there would be only a total of two requests. It would have been much better to combine the CSS and JavaScript files into a single bundle for each. In case of HTTP 1.1, it also hogs the network and reduces the number of request channels that are available.
![gulp minify gulp minify](https://blog.atomicsmash.co.uk/wp-content/uploads/2017/06/using-gulp-with-wordpress.jpg)
It increases the total volume of traffic that is required to load this page and reduces the quality of user experience because it takes longer to load the files. This is less of an issue with HTTP/2 because HTTP/2 introduces parallelism and header compression, but it’s still an issue. This means that the server has to make a total of six requests to the server, and each request has to separately load a resource before the page will be ready. It has references to two separate CSS stylesheets and four separate JavaScript files. Sometimes when looking at the source code of a website or a web application, we can see code like this: Usually there’s also a set of CSS stylesheets that are served to the client as well. Many web-based projects feature front-end JavaScript files that are served to the client in order to provide various functionalities to the web page. Serving Front-End Assetsīefore we continue, let’s take a few steps back to get an overview of the problem that Gulp.js can solve for us. We will assume basic familiarity with the npm environment, as it is used extensively throughout this post to install packages.
![gulp minify gulp minify](https://cdnblog.webkul.com/blog/wp-content/uploads/2016/07/Screenshot-from-2016-07-14-200516-1200x675.png)
In order to become familiar with the basic Gulp.js terminology used in this post, please refer to “ An Introduction to JavaScript Automation with Gulp” that was previously published on the blog by Antonios Minas, one of our fellow Toptal developers. This tool is an npm package called Gulp.js. In this post, we will be looking at a tool that can be a part of what will allow us to achieve such automation.