This article is I am trying to figure out why the front end to develop such a tool chain giant troublesome notes in the process of doing in the country's communities article on this subject seems to speak little transparent (I did not find ), and finally found out online face two great articles, I recommend reading:
- Modern JavaScript Explained For Dinosaurs begin with the familiar form: html file references a js file, why the need to use a step by step explanation [npm, module packaging, babel, ...] and much more,
- NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack compare various tools, compare their role, insufficient. (A question on Stack Overflow, following overwhelmingly answer came good)
First, a definition:
Build tools : Let's not used to doing repetitive mechanical things, the liberation of our hands.
What mechanical repetition of things there?
In the earlier front-end development (js + css + html), there are a lot of us feel very uncomfortable place, such as:
- js weak type
- css programming of
- Manual maintenance depend on a lot of trouble
- Resource request requires faster
- No hot update
- Browser compatibility
......
These needs gave birth to a number of front-end tools, such as
ts / scss / JSMin / ......
To carry out the following tasks:
- The code checks
- Running unit tests etc.
- Compiler
- Dependency analysis, packaging, replacement, etc.
- Code compression, spirit picture compression
- Versioning
...
Still further, a command line to execute input is relatively trouble
-based machines instead let us work hand to carry out these ideas, the integration of these efforts build tool appeared
The first is the package manager
Package Manager
With the node is emerging
in the absence of the package manager, maintaining third-party libraries used often need to rely on the official website to download the package and manual management.
The Package Manager package simplifies project dependencies and install the update, do not have to manually download the third-party maintenance package and its dependencies.
Tools in this category have npm / bower / yarn
JavaScript module bundler
//index.js
var moment = require（'moment'）;
moment.func()
Such a code node is not a problem, because the node can access the computer's file system. Each node also knows the location of npm module path, so no write require('./node_modules/moment/min/moment.min.js), justrequire('moment')
The problem is that require the browser can not be identified, which requires the module packager
Tie from the entrance module file, find any require statement, and then replace them with the appropriate code and finally create a single output file. This last reference to the output file in html. And to rely on packaged into a compressed file and can solve the problem of excessive http connection to a certain extent
Such tools includeBrowserify webpack
task runner
We would like to automatically perform all the tasks can be automated execution of the command instead of executing multiple lines of code manually, such as compiling scss, compressed code, lint ...
Some like to use linux in
&&to perform a series of tasks.
Such tools include grunt/gulp/npm
grunt/gulpThe biggest difference is that: grunteach task needs to read and write files. And Gulpbased on the node stream, in conjunction with a plug-in to a series of process flow, the flow can pass between the insert.
The npmbuilt-in scripting capabilities to perform tasks by calling other command-line tool. npm together with webpack webpack-dev-server eslint-loaderthe like, and that the front end development of efficient and convenient specification.
scaffold
Used to create the initial project, and make a series of configuration mentioned above.
The framework provides various tools Cli, Yeoman
to sum up
gulp, grunt, browserify, webpack, rollup, etc. build tools are integrated with sass compiled into css, picture compression function ... and so on in the form of plug-ins. Webpack which focuses more on module (pictures, js files, css files, etc.) packaging, processing resources, packaged into a front-end resources in line with the production environment deployment. gulp, grunt is designed to regulate the front-end development process. If the scenario is packed js library, ES want to do the conversion, parsing module can be used Rollup Compared webpack will be more concise.