grunt的使用方法，环境配置和插件安装

Posted 2020-08-17 Jason齐齐

虽然现在grunt的用的越来越少了，但是插件数量还是相当多的，另外grunt和gulp的使用相当相似；

grunt需要安装node和npm

验证node是否安装：node -v

验证npm是否安装：npm -v

 

下面是具体的使用方法：

1》安装全局的配置环境 npm install -g grunt-cli

2》安装grunt 在命令行中运行命令 npm install grunt --save-dev (这样输入的是每个项目都必须重新安装grunt) 这里如果想使用全局的就加-g ，如果只是本次项目用grunt，就不用加-g全局

2》准备两个文件

a> Gruntfile.js 文件 ---》文件书写按照对应要使用的模块的内容来写

主任务和模块名称一致

子任务 / src: 需要压缩的文件路径
dest :压缩后的路径和名称，没有路径会创建
只压缩代码，不修改参数的名字 options/ mangle/ Default:{} 默认是true 混淆参数 false 是不混淆

运行命令 grunt uglify

b>配置任务 package.json 文件 关于项目的配置信息文件 记录项目的详细信息

注意这步必须在安装完grunt后操作

编辑 package.json 文件有两种方法：
①在官网找一个package.json文件复制到编辑器中，进行修改并保存到你操作grunt的文件夹中；
②用nodejs命令行创建一个package.json文件：
在你操作grunt的文件夹中运行命令行，输入npm init 回车，然后会提示你输入一系列信息内容（每次输入信息完成后按回车），信息如下：

name: (grunt)
version: (1.0.0)
description:
entry point: (Gruntfile.js)
test command:
git repository:
keywords:
author:
license: (ISC)

完成后会显示所有你输入过的信息并提示你填写yes
信息如下：

About to write to D:\\grunt\\package.json:

{
"name": "grunt",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"dependencies": {
"grunt": "^1.0.1",
"grunt-contrib-uglify": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"author": "",
"license": "ISC"
}

Is this ok? (yes) yes

执行到此步骤环境配置完成，剩下的就是挑选你需要的模块了

3》下载模块

在官网找到你需要的模块内容

官网--插件列表（头部）--选择需要的插件
注意：
官方维护的都带星号
不带星号的都是第三方的插件

使用插件的步骤：
⑴下载插件（模块）
⑵配置模块

每个插件的详解中都有如何下载该模块，首先在你操作grunt的文件夹中运行命令行，然后执行对应下载插件的命令，然后按照插件的说明配置Gruntfile.js文件（注意Gruntfile.js 文件名使唯一的每次只能修改内容）

 

转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’