1.认识grunt
grunt是什么：他是一套前端自动化工具，是一个基于nodejs的命令行工具。（Grunt和Grunt插件是通过npm 安装并管理的,所以首先要安装nodejs）。
grunt能干什么：1.压缩文件 2.合并文件 3.简单的语法检查 4.监听文件变动 5.less编译
grunt优点：1.减轻劳动，简化工作 2.免费，没有盗版 3.插件多，而且可以自己编写插件
2.grunt安装与使用
第一步：添加package.json和gruntfile.js文件
package.json配置项的添加方式：
a:手动添加 (下面内容已经将基本的grunt插件写好)
{
"name": "grunt_test",
"version": "0.0.1",
"description": "grunt test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-cssmin":"*",
"grunt-contrib-imagemin":"*",
"grunt-contrib-watch": "*",
"grunt-contrib-concat":"*"
},
"keywords": [
"grunt"
],
"author": "caihe",
"license": "ISC"
}
说明：
grunt-contrib-jshint： 检查javascript语法
grunt-contrib-uglify： 压缩以及合并js文件
grunt-contrib-cssmin：压缩以及合并css文件
grunt-contrib-imagemin：图像压缩模块
grunt-contrib-watch:监视文件变动，做出相应动作
grunt-contrib-concat:合并文件
然后cmd窗口中进入到当前项目的根目录输入命令行 ：npm install
b:命令行实现：npm install grunt-contrib-jshint --save-dev等
gruntfile.js文件配置：
gruntfile.js 的作用1.读取package.json的信息 2.插件加载、注册任务、运行任务
module.exports = function(grunt){
//项目配置
grunt.initConfig({
//读取配置项
pkg:grunt.file.readJSON("package.json"),
//具体任务
uglify:{
options:{
//加注释
banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> \n*/"
},
build:{
//被压缩的文件的路径
src: "src/jquery-1.9.1.js",
//被压缩后的文件路径
dest:"dest/jquery-1.9.1.min.js"
}
},
//合并
concat:{
options:{
//加注释
banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> 合并的js\n*/"
},
build:{
//被压缩的文件的路径
src: "src/*.js",
//被压缩后的文件路径
dest:"dest/concat.js"
}
},
jshint: {
files: ['Gruntfile.js'],
options: {
}
},
watch: {
files: ['src/*.html','src/*.css'],
tasks: ['jshint']
}
});
//加载插件
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
//默认执行任务
grunt.registerTask("default",["uglify","concat","jshint",'watch']);
};
然后cmd窗口中进入到当前项目的根目录输入命令行 ：grunt
可执行grunt任务grunt watch可监听文件变化