Grunt安装与入门

2019独角兽企业重金招聘Python工程师标准>>>

一、grunt简介

grunt是什么？

    grunt是Javascript世界的构建工具，我们的项目在创建初期，会很小，但经过很多版本的迭代，越来越大，CSS和JS都不太好管理了，这时我们需要工具来帮助我们管理，grunt就是做这个的。它主要的工具就是编译、压缩、单元测试等，以减少我们的工作量。

    grunt已有很多可供我们使用的插件，帮助我们实现各种工业自动化，那如何使用grunt呢？

二、安装grunt

grunt和其插件都是通过npm安装的，所以，系统中必须安装npm，npm是NodeJS的包管理器。

liuzhendeMacBook-Air:gruntTest liuzhen$ npm -v
2.14.12

安装grunt之前必须先将grunt-cli安装到全局中（我这里使用了sudo命令来安装）

liuzhendeMacBook-Air:gruntTest liuzhen$ sudo npm install -g grunt-cli
Password:
npm WARN deprecated lodash@2.4.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.7)
└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
liuzhendeMacBook-Air:gruntTest liuzhen$

安装好grunt-cli并不是安装了grunt，grunt-cli的作用就是调用与grunfile同目录的grunt，这样做的好处就是不同的项目里可以存放不同版本的grunt。

三、package.json和gruntfile

在项目中安装grunt之前，一般都需要两个文件，package.json和gruntfile

package.json：

此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块进入项目目录，使用npm init命令来创建一   个基本的package.json，在创建完gruntfile之后，就可以在项目目录中使用

sudo npm install grunt --save-dev

来安装项目grunt，也可以使用

sudo npm install grunt-contrib-jshint --save-dev

来安装grunt插件

gruntfile：

此文件可被定义为gruntfile.js或者gruntfile.coffee，用来配置或定义任务（task），并加载grunt插件。

一般它可以由以下几个部分组成：

1.“wrapper”函数，它包含整个grunt配置信息

module.exports = function(grunt) {

}

在这个函数中初始化configuration对象

grunt.initConfig({

});

接下来就可以从package.json中读取配置信息，并存入pkg属性中

pkg:grunt.file.readJSON('package.json')

好了，到目前为止我们可以看到如下的代码：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
}

接下来，我们就可以为每个任务定义相应的配置。

2.项目与任务配置

首先，我们来配置concat，也就是文件合并任务，如下代码：

concat: {
  options: {
    //定义一个用于插入合并输出文件之间的字符
    separator: ';';
  },
  dist: {
    //将要被合并的文件
    src: ['src/**/*.js'],
    //合并后的JS文件的存放位置
    dest: 'dist/<%= pkg.name %>.js'
  }
}

接下来，我们配置uglify插件，也就是文件压缩

uglify: {
  options: {
    //此处定义的banner注释将插入到输出文件的顶部
    banner: '/* <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}

QUnit插件用于测试文件，只要提供文件位置即可

qunit: {
  files: ['test/**/*.html']
},

JShint插件用于检查JS代码的合法性，配置也很简单

jshint: {
  //定义需要检查的文件的位置
  files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  //JSHint默认配置
  options: {
    globals: {
      jQuery: true,
      console: true,
      module: true
    }
  }
}

最后，来配置watch插件，它是用来监视当前文件变化，如果有变化，则grunt会自动执行代码检查

watch: {
  files: ['<%= jshint.files %>'],
  tasks: ['jshint', 'qunit']
}

3.加载grunt插件和任务

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');

以上的grunt插件需要通过npm进行安装，如以下代码：

sudo npm install grunt-contrib-jshint --save-dev

4.自定义任务

最后，我们需要设置task，重要的是default任务：

//在命令行输入“grunt test”，test task就会被执行
grunt.registerTask('test', ['jshint', 'qunit']);
//在命令行上输入“grunt”，就会被执行的default task
grunt.resisterTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

下面，是最终完成的gruntfile文件代码：

module.exports = function(grunt) {
	//初始化
	grunt.initConfig({
		//读取配置信息
		pkg: grunt.file.readJSON('package.json'),
		//定义文件合并
		concat: {
			options: {
				separator: ';'
			},
			dist: {
				src: ['src/**/*.js'],
				dest: 'dist/<%= pkg.name %>.js'
			}
		},
		//文件压缩
		uglify: {
			options: {
				banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
			},
			dist: {
				files: {
					'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
				}
			}
		},
		//文件测试
		qunit: {
			files: ['test/**/*.html']
		},
		//JS代码检查
		jshint: {
			files: ['gruntfile.js', 'src/**/*.js', 'test/**/*js'],
			options: {
				//这里覆盖JSHint默认配置选项
				globals: {
					jQuery: true,
					console: true,
					module: true,
					document: true
				}
			}
		},
		//文件变化监听
		watch: {
			files: ['<%= jshint.files %>'],
			tasks: ['jshint', 'qunit']
		}
	});

	//加载插件
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-qunit');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-concat');

	//设置任务
	grunt.registerTask('test', ['jshint', 'qunit']);
	grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};

未完，待续。。。

转载于:https://my.oschina.net/u/2399867/blog/614622