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

Jason齐齐 Jason齐齐     2022-08-12     499

关键词:

虽然现在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/’

grunt

...。在学习Grunt前,需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo 查看详情

grunt两小时入门

目录:1.用途和场景2.Grunt插件3.相关资源4.环境安装5.开始学习5.1一个新项目5.2生成package.json5.3在项目中安装grunt和相关插件5.4Gruntfile语法5.4.1配置任务5.4.2加载插件5.4.3注册任务5.5为我们的项目配置gruntfile.js5.6执行任务6.后续学习&n... 查看详情

grunt使用入门

一、首先用npm在global环境安装grunt-cli,注意在任何目录下install-g都是一样的 npminstall-ggrunt-cli二、安装grunt插件时项目中一定要package.json,所以在项目中加一个最简单的package.json。不然的话插件安装不上。三、在项目目录下安... 查看详情

elasticsearch7.8.0版本入门——elasticsearch-head插件的安装(win10环境)(代码片段)

目录一、elasticsearch-head插件的介绍二、Elasticsearch7.8.0及Node安装三、Grunt安装四、elasticsearch-head插件的下载五、elasticsearch-head插件的安装六、访问elasticsearch-head插件一、elasticsearch-head插件的介绍elasticsearch-head是用于监控Elasticsearch... 查看详情

grunt基础配置

grunt基础配置要使用grunt来管理项目,一般需要如下的几个步骤:安装grunt命令行工具grunt-cli在项目中安装grunt安装grunt插件建立并配置Gruntfile.js安装grunt命令行工具npminstall-ggrunt-cli在项目中安装gruntnpminstallgrunt--save-dev安装完成后,... 查看详情

grunt快速入门

...e.js被认为是不稳定的开发版。在安装Grunt前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npmupdat 查看详情

安装 grunt 插件时如何修复需要 grunt@~0.4.0 的对等方?

】安装grunt插件时如何修复需要grunt@~0.4.0的对等方?【英文标题】:Howtofixrequiresapeerofgrunt@~0.4.0whileinstallinggruntplugins?【发布时间】:2019-04-2801:40:11【问题描述】:我正在尝试安装一些Grunt插件,例如grunt-contrib-clean和grunt-contrib-watch... 查看详情

webpack、grunt、gulp

...webpack-cli3、增加mode配置(development|production)。对不同的环境启用不同的配置4、去掉了CommonsChunkPlugin(改成optimization.splitChunks进行模块划分)和UglifyJsPlugin(只需要设置optimization.minimize为true就行)插件grunt-对于需要反复重复的任... 查看详情

grunt怎么安装已经配置好的packet.json

参考技术A第一步:搭建环境,主要是nodejs,npm,grunt(grunt-cli)$mkdirinstallGrunt$cdinstallGrunt$npminstallgrunt--save-dev#如果看到如下信息表示grunt安装成功$grunt--versiongrunt-cliv0.1.13gruntv0.4.5第二步:创建package.json#在项目的根目录下创建package.json... 查看详情

grunt-grunt使用(代码片段)

...ff0c;npm是nodejs 的包管理器,所以第一步需要安装nodejs环境。安装grunt之前确保npm更新到最新的版本,使用npmupdate-gnpm在命令行中进行升级1,安装全局的grunt-cligrunt-cli并不是grunt,cli用于加载grunt,并传递Gruntfile... 查看详情

grunt常用插件的使用

...转换,图片的压缩,js,css文件的合并压缩以及实时监测的插件。好处是:节省带宽流量,提高了代码的安全性。 使用Grunt的步骤如下:1.安装:先要 安装Node.js,然后 安装Grunt(打开控制台输入npminstall-ggrunt-cli进行全局安... 查看详情

grunt的配置及使用(压缩合并js/css)

Grunt的配置及使用(压缩合并js/css)安装前提是你已经安装了nodejs和npm。 你能够在 nodejs.org 下载安装包安装。也能够通过包管理器(比方在 Mac 上用 homebrew,同一时候推荐在 Mac 上用 homebrew)。&n... 查看详情

grunt简单教程

...简单介绍Grunt是一个基于任务的命令行工具。依赖于node.js环境。它能帮你合并js文件,压缩js文件,验证js。编译less,合并css。还能够配置自己主动任务。单元測试等等,grunt有许多的插件,能够满足你的大部分需求。2.怎么安装... 查看详情

grunt压缩html和css

...可以减轻你的劳动,简化你的工作.当你在Gruntfile文件确定配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作.下面咱们来快速入门一下:Grunt和Grunt插件是通过npm安装并管理的,npm是Node.js的包管理器.所以也就是... 查看详情

elasticsearch安装

...应用,head插件访问es会存在跨域问题,所以需要修改es的配置文件。进入config目录:在最下面加入这两行:运行es:打印日志后表示启动成功,其中标识着启动成功,和ip以及端口。npm是随着nodejs安装一并安装的。更新npm,可以用npm命... 查看详情

grunt是什么,以及它的一些使用方法

?什么是GruntGrunt和Grunt插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。grunt是基于node更多插件请访问:http://www.gruntjs.net/ 使用前提:1.DOS:powershell  安装(全局)grunt-npminstallgrunt-cli-g &nb 查看详情

grunt自动化构建环境搭建

1.环境准备需要有Node、NPM、Grunt、Ruby2.安装Node访问https://nodejs.org/en/3.安装Ruby访问http://rubyinstaller.org/downloads/archives验证node-vnpm-vruby-v4.安装Gruntnpminstall-ggrunt-cli5.安装Grunt插件npminstallgrunt-contrib-sas 查看详情

grunt:使用不同的环境/流程运行多个mocha测试(代码片段)

我想在不同的环境和数据库上运行多个mocha测试。暂定是创建两个单独的grunt配置:grunt.initConfig(//firstonemochaTest:options:...,src:['test/server/*.js'],//secondonemochaTest:options:...,src:['test/slave/*.js'],env:dev:NODE_EN 查看详情