Commonly used front-end automation tools
purpose:
1, front-end engineering is based on business characteristics, the front-end development process standardization, which includes the development process, technology selection, code specifications, build publishing for development efficiency and improve the code quality of front-end engineers
2, front-end engineering to achieve the purpose of simplicity of it is to improve front-end processes through standardized, automated tools development efficiency, performance, quality, multiplayer collaboration and development experience
Common automated build tools
Grunt 、 gulp、 webpack、 Fis
Automated build tools work
Build tools to do it is to convert source code into JavaScript can be executed, CSS, HTML Code
Construction of actually engineering, automation of front-end development ideas embodied in, a series of processes to achieve with the code, make the code to perform this series of complex automation processes. Construction of injecting greater dynamism into front-end development, the liberation of our productivity.
Transcoding: The TypeScript compiled into JavaScript, CSS, etc. will be compiled into the SCSS.
File optimization: compressing JavaScript, CSS, HTML code compression merge pictures.
Code division: Extract common code multiple pages, extract the first screen you do not need to execute some code written in the asynchronous allowed.
Merge module: there will be many modules and files in a modular project, need to build functional modules classified merge into one file.
Auto Refresh: monitor local source code changes, automatically re-build, refresh your browser.
Code Checksum: is submitted to the warehouse before the code needs to be checked for compliance, the test passes and a unit code.
Automatic release: Updated code to automatically build release code on line and transmitted to the distribution system.
classification
1, based on the task
Grunt、gulp
They will automatically perform assigned tasks, like assembly line, to put up the resources then processed through different plug-ins, they contain active community, rich plug-ins, you can easily create a variety of workflows.
2, based on module
Browserify、Webpack、rollup.js
Node.js developers have had experience should be very familiar with the module requires a direct reference to the component require on OK, this type of tool is this mode, you can achieve on-demand loading, asynchronous loading module
3, integrated tools:
Yeoman, FIS, jdf, Athena 等
Use a variety of tools scaffolding technology stack to achieve, the advantage is that the use, the disadvantage is that they constrain the technology selection, and learning costs are relatively high.
advantage
a, focusing on a modular processing project
b, by plugin extension, complete easy to use yet flexible
c, usage scenarios is not limited to web development
d, community activists, development of new features in keeping with the times
e, a good development experience
