grunt 快速入门：使用 grunt 自动化构建工具进行前端开发

2014-09-06 0 条评论 7,796 次阅读被赞了 0 次

[隐藏]

grunt 是前端开发的自动化构建工具，对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting 等，自动化工具可以减轻你的劳动，简化你的工作。

下面志文工作室以一个项目的构建为例，简介入门 grunt 进行前端开发的过程，主要涉及到 javascript 代码合并与压缩，css 代码合并与压缩，以及图片压缩。

1. 安装

grunt 依赖 nodejs，首先安装下载 nodejs:

http://nodejs.org/download/

安装 nodejs 后，打开命令行，安装 grunt-cli，执行命令：

npm install -g grunt-cli

2. 配置 grunt 项目文件

在项目中配置 grunt 所需文件，grunt 即可知道如何自动化工作。
这里主要工作是在项目的根目录创建 package.json 与 Gruntfile.js 两个文件。

2.1 创建 package.json 文件

执行命令：

npm init

按提示逐步操作即可。

该文件主要配置项目基本信息及工具插件依赖，以让 nodejs 知道下载哪些插件。具体可参考如下配置：

{
	"name": "lxxh",
	"version": "0.0.2",
	"description": "不花流量看离线笑话",
	"author": "志文工作室",
	"license": "BSD",
	"engines": {
	    "node": ">= 0.8.0"
	},
	"scripts": {
		"test": "grunt qunit"
	},
	"devDependencies": { 
		"grunt": "~0.4.1", 
		"grunt-contrib-uglify": "~0.2.2",
		"grunt-css": ">0.0.0",
		"grunt-contrib-imagemin": ">0.8.0",
		"grunt-contrib-jshint": "~0.6.2",
		"grunt-contrib-concat": "~0.3.0"
	} 
}

或参考如下文件：

{
  "name": "jquery-plugin",
  "version": "0.0.0-ignored",
  "engines": {
    "node": ">= 0.8.0"
  },
  "scripts": {
    "test": "grunt qunit"
  },
  "devDependencies": {
    "grunt-contrib-clean": "~0.4.0rc6",
    "grunt-contrib-jshint": "0.1.1rc6",
    "grunt-contrib-qunit": "0.1.1rc6",
    "grunt-contrib-concat": "0.1.2rc6",
    "grunt-contrib-uglify": "0.1.1rc6",
    "grunt-contrib-watch": "0.2.0rc5",
    "grunt": "0.4.0rc7"
  }
}

https://github.com/cowboy/jquery-tiny-pubsub/blob/master/package.json

2.2 创建 Gruntfile.js 文件

该文件主要为 grunt 所使用。

配置参考如下：

module.exports = function(grunt) {
	grunt.initConfig({
		//如果需要用到 package.json 中的参数变量，可使用 pkg 引用（如 pkg.name）
		pkg : grunt.file.readJSON('package.json'),
		//JSHint 代码质量检查任务
		jshint: {
			all: ['www/js/index.js'] //files to lint 
		},
		//concat 多文件合并任务 
		concat: {
			js: {
				options: {
					separator: ';' //多文件分隔符
				},
				src: ['www/js/*.js'], //合并哪些文件
				dest: 'www/index.min.js' //合并后输出 
			},
			css : {
				src: ['www/css/*.css'],
				dest: 'www/index.min.css'
			}
		},
		//uglify 压缩任务，压缩 js
		uglify: {
			js: {
				files: {
					'www/js/index.min.js': ['www/js/index.min.js'] //替换保存
				}
			}
		},
		//cssmin 压缩任务，压缩 css
		cssmin: {
			css: {
				src: 'www/index.min.css',
				dest: 'www/index.min.css'
			}
		},
		//图片压缩
		imagemin: {
			dist: {
				options: {
					optimizationLevel: 3 //定义 PNG 图片优化水平
				},
				files: [{
					expand: true,
					cwd: 'img/',
					src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
					dest: 'img/' // 优化后的图片保存位置，覆盖旧图片，并且不作提示
				}]
			}
		}
	});
	//加载包含 jshint、concat 和 uglify 任务的插件 
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-css');
	grunt.loadNpmTasks('grunt-contrib-imagemin');
	
	//默认被执行的任务列表
	grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', "cssmin"]);
	//自定义任务列表
	grunt.registerTask('development', ['jshint']);
	grunt.registerTask('production', ['concat', 'uglify', 'imagemin', "cssmin"]);
	grunt.registerTask('img', ['imagemin']);
};

也可参考如下两个文件。该 Gruntfile.js 文件中的一些配置参数是从 tiny-pubsub.jquery.json 中读取的。

https://github.com/cowboy/jquery-tiny-pubsub/blob/master/Gruntfile.js
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/tiny-pubsub.jquery.json

3. 安装项目依赖的库

进入项目根目录（Gruntfile.js 所在目录），执行命令：

npm install

执行后会在项目根目录下创建 node_modules ，并下载依赖库到该目录。

或者参考 package.json 文件中的依赖配置，逐个安装，参考命令：

npm install grunt –save-dev
npm install grunt-contrib-jshint –save-dev
npm install grunt-contrib-concat –save-dev
npm install grunt-contrib-uglify –save-dev
npm install grunt-css –save-dev
npm install grunt-contrib-imagemin –save-dev