关键词：
Grunt是什么呢?
Grunt是JavaScript世界的构建工具.为什么要用构建工具?一句话:自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
为什么要使用Grunt?
Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。
Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。
Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。；奇数版本号的 Node.js 被认为是不稳定的开发版。
在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。
如果你已经安装了 Grunt，现在需要参考一些文档手册，那就请看一看 Gruntfile实例 和如何 配置任务吧。
在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。
npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。
下面我们来看看具体的代码吧:
创建一个grunt的方法
module.exports=function(grunt){
引入你要干吗的一个插件
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
grunt.initConfig({
uglify:{
yasuo:{
options:{
mangle:false
},
expand:true,
cwd:"development/abc",
src:‘*.js‘,
dest:‘a‘
}
},
cssmin:{
yasuo1:{
expand:true,
cwd:‘development/abc‘,
src:‘*.css‘,
dest:‘a‘
}
},
concat:{
hebing:{
src:"dest1/*.min.css",
dest: "dest4/he.css"
}
},
htmlmin: {
options: {
removeComments: true,//清除html中注释的部分
removeCommentsFromCDATA: true,
collapseWhitespace: true,//清空空格
collapseBooleanAttributes: true,//省略布尔值属性的值
removeAttributeQuotes: true,
removeRedundantAttributes: true,//清空所有的空属性
removeEmptyAttributes: true,//清除所有LINK标签上的type属性
removeOptionalTags: true //是否清除<html></html>和<body></body>标签
},
yasuo2: {
expand: true,
cwd: ‘development/abc‘,
src: ‘*.html‘,
dest: ‘a‘,
rename:function(dest2,html){
return dest2+‘/‘+html.replace(‘.html‘,‘.min.html‘);
}
}
},
imagemin:{
options:{
optimizationLevel: 3 //定义 PNG 图片优化水平
},
yasuo3: {
expand: true,
cwd: ‘development/images‘,
src: ‘*.{png,jpg,jpeg,gif,webp,svg}‘,
dest: ‘dest3‘
}
},
jshint:{
jiance:[
‘src/*.js‘
],
},
watch:{
jiant:{
files:[‘src/*.js‘,‘css/*.css‘,‘html/*.html‘,‘img/*.{png,jpg,jpeg,gif,webp,svg}‘,‘src/*.js‘],
tasks:[‘uglify‘,‘cssmin‘,‘concat‘,‘htmlmin‘,‘imagemin‘,‘jshint‘]
}
}
})
grunt.registerTask("default",[‘uglify‘,‘cssmin‘,‘concat‘,‘htmlmin‘,‘imagemin‘,‘jshint‘,‘watch‘]);
}
今天由于时间仓促就不加注释了,希望各位原谅,但是我相信以你们聪明的大脑也是可以看懂的,再见了.
运行 grunt 和 tomcat 服务器的 Web 应用程序（Spring、Angular、Grunt、Maven、Tomcat）
】运行grunt和tomcat服务器的Web应用程序（Spring、Angular、Grunt、Maven、Tomcat）【英文标题】：WebApp(Spring,Angular,Grunt,Maven,Tomcat)runningbothgruntandtomcatservers【发布时间】：2014-09-2501:09:18【问题描述】：好的，所以我一直在阅读其他几个堆... 查看详情
Grunt 服务器没有为我的应用程序使用虚拟主机名。vhost 和 httpd 已设置，但 grunt 没有使用它们
】Grunt服务器没有为我的应用程序使用虚拟主机名。vhost和httpd已设置，但grunt没有使用它们【英文标题】：Gruntserverdoesnotusevirtualhostnameformyapp..vhostandhttpdaresetupbutgruntisnotusingthem【发布时间】：2013-11-2201:55:59【问题描述】：所以我... 查看详情
将节点检查器与 Grunt 任务一起使用
...-06-2515:02:54【问题描述】：有人使用node-inspector和Grunt进行应用程序调试吗？如果没有，你能推荐一个基于Grunt的应用程序的调试工具吗？我正在为服务器端应用程序使用nodejs，并且我有Grunt使用单独的任务（这是因为用户可以单... 查看详情
通过 Grunt 运行 Node 应用程序
】通过Grunt运行Node应用程序【英文标题】：RunningNodeappthroughGrunt【发布时间】：2013-02-0905:49:00【问题描述】：我正在尝试将我的Node应用程序作为Grunt任务运行。但是，我需要将其作为子进程生成，以允许我并行运行监视任务。这... 查看详情
在 ElasticBeanstalk 上运行 Grunt
...发布时间】：2015-09-2505:36:00【问题描述】：我有一个节点应用程序需要grunt执行“构建”才能成功执行应用程序。（运行源代码的concat/minification/revving等）。我已经在具有SSH访问权限的EC2实例上运行它，因为我可以通过SSH进入目... 查看详情
如何使用 package.json 中的“version”属性作为 grunt 中的应用程序目录？
】如何使用package.json中的“version”属性作为grunt中的应用程序目录？【英文标题】：HowdoIusethe"version"propertyinpackage.jsonastheapp\'sdirectoryingrunt?【发布时间】：2013-10-0713:05:27【问题描述】：我正在管理一个用angularjs编写的项目... 查看详情
应用程序在“grunt build”后停止工作（控制台中没有错误）
】应用程序在“gruntbuild”后停止工作（控制台中没有错误）【英文标题】：Appstopworking(withnoerrorsinconsole)after"gruntbuild"【发布时间】：2015-05-2717:02:39【问题描述】：我正在使用yeoman+bower+grunt构建一个AngularJS应用程序。在我... 查看详情
将 JSON 文件导入运行在 Grunt 服务器上的 Angular 应用程序
】将JSON文件导入运行在Grunt服务器上的Angular应用程序【英文标题】：ImportingJSONfileintoAngularapplicationrunningonGruntserver【发布时间】：2013-10-1704:40:50【问题描述】：我正在学习基本的Angular教程，需要在其中包含一个JSON文件。我用Yeom... 查看详情
Grunt 中的 NodeJS 环境变量
...nodeserver.js转移到使用Grunt。我以前直接从webstorm运行我的应用程序，并且会为我设置环境变量。我怎样才能在Grunt中达到同样的效果？我需要从webstorm（windows）运行grunt，或者在运行grunt 查看详情
在 Heroku 上运行预部署 Grunt 任务
...:55【问题描述】：我正在摆弄heroku来部署我的基于nodejs的应用程序。问题是我想运行一些包含grunt任务的预部署脚本。这些任务基本上是缩小css和js文件并执行更多操作，例如更新文件中的应用程序版本等。我现在能想到的唯一... 查看详情
Grunt，Livereload 与 Maven 和码头服务器
...述】：我想知道是否可以在我当前使用maven和jetty的javaweb应用程序中使用grunt和livereload？我当前的javaweb应用程序的工作方式是我运行maven来构建webapp，它还创建了一个本地码头服务器，我的 查看详情
正确代码之-grunt
...一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说，文件上百简直是家常便饭，那么这个时候我们的js文件应该怎么处理呢？另外，对于css文件，又该如何处理呢？？这些都是我们实际工作中要遇到的问题，比如... 查看详情
Grunt 连接代理：404 未找到
...题描述】：我正在使用grunt-connect-proxy"^0.2.0"从我的angularjs应用程序代理到api。该项目是从yeomanangular-generator开始的。我已经按照here的说明进行操作，但是当使用代理时，我得到：Failedtoloadresour 查看详情
带有 grunt 的 Concat bower 组件
...22【问题描述】：我正在构建一个需要少量前端库/框架的应用程序，例如：jQueryJQueryUIAngularJS基础我正在使用bower下载组件。此时我的HTML看起来像：<scriptsrc="components/jquery/jquery.js">< 查看详情
Grunt 不包括 javascript 文件
...时间】：2017-08-2414:09:58【问题描述】：这是一个有角度的应用程序。我有一个bower.json，里面有很多这样的库："dependencies":"angular":"^1.4.0","bootstrap":"^3.2.0",..."angular-socket-io":"^0.7.0","soc 查看详情
如何使用 grunt 部署 Angular 2？
...2017-08-1413:54:28【问题描述】：我正在尝试构建一个Angular2应用程序，并且我想使用Grunt来部署它。出于某种原因，当我运行部署的index.html时，我的代码不起作用。有问题的代码是来自Angular网站的示例。我假设我要么缺少依赖项，... 查看详情
让 Grunt 为不同的设置生成 index.html
...09-0606:56:38【问题描述】：我正在尝试使用Grunt作为我的web应用程序的构建工具。我想要至少有两个设置：我。开发设置-从单独的文件加载脚本，不连接，所以我的index.html看起来像：<!DOCTYPEhtml><html&g 查看详情
使用 grunt 时找不到模块“业力”
...46:08【问题描述】：我正在使用Yeoman工具包来引导AngularWeb应用程序。我已经按照here提到的所有步骤进行操作。但显然，grunt仍然找不到karma模块。它吐出这个错误：Loading"grunt-karma.js"tasks...ERROR> 查看详情