grunt学习记录及备忘
grunt的介绍文档很多，这篇只是个人的学习笔记。好记性不如烂笔头。
1、安装
环境准备：
nodejs：
下载地址：https://nodejs.org/download/
下载windows下安装版，直接双击安装。
grunt-cli（安装nodejs之后windows命令行下安装）
npm install -g grunt-cli
安装之后可以通过命令查询版本
node --version
npm --version
grunt --version
可以检查是否安装成功。
2、开始使用
grunt每个项目进行控制的，通过两个文件来配置相应的配置。分别是 package.json 和 Gruntfile.js ，要放在项目的根目录下。
这两个文件的创建方式：
package.json的创建方式
1）、根据模板创建： grunt init 不过需要有模板，可以指定路径；
2）、通过 npm init 命令创建，输入后会有向导提示，根据向导创建即可；
3）、复制一个；
4）、其他；
常见的模板：
{ "name":"项目名称", "version":"项目版本号", "description":"项目描述", "author":"项目创建者", "license":"项目版权", "devDependencies": { //项目依赖插件 } }
以下是用npm-init命令创建的：（步骤是新建一个文件夹test1，在命令行下进入这个目录）
然后输入 npm init
可以看到test1这个目录下的package的内容如下
{ "name": "grunttest", "version": "0.0.1", "description": "this is a test", "main": "null", "dependencies": { "grunt": "^0.4.5" }, "devDependencies": {}, "scripts": { "test": "null" }, "author": "greenwood", "license": "ISC" }
grunt是个工具库，具体的实现都是通过各种插件来实现，所以想要实现相应的功能，必须在这个文件里面添加依赖
往package.json 文件里面添加依赖的插件
比如添加grunt的最新版本，在命令行输入一下内容：
npm install grunt --save-dev
就会发现项目目录下多了 node_modules 这个文件夹，里面有很多文件， package.json 文件里面多了一行内容：
"devDependencies": { "grunt": "^0.4.5" }
（出错的应该是这个配置文件有问题，反正我是成功的）
package.json创建完了
运行 npm install 会提示在devDependencies和dependencies都存在grunt，将会使用dependencies下的。这里不管。
Gruntfile.js文件的创建方式
创建方式：
1）、grunt-init命令， grunt-init gruntfile 但我不知道为什么不成功，需要再研究；
2）、直接复制一个；
module.exports = function(grunt){ grunt.initConfig({ pkg:grunt.file.readJSON('package.json') }); grunt.registerTask('default',[]); };
运行： grunt 提示 done，without errors 没有错误。
基本操作使用到此已经完了。下面开始正式应用到demo项目中。
项目demo1 自动压缩js
a、增加插件：
package.json
"grunt-contrib-cssmin":"*",/*压缩CSS文件*/ "grunt-contrib-sass":"*",/*css的预处理*/ "grunt-contrib-uglify":"*",/*js压缩*/ "grunt-contrib-watch":"*",/*文件监视*/ "grunt-cssc":"*",/*压缩CSS文件*/ "grunt-htmlhint":"*",/*html语法检查*/ "matchdep":"*"/*批量处理*/
b、修改gruntfile.js
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
htmlhint: {
build: {
options: {
'tag-pair':true,
'tagname-lowercase':true,
'attr-lowercase':true,
'attr-value-double-quotes':true,
'doctype-first':true,
'spec-char-escape':true,
'id-unique':true,
'head-script-disabled':true,
'style-disabled':true
},
src:['index.html']
}
},
watch: {
html: {
files:['index.html'],
tasks:['htmlhint']
},
js: {
files: ['assets/js/base.js'],
tasks: ['uglify']
}
},
uglify: {
build: {
files: {
'build/js/base.min.js' : ['assets/js/base.js']
}
}
}
});
grunt.registerTask('default',[]);
准备一个index.html，这里从别人文档那里拷贝一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Enter your first name</title>
<link rel="stylesheet" href="build/css/master.css">
</head>
<body>
<label for="firstname">Enter your first name</label>
<input id="firstname" name="firstname" type="text">
<p id="namevalidation" class="validation"></p>
<script type="text/javascript" src="build/js/base.min.js"></script>
</body>
</html>
现在可以开始执行，grunt htmlhint，grunt htmlhinit:build，grunt watch 其中grunt watch是自动检查，其他都是要手动输入命令执行的。
此时如果修改base.js文件的内容，会自动合并到build/js/base.min.js
项目demo2 合并css、js文件并压缩
以下是根据实际使用可能涉及的合并css，js并压缩的弄出来的一个例子。
package.json
{ "name": "grunttest", "version": "0.0.1", "description": "this is a test", "main": "null", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-cssmin":"*", "grunt-contrib-sass":"*", "grunt-contrib-uglify":"*", "grunt-contrib-watch":"*", "grunt-cssc":"*", "grunt-htmlhint":"*", "matchdep":"*", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.5.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, "scripts": { "test": "null" }, "author": "greenwood", "license": "ISC" }
gruntfile.js
module.exports = function(grunt){ require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); grunt.initConfig({ pkg:grunt.file.readJSON('package.json'), concat: { options: { }, dist: { src: ['assets/js/**/*.js'], dest: 'assets/base.main.js' }, css:{ src: ['assets/css/**/*.css'], dest: 'assets/base.main.css' } }, htmlhint: { build: { options: { 'tag-pair':true, 'tagname-lowercase':true, 'attr-lowercase':true, 'attr-value-double-quotes':true, 'doctype-first':true, 'spec-char-escape':true, 'id-unique':true, 'head-script-disabled':true, 'style-disabled':true }, src:['index.html'] } }, uglify: { build: { files: { 'build/js/base.min.js' : ['assets/base.main.js'] } } }, cssmin: { css: { src: ['assets/base.main.css'], dest: 'build/css/base.min.css' } }, watch: { html: { files:['index.html'], tasks:['htmlhint'] }, js: { files: ['assets/js/**/*.js'], tasks: ['buildjs'] }, css: { files: ['assets/css/**/*.css'], tasks: ['buildcss'] } } }); grunt.registerTask('buildjs',['concat','uglify']); grunt.registerTask('buildcss',['concat','cssmin']); };
需要准备的文件：
index.html
assets/js/*.js(最好准备2个文件，以观察合并效果)
assets/css/*.css（同JS）
准备结束，在命令终端输入grunt watch,然后任意修改以上CSS和js文件，可以看到在build/css和build/js文件夹下分别生成了CSS和JS文件。
本文主要是学习 http://www.w3cplus.com/tools/get-up-running-grunt.html的记录以及参考了一些其他人合并css、js文章整理而来。
以下：
http://www.cnblogs.com/yexiaochai/p/3603389.html 介绍了从基本的安装到入门使用的过程
http://www.xuanfengge.com/grunt-profile-writing-tips-and-demonstrations-2.html Grunt配置文件编写技巧及示范
