grunt 构建前端js项目
grunt 简介
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及启动静态服务器。和java中的maven有异曲同工之秒。
- 文档丰富：详细的使用说明，从入门使用，到高级定制，非常详尽
- 插件丰富：基本能够想到的常用的任务，都可以找到
- 社区活跃：Grunt的开发团队还是挺勤劳的，社区活跃度也挺高
安装 Grunt
Grunt以及Grunt的插件，都是通过npm进行安装和管理，所以首先得安装node环境， node.js 的下载地址：http://nodejs.org/#download，下载完成后点击下一步执行安装完即可。这里假设你已经安装了 Node.js 和 NPM。推荐使用git shell bash执行命令，首先安装全局grunt-cli ,如下：
npm install -g grunt-cli
grunt-cli的主要作用是让我们可以运行Grunt命令，加上-g，则可以在任意目录下运行。
Grunt 常用插件介绍
JSHint——检查下JS代码规范性，避免进行类似隐式全局变量这样的坑里concat——JS文件合并，合理减少请求数，提升加载速度cssmin——CSS文件合并，合理减少请求数，提升加载速度Uglyfy——压缩文件，减少文件尺寸，提升用户侧加载速度QUnit——单元测试，提高项目可维护性，结合递归测试可尽早发现潜在问题
Grunt正是为了解决重复问题而诞生，它将项目结构生成、JSHint检查、文件合并、压缩、单元测试等繁琐的工作变成一个个可自动化完成的任务，一键搞定。
Grunt 示例
创建一个简单grunt 项目
1 切换至项目根目录，创建两个配置文件 package.json和Gruntfile.js文件。
一 package.json：这个文件主要用来描述项目信息以及项目依赖的插件；
二 Gruntfile : 这个文件主要用来配置项目任务以及加载插件。
{
"name": "bpms",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
}
}
Gruntfile.js 文件内容示例
module.exports = function(grunt) { // 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
//加载插件任务
grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认执行任务，和ant 有点类似
grunt.registerTask('default', ['uglify']); };
2 创建好基本项目文件后，运行如下命令安装grunt 及grunt 依赖的插件
npm install
npm install –save-dev
至此项目的一个基本环境搭建完成，然后新建一个src文件夹，创建一个bpms.js的简单js 脚本文件
3 运行grunt 生成目标文件
默认运行grunt 将会执行default 任务，如果还注册有其他任务，运行grunt name name 代表你自定义的任务名称
