grunt基础

grunt是一个前端自动化工具，用于文件压缩、合并、错误检查等。

grunt是通过npm管理的，npm是nodejs的包管理器，所以安装grunt前要确保电脑安装了nodejs和npm。

安装过程

ps：通过npm安装很多系统需要sudo权限。

首先安装grunt的命令行CLI到全局

npm install -g grunt-cli

grunt-cli的作用是可以让多个版本的grunt同时存在(相当于grunt的一个构建工具)

grunt的核心就是Gruntfile.js文件的管理

我们创建一个项目目录，文件中要有两个文件

Gruntfile.js就是grunt执行的js，用于配置我们需要grunt执行哪些操作（js合并、检错等等）

package.json相当于一个项目管理文件（用于配置项目名字、版本、一些依赖包等等）

//package.json
{
  "name": "project-name",
  "version": "1.0.0",
  "devDependencies": {

  }
}

创建好项目目录后，我们在项目目录中安装grunt

npm install grunt --save-dev

这时我们在项目目录中会看到多了一个node_modules文件夹，文件夹中多了一个grunt文件夹，说明grunt已经安装成功

再看package.json中devDependencies对象中多了一条gurnt的配置，这就是-dev的作用（会把安装依赖包信息写到package.json中）

下面进行Gruntfile.js的配置

ps：再没有配置的情况下，终端输入grunt会有错误提示信息

下面先进行一个简单配置

module.exports = function(grunt){
	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json')
	})
	grunt.registerTask('default',[]);
}

我们对package.json文件进行了一次read操作，这时候就没有报错了

这个过程可以忽略，下面进行gurnt插件安装和配置

uglify：用于js文件的压缩

插件安装：npm install grunt-contrib-uglify --save-dev

先搞一个测试文件：当前目录创建个src文件夹，文件夹中新建一个testJs.js文件，文件里随便写点js代码就行

然后配置Gruntfile.js文件

	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),
		uglify:{
			options:{
				stripBanners: true,
				banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */
'
			},
			build:{
				src: 'src/testJs.js',
				dest: 'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
			}
		}
	})
	grunt.loadNpmTasks('grunt-contrib-uglify'); 
	grunt.registerTask('default',['jshint']);

　options中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明

　build中配置了输入输出文件的目录和名字

   插件被安装后，要在在你的gruntfile.js中执行grunt.loadNpmTasks

　grunt.registerTask是让插件立刻执行，第二参数是数组，用于gurnt插件的执行顺序

最终在目录中多了一个build文件夹，里面生产了一个testJS的压缩文件，内容如下

其他插件同理，直接放代码了

	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),
		uglify:{
			options:{
				stripBanners: true,
				banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */
'
			},
			build:{
				src: 'src/testJs.js',
				dest: 'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
			}
		},
		jshint:{
			options:{
				jshintrc:'.jshintrc'
			},
			build:['Gruntfile.js','src/*.js']		
		},
		watch:{
			build:{
				files:['src/*.js','src/*.css'],
				tasks:['jshint','uglify'],
				options:{spawn:false}
			}
		}
	})
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default',['jshint','uglify','watch']);

　　其中watch插件用于监听，当我们保存代码时，watch会自动执行（不用每次在终端输入grunt了）

ps

• Contrib-jshint——javascript语法错误检查；
• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
• Contrib-clean——清空文件、文件夹；
• Contrib-uglify——压缩javascript代码
• Contrib-copy——复制文件、文件夹
• Contrib-concat——合并多个文件的代码到一个文件中
• karma——前端自动化测试工具