let's start by talking about some of the scenarios and frustrating situations that web development encounters:
version problems with JavaScript and CSSWe all know that JavaScript and CSS are static files, if the address is not changed, the browser will cache these files, it means that when we need to change JavaScript or CSS files, even if we change the backend, then the client can not see, this in the "JS eminence" ERA is unacceptable because almost all Web applications now rely heavily on JavaScript, and all Web sites need to use CSS. In the projects I've been through, even many years of experience with programmers have appeared in JavaScript and CSS file version problems, such as customer let fix a bug, this bug is caused by JavaScript, the programmer fixed, or the customer said to change a background color, However, when we give the customer deployment or code to customer deployment, the customer said that the bug still exists, this time the programmer often said the words will appear "I am local is good ah", finally find someone to help, found that the original is not clear browser cache, so some programmers hurriedly to the customer said: " You need to ctrl+f5 clear the browser's cache. " Every time I hear that, it's like turning off the lights and leaving me a room black, first of all, how many ordinary users will use CTRL+F5? Secondly, how many users are willing to go to ctrl+f5? I think a lot of programmers know to add a version number, so that the browser will be considered a new file, such as the original is http://www.a.com/app.js you now only need to change the address to http://www.a.com/app.js?v=1.0 But if this action is manual, then 10 times basically at least 5 times the programmer will forget, then that's why we need front-end build
JavaScript and CSS dependency issuesAnother problem we often come up with is JavaScript and CSS dependencies, and the popular point is that JavaScript and CSS are in the order of the pages! We often find that the CSS does not work, some of the JavaScript variables and methods can not be found, there are many cases because the introduction of JavaScript or CSS in the wrong order, although we can use some Requirejs and other modules management, However, there are still many situations where it is necessary to introduce different files, especially the CSS does not have a good modular management component. Then we need to have a unified place to manage the order of JavaScript and CSS, while building tools can greatly reduce such problems.
Performance OptimizationWe all know that the more files the browser requests, the more time it takes, the larger the requested file, the more time-consuming, especially when we are now using front-end MVC, the MVVM framework, we have a lot of the front-end code more clear, more reasonable structure, we have many JS files, and undoubtedly slow down the speed of the page. To solve this problem, we need to do two things
file MergeBrowser needs to download a number of JS files, and the browser is a concurrency limit, that is, concurrent download only a few files, if the number of browser concurrency is 5, you have 20 JS files, and every 5 need 2S, then you download JS files need 8S, then the performance of the Web page can imagine, So we need to merge multiple files to reduce the number of files.
file CompressionWe know that the larger the file, the slower the download, and for JavaScript and CSS, the space inside, and the line-wrapping is to let us read the code easier to read, but for the machine, these have no effect on it, so in order to reduce the file size, the general situation we will use tools to remove space and line-wrapping, Sometimes we use a shorter variable name (remember this to make the tool last compressed, and the source code must ensure the readability of the name) to reduce the file size. All front-end build tools have the ability to merge and compress files.
Efficiency ImprovementVendor prefix in CSS3 use more and more time, we all know some CSS features, different browser CSS has different prefixes, if we add manually will be very cumbersome, and if using the build tool, many build tools can automatically add CSS to my vendor prefix
Unit TestUnit testing of JavaScript is becoming easier after using MVC or MVVM frameworks, and unit testing is an important means of quality assurance, so it's important to use the build tool to run our unit tests automatically before committing.
Code AnalysisWe write JavaScript often have some potential bugs, such as forget to add a semicolon, a variable does not wait, use some JavaScript code analysis tool, can help us to check some common problems. HTML reference JavaScript or CSS files such as we need to use Bower to refer to the front-end JavaScript and CSS third-party libraries, if the version upgrade, add Remove and so on by hand to modify the HTML, first more time-consuming, the second more easily overlooked, Especially when we need to switch between debug and production versions, there will be a lot of extra work, so using the front-end build tool can be a good solution to these problems. ---------------------Guo Xiao bei V5 Source: CSDN Original: 51320002 copyright notice: This article for Bo Master original article, reprint please attach blog link!
Gulp Tutorial: What Gulp can do, the front-end assembly force why use it
