前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍

电玩女神 2022-07-13 08:12 264阅读 0赞

前端自动化，这样的一个名词听起来非常的有吸引力，向往力。当今时代，前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知，百度有FIS,腾讯有Modjs，360有燕尾服，还有很多团队在使用Ant，Shell等，而现在讨论较多的是Grunt。

在平常的工作之中，我们都不断的在重复着做相同的事情，比如说将Sass编译成CSS，检测JavaScript语法，压缩CSS、JavaScript。特别在团队合作开发中，常常会为了各自的习惯而不断的发生麻烦，给开发带来极大的不便。而且前端开发人员在周而复始的做这些相同的，乏味的事情。很多时候我们想工作变得更有意义，更能专注于开发，就希望有一种工具能让我们不去做这些重复而乏味的工作。这就有了Grunt，而这个Grunt让我们编码变得更意义，更开心。

Grunt是一个任务管理器，能大大提高您运行前端开发工作流程。使用大量的Grunt插件可以自动执行任务，例如编译Sass和CoffeeScript，优化图像和验证您的JavaScript代码与JSHint。在过去你可能使用类似CodeKit或Hammer来处理这些任务。我认为这两种应用程序是伟大的(过去广泛的使用他们)，但Grunt比他们更优秀，他可以定制任务。有很多插件可以帮助你优化图片和在你的工作流中加入CSS样式。

\--------------------------------

Grunt: JavaScript世界的构建工具 -- Grunt中文网  
[http://www.gruntjs.net/][http_www.gruntjs.net]  
grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查。  
GRUNT JavaScript 世界的构建工具  
为何要用构建工具？  
一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。  
为什么要使用Grunt？  
Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。  
先看看入门文档:[http://www.gruntjs.net/getting-started][http_www.gruntjs.net_getting-started] 吧。

可用的Grunt插件  
你所需要的大多数task都已经作为Grunt插件被开发了出来，并且每天都有更多的插件诞生。插件列表页面列出了完整的清单。  
Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。  
提前感受一下 Grunt 吧！  
安装 grunt 虽然很简单，更多涉及到如何运行项目。看看下面的演示，这是为项目案例运行 grunt 后的输出。

\---------------------------------  
gulp.js - 基于流的自动化构建工具。 | gulp.js 中文网  
[http://www.gulpjs.com.cn/][http_www.gulpjs.com.cn]  
用自动化构建工具增强你的工作流程！  
易于使用  
通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。  
构建快速  
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。  
插件高质  
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。  
易于学习  
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

\--------------------------------  
介紹 | Webpack 中文指南  
[http://webpackdoc.com/][http_webpackdoc.com]  
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

\--------------------------------  
上面工具都依赖nodejs的命令，所以首先需要安装nodeJS环境，现在windows安装nodeJS直接下载即可：

[https://nodejs.org/en/][https_nodejs.org_en]

Index of /download/release/latest/win-x64/  
[https://nodejs.org/download/release/latest/win-x64/][https_nodejs.org_download_release_latest_win-x64]  
根据需要下载，下载完成后直接下一步下一步完成，就具有nodeJS环境了

流风，飘然的风，本人博客网站： [http://www.ssqhm.com][http_www.ssqhm.com]

[http_www.gruntjs.net]: http://www.gruntjs.net/
[http_www.gruntjs.net_getting-started]: http://www.gruntjs.net/getting-started
[http_www.gulpjs.com.cn]: http://www.gulpjs.com.cn/
[http_webpackdoc.com]: http://webpackdoc.com/
[https_nodejs.org_en]: https://nodejs.org/en/
[https_nodejs.org_download_release_latest_win-x64]: https://nodejs.org/download/release/latest/win-x64/
[http_www.ssqhm.com]: http://www.ssqhm.com/