标签：

Grunt简单教程

1.grunt简介

Grunt是一个基于任务的命令行工具，依赖于node.js环境。

它能帮你合并js文件，压缩js文件，验证js，编译less，合并css，还可以配置自动任务，单元测试等等，grunt有非常多的插件，可以满足你的大部分需求。

2.怎么安装

先介绍一些东西：

npm是node.js的包管理器通过npm可以下载安装nodejs的模块包

cnpm是淘宝 npm镜像，用此代替官方版本(只读)，同步频率目前为10分钟一次。

安装cnpm方法

npm install -g cnpm --registry=https://registry.npm.taobao.org

常用命令：

node -v 版本

npm -v 版本

npm list：查看当前目录下已安装的node包

npm help：查看帮助命令

npm install <name> -g 
将包安装到全局环境中,在命令行能直接使用

npm update moduleName：更新node模块

npm uninstall moudleName：卸载node模块

npm root：查看当前包的安装路径
npm root -g：查看全局的包的安装路径

如果你之前安装过老的0.3版本，请先卸载：

npm uninstall -g grunt

安装Grunt命令行（CLI）：

npm install -g grunt-cli

注1：-g代表全局安装，Grunt有二个版本：服务器端版本（grunt）和客户端版本（grunt-cli）。

注2：安装grunt-cli并不等于安装了grunt！grunt CLI的任务很简单：调用与Gruntfile在同一目录中的grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的grunt。而grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应的模块。这些模块应该采用局部安装，因为不同项目可能需要同一个模块的不同版本。

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。

{
	"name": "grunt",

	"version": "0.1.0",

	"devDependencies": {

		"grunt": "~0.4.0",

		"grunt-contrib-jshint": "~0.1.1", 
		"grunt-contrib-nodeunit": "~0.1.2", 
		"grunt-contrib-watch": "~0.2.0", 
		"grunt-contrib-concat": "~0.1.1", 
		"grunt-contrib-uglify": "~0.1.0", 
		"grunt-contrib-cssmin": "~0.9.0", 
		"difflet": "~0.2.3"

	}
}

devDependencies里面的参数，指定了项目依赖的Grunt和Grunt插件版本。其中"~0.1.1"代表安装该插件的某个特定版本，如果只需安装最新版本，可以改成"*"。

创建新的Grunt项目

cd到项目文件夹

方式一：建好package.json文件然后执行：
npm install
这时你会发现项目文件夹中多了个node_modules文件夹，其里面就是对应的Grunt和Grunt插件。

方式二：自动安装

安装最新版的Grunt：
npm install grunt --save-dev
接着安装我们所需要的插件：
npm install grunt-contrib-cssmin --save-dev
注：其中--save-dev，表示将它作为你的项目依赖添加到package.json文件中devDependencies内。如果你要安装指定版本的Grunt或者Grunt插件，只需要运行npm install grunt@VERSION --save-dev命令，其中VERSION就是你所需要的版本(指定版本号即可)。

配置任务

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件

module.exports = function(grunt){

	grunt.initConfig({ 
		pkg: grunt.file.readJSON('package.json'), 
		concat: {  
			options: {  
			},  
			dist: {  
				src: ['src/**/*.js'],//src文件夹下包括子文件夹下的所有文件  
				dest: 'dist/built.js'//合并文件在dist下名为built.js的文件  
			}  
		},
		uglify: { 
			//文件头部输出信息
			options: { 
				banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:mm:ss") %> */\n' 
			}, 
			//具体任务配置
			build: { 
				src: 'dist/built.js', 
				dest: 'build/built.min.js' 
			} 
		},
		cssmin: {
			build: {
				src: ["src/css/css1.css", "src/css/css2.css"],
				dest:"dist/css/cssOut.css"
			}		
		}
	});
	// 加载提供”uglify”任务的插件 
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-concat'); 
	grunt.loadNpmTasks('grunt-contrib-cssmin'); 
	// 默认任务 
	grunt.registerTask('default', ['concat','uglify','mincss']); 
}

执行任务

执行配置中所有的任务：
grunt
执行某个特定的任务：
grunt concat

常用插件介绍：

grunt-contrib-uglify  压缩js文件

grunt-contrib-concat 合并任意文件

grunt-contrib-jshint 于javascript代码检查（并会给出建议），发布js代码前执行jshint任务，可以避免出现一些低级语法问题

grunt-contrib-mincss  用于css压缩

grunt-contrib-watch 它能监测文件的修改，触发指定任务

grunt-contrib-less less编译

等等

grunt简单教程

标签：

原文地址：http://blog.csdn.net/w171203757/article/details/47061211