grunt使用初步

grunt是什么

Grunt是一个任务管理器，能大大提高您运行前端开发的效率。使用大量的Grunt插件可以自动执行任务，例如编译Sass和CoffeeScript，优化图像和验证您的JavaScript代码与JSHint。

1. grunt的安装

在安装grunt之前需要先安装node和npm

在安装nodejs和npm之后，就可以安装grunt-cli了；使用下面的命令来进行安装。

npm install -g grunt-cli

使用-g标记安装grunt-cli表示全局安装，你可以在任何项目中使用这个命令。

2. 使用grunt

使用grunt时需要创建两个文件，package.json和Gruntfile.js

2.1package.json文件介绍

package.json文件需要放置在项目的根目录下。这文件定义了项目的数据，如项目名，版本和作者。package.json文件还负责项目任务所需的依赖关系。devDependencies属性定义了应用程序所需要的任务包。

一下是一个示例package.json

{
  "name": "project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-compass": "~0.6.0"
  }
}

一旦创建好了package.json就可以在终端使用npm install命令来安装项目的依赖了。

npm install

这个命令将获取所有的依赖包，并把他们放在项目根目录下的node_module文件夹中。你可能要在.gitignore文件中排除掉对这个文件夹的引用（假定你使用git来做版本控制）

另外可以通过指定--save-dev来安装模块，这样npm会自动更新package.json文件。

npm install <module> --save-dev

使用--save-dev可以通过npm自动将任务包安装所需要依赖的关系添加到你的package.json文件中。安装之后确认更新你自己的文件。

2.2 在Gruntfile中定义任务

接下来需要在项目中创建Gruntfile.js文件，这个文件用来定义和配置Grunt运行的任务。

Gruntfile.js的基本结构

module.exports = function(grunt){
	//  配置任务和插件
	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),
		// 定义任务
		compass:{
			dist:{
				options:{
					sassDir:'assets/sass',
					cssDir:'assets/css',
					outputStyle:'compressed'
				}
			}
		}
	});

	// 加载Grunt插件
	grunt.loadNpmTasks('grunt-contrib-compass');

	// 注册grunt默认任务
	grunt.registerTask('default', ['compass']);//引用上面定义的compass任务
}

2.2.1

所有代码都必须放在Gruntfile文件中的wrapper函数中。这个约定了Grunt的所有插件都在这里配置。

module.exports = function(grunt) {
  // 配置任务和插件
};

A. 项目配置：

pkg:grunt.file.readJSON('package.json');//直接从之前创建的package.json文件导入配置数据。依赖关系中提供了插件的名称和版本。

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  task: {...},
  task_two: {...}
});

B. 加载插件：

grunt.loadNpmTasks('grunt-contrib-compass');

C. 注册默认任务

grunt.registerTask方法用来指定一个运行Grunt任务的默认组，当你运行grunt命令行会执行这指定的默认任务。

grunt.registerTask('default', ['watch']);

D. 运行Grunt

在终端执行grunt命令，将会执行default任务重指定的所有任务。

也可以通过grunt后加对应的任务明，执行单独的任务。

grunt // 运行指定的默认任务。
grunt compass //仅仅执行compass任务

E. 添加新的插件

先要安装grunt-browser-sync任务包.使用--save-dev自动将插件插入package.json文件中。

npm install grunt-browser-sync --save-dev

你也需要在Gruntfile文件中加载插件：

grunt.loadNpmTasks('grunt-browser-sync')