Npm makes package management in Node.js projects a bliss. We will be creating the following directory and file structure in our example: public/ We will also be using a plugin to bust the cache when there are updates. In the remainder of the article, we will be building a solution that will leverage the power of Gulp.js to concatenate and minify the files. We also want to force the client to receive the most up to date versions of our bundled assets on every request, but we still want to leverage caching if possible. We want to end up with pre-built asset bundles that are already minified and are ready to serve. What we really want is to automate bundling and include it in the build phase of our project. Surely we can do better than either of these two approaches. It would also cause additional load on the server since our server would essentially have to concatenate and minify all the source files repetitively on every request. This would serve minified files to our client, but it would not solve the problem of caching. Then we could do things that would look somewhat similar to the following:
A slight but questionable improvement would be to host our own minifier server, using one of the packages available on GitHub. This proves to be very tedious to do continuously during the development process. One primitive approach to solving some of these problems is to manually combine each type of asset into a bundle using a text editor, and then run the result through a minifier service, such as. 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.
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.
GULP SASS MINIFY CSS CODE
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.
GULP SASS MINIFY CSS INSTALL
We will assume basic familiarity with the npm environment, as it is used extensively throughout this post to install packages. 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.
0 kommentar(er)
