什么是 grun？
grun 是一个基于 GruntJS 的前端构建系统，它可以帮助我们在开发中自动化构建许多任务，如编译、压缩等。
在使用 grun 之前，我们需要先安装 node.js 和 grunt-cli，安装方式如下：
- 安装 node.js：前往官网下载安装包，安装完成后使用命令
node -v和npm -v验证是否安装成功。 - 全局安装 grunt-cli：使用命令
npm install -g grunt-cli。
安装 grun
安装 grun 很简单，只需要在项目根目录下运行命令 npm install grunt 即可。
它会在当前目录下创建一个 node_modules 文件夹，包含最新的 grun 版本。
使用 grun
在项目中使用 grun，我们需要先创建一个 Gruntfile.js 文件，并在其中定义任务。
下面是一个简单的例子：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------- -
------ -
------ -
------------------ --------------
-
-
-
---
-------------------------------------------
----------------------------- ------------
--这个例子使用了 grunt-contrib-uglify 插件，对 src/app.js 进行压缩，生成 dist/app.min.js。
我们可以使用 grunt 命令来启动这个任务，命令行中会有详细的输出。
插件
grun 的强大之处在于它有许多可用的插件，可以帮助我们完成各种工程化任务。
插件可以使用命令 npm install grunt-插件名 --save-dev 进行安装，例如：
- 压缩 JS：
grunt-contrib-uglify - 压缩 CSS：
grunt-contrib-cssmin - 编译 Sass：
grunt-sass - 合并文件：
grunt-contrib-concat
使用插件则需要在 Gruntfile.js 中进行配置和调用，具体可以参考插件的官方文档和示例。
结语
grun 是一个非常强大且易于入门的前端构建系统，它可以为我们的开发工作提供很多帮助。
我们可以使用 grun 自动化处理一些繁琐的工程化任务，从而更专注于业务逻辑的开发。同时，grun 也能够帮我们提高代码的效率和质量。
在使用 grun 的过程中，我们要多了解一些常用的插件和配置，以便更好地发挥 grun 的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca82b5cbfe1ea061242e