安装grunt及其插件

前提是全局环境下安装完trunk

插件官网地址：http://www.gruntjs.net/plugins

1.创建项目名test，同级目录下创建Package.json和Gruntfile.js

Package.json

{
  "name": "test",
  "version": "1.0.0",
  "devDependencies": {
  }
}

Gruntfile.js

//包装函数
module.exports = function(grunt) {
　　//任务配置，所有插件的配置信息
　　grunt.initConfig({
	//获取 package.json的信息
	pkg: grunt.file.readJSON('package.json')		
　　});
　　//告诉grunt当我们在终端输入grunt时需要做些什么（注意先后顺序）
　　grunt.registerTask('default', ['']);
}

2.进入当前目录下安装grunt，此时package.json文件的devDependencies下会自动生成一个包含插件名和版本号的json。

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
.....

3.在Gruntfile.js文件中添加grunt.loadNpmTasks('插件名');，其中.jshintrc为过滤规则，需自己填写。

//包装函数
module.exports = function(grunt) {
	//任务配置，所有插件的配置信息
	grunt.initConfig({
	　　//获取 package.json的信息
	　　pkg: grunt.file.readJSON('package.json'),
	　　//uglify插件的配置信息
	　　uglify: {
	　　　　options: {
		　　stripBanners: true,
		　　banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' 
	　　　　},
	　　　　build: {
		　　src: 'static/js/index.js',
		　　dest: 'build/js/index-<%=pkg.version%>.js.min.js'
	　　　　}
	　　},
	　　jshint:{
	　　　　options: {
		　　jshintrc: '.jshintrc'
	　　　　},
	　　　　build: ['Gruntfile.js', 'static/js/*.js']
	　　},
	　　watch: {
	　　　　build: {
		　　files: ['static/js/*.js', 'static/css/*.css'],
		　　tasks: ['jshint', 'uglify'],
		　　options: {spawn: false}
	　　　　}
　　	　　}
　　});
　　//告诉grunt我们将使用的插件
　　grunt.loadNpmTasks('grunt-contrib-uglify');
　　grunt.loadNpmTasks('grunt-contrib-jshint');
　　grunt.loadNpmTasks('grunt-contrib-watch');
　　//告诉grunt当我们在终端输入grunt时需要做些什么（注意先后顺序）
　　grunt.registerTask('default', ['jshint','uglify','watch']);
}

4.运行

grunt 
grunt uglify
grunt watch
......