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")%> */\n'
			},
			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")%> */\n'
			},
			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——前端自动化测试工具