你们好，最近小活发现有诸多的小伙伴们对于gruntled，grunt这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、 要使用Grunt，首先要安装Node.js(就算你没用过Node.js，也不用担心——。你只需要安装它让Grunt运行。)
2、 安装Node.js后，使用命令行工具执行以下命令：
3、 $ npm install -ggrunt-cli
4、 要确认Grunt是否安装正确，您可以使用以下命令：
5、 $grunt --version
6、 下一步是在项目的根目录下创建两个文件，package.json和gruntfile.js。
7、 创建package.json文件
8、 这个JSON文件让我们指定我们的开发环境所依赖的必要模块。有了它，项目的所有开发者都可以保证必要模块的一致安装，从而保证每个人都有相同的开发环境。
9、 在项目根目录下的pacakge.json文件中写入：
10、 {
11、 'name' : 'SampleGrunt',
12、 'version' : '0.1.0',
13、 'author' : 'Brandon Random',
14、 'private' : true,
15、 'devDependencies' : {
16、 'grunt' : '~0.4.0'
17、 }
18、 }
19、 然后在命令行工具中运行它：
20、 $ npm install
21、 这个命令告诉npm需要安装的必要模块，npm会安装并自动保存在项目根目录下一个名为node_modules的文件夹中。
22、 创建gruntfile.js文件
23、 文件gruntfile.js本质上是一个包装函数，它接受grunt作为参数：
24、 module.exports=function(grunt){
25、 grunt.initConfig({
26、 pkggrunt.file.readJSON('package.json')
27、 });
28、 grunt.registerTask('default', []);
29、 };
30、 现在，您可以在项目根目录中运行grunt命令行工具。
31、 $grunt
32、 Task 'default' not found. Use --force to continue.
33、 这里我们只把Grunt指定为必选模块，并没有定义任何任务。接下来，我们需要指定任务和必要的模块。首先，让我们看看如何扩展package.json文件。
34、 展开package.json文件
35、 使用Node.js最大的好处是它可以根据package.json文件的内容一次找到并安装多个包。要安装我们项目的所有必要任务，只需将以下内容添加到package.json文件中：
36、 {
37、 'name' : 'SampleGrunt',
38、 'version' : '0.1.0',
39、 'author' : 'Mike Cunsolo',
40、 'private' : true,
41、 'devDependencies' : {
42、 'grunt' : '~0.4.0',
43、 'grunt-contrib-cssmin': '*',
44、 'grunt-contrib-sass': '*',
45、 'grunt-contrib-uglify': '*',
46、 'grunt-contrib-watch': '*',
47、 'grunt-cssc': '*',
48、 'grunt-htmlhint': '*',
49、 'matchdep': '*'
50、 }
51、 }
52、 那么如何实现安装呢？你一定猜到了：
53、 $ npm install
54、 用Grunt加载任务
55、 安装包后，必须通过Grunt加载，才能被我们使用。有了matchdep，我们可以用一行代码自动加载所有任务。这是开发过程的一个重大优化。
56、 因为现在我们只需要把必要的任务列表写在一个文件package.json中，这个文件很容易管理。
57、 在上面的gruntfile.js中，编写以下代码：
58、 require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
59、 如果没有matchdep，我们将不得不为每个必需的任务编写一次grunt . loadnpmtasks("grunt-task-name ")；随着我们使用更多的任务，
60、 加载这些任务的代码很快就会变得非常麻烦。在Grunt加载这些任务之前，我们还可以指定设置选项。
61、 现在我们需要创建我们的HTML文件(index.html):
62、 !DOCTYPE html
63、 html lang='en'
64、 head
65、 meta charset='utf-8'
66、 meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'
67、 titleEnter your first name/title
68、 link rel='stylesheet' href='build/css/master.css'
69、 /head
70、 body
71、 label for='firstname'Enter your first name/label
72、 input id='firstname' name='firstname' type='text'
73、 p id='namevalidation' class='validation'/p
74、 script type='text/javascript' src='build/js/base.min.js'/script
75、 /body
76、 /html
77、 Verifying hypertext markup language with html prompt
78、 在grunt.initConfig中添加以下设置代码：
79、 htmlhint: {
80、 build: {
81、 options: {
82、 'tag-pair': true,
83、 'tagname-lowercase': true,
84、 'attr-lowercase': true,
85、 'attr-value-double-quotes': true,
86、 'doctype-first': true,
87、 'spec-char-escape': true,
88、 'id-unique': true,
89、 'head-script-disabled': true,
90、 'style-disabled': true
91、 },
92、 src: ['index.html']
93、 }
94、 }
95、 一般来说，一个插件的设置方法如下：插件的名称(removegrunt-contrib-orgrunt-prefix)，
96、 选择一个或多个使用这个插件的对象(在这里你可以为这个插件的不同文件设置不同的选项)，一个选项对象，以及插件将要作用的对象。现在
97、 如果我们用命令行工具运行grunthtmlhint，插件会检查我们在src中指定的HTML文件，验证是否有错误！但是您必须每小时手动运行几次这个任务。
98、 很快就变得繁琐了。
99、 自动化任务操作
100、 Watch是一个特殊的任务，在保存目标文件时可以自动触发一系列任务。在grunt.initConfig中添加以下设置：
101、 watch: {
102、 html: {
103、 files: ['index.html'],
104、 tasks: ['htmlhint']
105、 }
106、 }
107、 然后，在命令行工具中运行gruntwatch命令。现在，您可以尝试在index.html中添加一行注释并保存文件。你会注意到，
108、 保存文件时会自动触发HTML的验证！这是对开发过程的一个很大的优化：当你写代码的时候，watch任务同时会默默为你验证代码，如果验证失败，任务会报告失败(也会告诉你问题出在哪里)。
109、 注意grunt监视任务将一直运行，直到命令行工具被手动关闭或停止(控件c在Mac上)。
110、 保持JavaScript最小化。
111、 让我们编写一个JavaScript文件来验证用户输入的名称。为了简单起见，我们在这里只检查它是否包含非字母字符。我们的JavaScript将使用严格模式，
112、 这可能会阻止我们编写可用但低质量的JavaScript。创建assets/js/base.js文件，并在其中写入：
113、 function Validator()
114、 {
115、 'use strict';
116、 }
117、 Validator.prototype.checkName=function(name)
118、 {
119、 'use strict';
120、 return (/[^a-z]/i.test(name)===false);
121、 };
122、 window.addEventListener('load', function(){
123、 'use strict';
124、 document.getElementById('firstname').addEventListener('blur', function(){
125、 var _this=this;
126、 var validator=new Validator();
127、 var validation=document.getElementById('namevalidation');
128、 if (validator.checkName(_this.value)===true) {
129、 validation.innerHTML='Looks good!)';
130、 validation.className='validation yep';
131、 _this.className='yep';
132、 }
133、 else {
134、 validation.innerHTML='Looks bad!(';
135、 validation.className='validation nope';
136、 _this.className='nope';
137、 }
138、 });
139、 });
140、 让我们用UglifyJS简化这个源代码，并在grunt.initConfig中添加以下设置：
141、 uglify: {
142、 build: {
143、 files: {
144、 'build/js/base.min.js': ['assets/js/base.js']
145、 }
146、 }
147、 }
148、 UglifyJS会替换掉所有的变量和函数名，去掉所有的空格和注释，从而生成占用空间最小的JavaScript文件，对于发布非常有用。同样，我们需要设置一个观察任务来使用它。
149、 将以下代码添加到监视设置中：
150、 watch: {
151、 js: {
152、 files: ['assets/js/base.js'],
153、 tasks: ['uglify']
154、 }
155、 }
156、 现在我们有了一个静态HTML页面，一个用于存储Sass和JavaScript源文件的assets文件夹，以及一个用于存储优化的CSS和JavaScript的build文件夹。
157、 以及package.json文件和gruntfile.js文件。
158、 至此，您已经有了进一步探索Grunt的良好基础。如前所述，一个非常活跃的开发者社区正在为Grunt开发一个前端插件。
159、 我建议你现在去pluginlibrary看看这300多个插件。
以上就是grunt这篇文章的一些介绍，希望对大家有所帮助。