关键词：
当今时代，前端代码变的庞大复杂，代码维护、打包极其困难。所以前端的自动化构建工具显得尤为重要。我们要讲的就是grunt。grunt是一个基于node.js的自动化构建、测试、生成文档的项目管理工具。
一.安装grunt
1.安装grunt之前首先得安装node：从官网上下载，安装即可，在命令行中输入：node –v，出现版本号，就说明已经安装完成了。
2.首先全局安装grunt，用管理员方式打开命令行：npm install –g grunt-cli; 想要检测是否安装完成就用grunt命令看看。
二.创建一个网站
1.首先在桌面上创建一个文件夹grunt sample，在该文件夹下新建两个文件夹build和src，和两个文件Gruntfiles.js和package.json
package.json文件内容长这样：
“name”为项目名；version为该项目的版本号；devDependencies下面要写一些所依赖的项
Gruntfiles.js内容长这样：
2. 将命令行工具切换到项目文件夹下安装grunt：npm install grunt –save-dev（加save-dev就能将安装的版本都记录到package.json的devDependencies中）
package就变成：
并且文件夹下多了一个node_modules文件。
3.配置Gruntfiles.js
Grunt功能强大，比如说验证HTML、CSS、JavaScript的语法，压缩CSS、JavaScript、图像，Sass、LESS和Stylus编译成CSS等等，但是这些都得用插件来实现，所以我们就需要配置gruntfiles.js文件。
插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。我们就来使用一下uglify压缩插件：
a) 首先在src文件夹下新建一个js文档：
b) 然后安装插件：npm install grunt-contrib-uglify（用于js压缩的插件）
c) 在Gruntfiles.js配置文件中进行该插件的配置如下，在grunt.initConfig下插入该插件的配置信息
d) 继续配置如下：
e) 在grunt命令执行时，要不要立即执行uglify插件？如果要，就写上，否则不写。
f) 在终端输入grunt之后在build文件下就会多出：
同理可以使用其他的各种插件如：
- Contrib-jshint——javascript语法错误检查；
- Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
- Contrib-clean——清空文件、文件夹；
- Contrib-uglify——压缩javascript代码
- Contrib-copy——复制文件、文件夹
- Contrib-concat——合并多个文件的代码到一个文件中
- karma——前端自动化测试工具
grunt-grunt使用(代码片段)
Grunt是前端的构建工具，类似后端使用的Ant，也是通过配置各种任务来达到前端代码自动构建的目地。Grunt和Grunt插件是通过npm 安装并管理的，npm是nodejs 的包管理器，所以第一步需要安装nodejs环境。安装grunt之前... 查看详情
使用grunt中遇到的问题
1.使用jshint进行代码检查时，grunt命令后报错： 因为出现了乱码，我猜测是因为编码原因导致的。遂在webstorm的setting中修改了编码为utf-8，问题解决。 查看详情
grunt常用插件的使用
Grunt 作为前端自动化构建工具，我主要使用到的是其中对css的less预处理器的转换，图片的压缩，js,css文件的合并压缩以及实时监测的插件。好处是：节省带宽流量，提高了代码的安全性。 使用Grunt的步骤如下：1.安装：... 查看详情
转载grunt整合版30分钟学会使用grunt打包前端代码
【grunt整合版】30分钟学会使用grunt打包前端代码grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：①压缩文件②合并文件③简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并... 查看详情
grunt
...发展真的很快，15年还在流行grunt，而现在随着gulp的大量使用，以及webpack越来越流行，grunt基本上要被淘汰了。学习进度跟不上技术发展进度，实在是说不出的感觉。本文将介绍可能将过时的grunt 安装 Grunt和Grunt插件是通... 查看详情
grunt环境搭建及使用
jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！1.前言 各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：①压缩文件②合并文件③简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件，初学，有误请包涵准备阶段1、nodeJs环境因... 查看详情
如何使用grunt压缩js文件
jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！1.前言各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重复... 查看详情
grunt的使用方法，环境配置和插件安装
...来越少了，但是插件数量还是相当多的，另外grunt和gulp的使用相当相似；grunt需要安装node和npm验证node是否安装：node-v验证npm是否安装：npm-v 下面是具体的使用方法：1》安装全局的配置环境npminstall-ggrunt-cli2》安装grunt在命令... 查看详情
将节点检查器与 Grunt 任务一起使用
】将节点检查器与Grunt任务一起使用【英文标题】：Usingnode-inspectorwithGrunttasks【发布时间】：2012-06-2515:02:54【问题描述】：有人使用node-inspector和Grunt进行应用程序调试吗？如果没有，你能推荐一个基于Grunt的应用程序的调试工具... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：①压缩文件②合并文件③简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件，初学，有误请包涵准备阶段1、nodeJs环境因... 查看详情
grunt-grunt使用(代码片段)
Grunt是前端的构建工具，类似后端使用的Ant，也是通过配置各种任务来达到前端代码自动构建的目地。Grunt和Grunt插件是通过npm 安装并管理的，npm是nodejs 的包管理器，所以第一步需要安装nodejs环境。安装grunt之前... 查看详情
grunt使用入门
一、首先用npm在global环境安装grunt-cli，注意在任何目录下install-g都是一样的 npminstall-ggrunt-cli二、安装grunt插件时项目中一定要package.json，所以在项目中加一个最简单的package.json。不然的话插件安装不上。三、在项目目录下安... 查看详情
正确发布一个 grunt 项目
...operly【发布时间】：2014-07-1114:22:10【问题描述】：我正在使用Nexus来存储我的静态Web工件。作为一名前“Java开发人员”，我曾经经常使用Mavenreleaseplugin将我构建的工件部署到Nexus。我想为我的使用Grunt构建的Web项目找到一个等价... 查看详情
grunt是什么，以及它的一些使用方法
?什么是GruntGrunt和Grunt插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。grunt是基于node更多插件请访问：http://www.gruntjs.net/ 使用前提：1.DOS：powershell 安装(全局)grunt-npminstallgrunt-cli-g &nb 查看详情
Grunt 服务器没有为我的应用程序使用虚拟主机名。vhost 和 httpd 已设置，但 grunt 没有使用它们
】Grunt服务器没有为我的应用程序使用虚拟主机名。vhost和httpd已设置，但grunt没有使用它们【英文标题】：Gruntserverdoesnotusevirtualhostnameformyapp..vhostandhttpdaresetupbutgruntisnotusingthem【发布时间】：2013-11-2201:55:59【问题描述】：所以我... 查看详情
grunt的配置及使用（压缩合并js/css）
Grunt的配置及使用（压缩合并js/css）安装前提是你已经安装了nodejs和npm。 你能够在 nodejs.org 下载安装包安装。也能够通过包管理器（比方在 Mac 上用 homebrew，同一时候推荐在 Mac 上用 homebrew）。&n... 查看详情
为什么在npm中使用插件的对等依赖？(代码片段)
...dejs.org/en/blog/npm/peer-dependencies/但我真的不明白。例我正在使用AppGyverSteroids，它使用Grunt任务将我的源文件构建到/dist/文件夹中，以便在本地设备上提供。我在npm和grunt都很新，所以我想完全理解发生了什么。到目前为止我得到了... 查看详情