grunt学习笔记

gruntjs 是一个基于nodejs的自动化工具，只要熟悉nodejs或者又一定js经验就可以熟练应用。
最近很火的前端自动化小工具，基于任务的命令行构建工具 http://gruntjs.com

我们需要一个自动化的工作流程，让我们更专注于coding，而不是coding外的繁琐工作。于是Grunt应运而生。可以想像，如果在node环境下，一行命令搞定一个场景，So Cool…

package.json //项目自动化所依赖的相关插件。
Gruntfile.js //项目自动化工作流配置文件，重要

1. 安装

   • 确保已经安装node和npm
   • 然后安装grunt的客户端命令行工具 npm install -g grunt-cli, 安装完之后就有了grunt
     压缩css js和合并文件需要grunt插件，grunt只是一个平台，完成各项任务有对应的插件。
   • grunt插件十分丰富，其中带contrib的为官方插件 其他的为第三方插件

2. 安装grunt插件

   • 方式1 在工程目录中创建一个package.json文件，列出依赖的插件和对应的版本即可
     然后cd到工程目录下 执行 npm install
   • 方式2 使用命令行工具 npm install grunt-contrib-watch --save-dev

3. 创建gruntjs工程文件
   gruntjs支持两种语言创建工程文件： gruntfile.js或者gruntfile.coffee
   grunt工程文件遵循node模块定义方式，主题结构为：

   
   	module.exports = function(grunt){
   		grunt.initConfig({
   			clean:{
   				a:['<%=temp%>']	
   			},
   			b:['<%=temp%>']
   		});
   		
   	//获取工程中需要的插件
   	grunt.loadNpmTasks('grunt-contrib-clean');
   	grunt.loadNpmTasks('grunt-contrib-cssmin');
   	grunt.loadNpmTasks('grunt-contrib-uglify');
   	grunt.loadNpmTasks('grunt-contrib-watch');
   	grunt.loadNpmTasks('grunt-contrib-copy');
   	grunt.loadNpmTasks('grunt-contrib-includes');
   
   	//注册任务
   	grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);
   	//在命令行中执行grunt,就会使用默认任务
   	grunt.registerTask('default',['build']);			
   
   

   
   //一个完整的gruntjs工程文件
   module.exports = function(grunt){
   	var rt = 'src-dev/',
   		indexDir = rt + 'index/',
   		tempDir  = rt + 'temp/';
   	console.log(grunt.option('keys'));
   
   	grunt.file.exists(tempDir) && grunt.file.delete(tempDir);
   	grunt.file.markdir(tempDir);
   
   	grunt.initConfi({
   		pkg: grunt.file.readJSON('package.json');
   		rt: rt,
   		tempDir: tempDir,
   		indexDir = indexDir,
   		clear: { build:['<%=temp%>']},
   		jsdoc:{
   			dist:{
   				src:'<%=index%>doc.js',
   				options:{
   					destination:'<%=rt%>../out/'
   				}
   			}
   		},
   		cssmin:{
   			combine:{
   				files:{
   					'<%=temp%>c.min.css':['<%=rt%>common/reset.css', '<%=index%>c.css']
   				}
   			}
   		},
   		includes:{
   			files:{
   				sr:['<%=rt%>**/*.html'],
   				dest:'<%=temp%>',
   				cwd:'.',
   				flatten:true,
   				options{
   					banner:''
   				}
   			}
   		},
   		watch:{
   			files:['<%=index%>j.js','<%=index%>*.html', '<%=index%>c.css']
   			tasks:['clean','uglify','cssmin','includes','copy','clearn'],
   			options:{ livereload:true}
   		},
   		uglify:{
   			dist:{
   				files:{
   					'<%=temp%>j.js', ['<%=index%>*.js']
   				}
   			}
   		},
   		copy:{
   			main:{
   				files:[{
   					flatten: true,
   					expand: true,
   					filter:'isFile',
   					src:['<%=temp%>index.html'],
   					dest='<%=rt%>../src/'
   				}]
   			}
   		}
   	
   		//获取工程中需要的插件
   		grunt.loadNpmTasks('grunt-contrib-clean');
   		grunt.loadNpmTasks('grunt-contrib-cssmin');
   		grunt.loadNpmTasks('grunt-contrib-uglify');
   		grunt.loadNpmTasks('grunt-contrib-watch');
   		grunt.loadNpmTasks('grunt-contrib-copy');
   		grunt.loadNpmTasks('grunt-contrib-includes');
   
   		//注册任务
   		grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);
   		//在命令行中执行grunt,就会使用默认任务
   		grunt.registerTask('default',['build']);