Gulp Tutorial: What Gulp can do, the front-end assembly force why use it

Let's start by talking about some of the scenarios and frustrating situations that web development encounters:
Version problems with JavaScript and CSS

We 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", and finally find someone else to help, found that the original is not clear browser cache, Then some programmers hurriedly to the customer said: "You need to Ctrl+f5 to clear the browser 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? Second, how many users are willing to go to ctrl+f5?

So what? 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 issues

Another 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 optimization

We 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 merge

Browser 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 compression

We 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 boost Vendor Prefix

In the CSS3 use more and more times, we all know some CSS features, different browser CSS has different prefixes, if we manually add will be very cumbersome, and if you use the Build tool, many build tools can automatically add CSS to my vendor prefix

Unit Test

Unit 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 Analysis

We 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 referencing JavaScript or CSS files

For example, we need to use bower and the like to reference the front-end JavaScript and CSS third-party library, then 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.

Installation and use of the next update Gulp

Brief introduction:

Gulp is a tool for building the code in the front-end development process, and is the building block of the automation project; She not only optimizes the site resources, but also many repetitive tasks can be done automatically with the right tools during the development process. Using her, we can not only happily write code, but also greatly improve our efficiency.

Gulp Tutorial: What Gulp can do, the front-end assembly force why use it