Grunt javascript世界的构建工具（一）——Grunt使用入门 (by vczero)

一、前言

项目中一直在使用Grunt，只是对Grunt的基本使用，却未系统的总结过。为什么要构建工具？一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。为什么要使用Grunt。Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。——引自gruntjs官网。来，看看多“牛”的logo：

这logo牛吧，我真心觉得真牛。

二、安装Grunt & 插件

(1)首先，需要安装了Node.js，可以访问：node.js安装。

(2)npm install -g grunt-cli ：这样，grunt命令就被追加到了系统的环境path中了。grunt-cli的作用是调度不同版本的Grunt。grunt-cli在每次grunt运行的时候，都是通过node.js的模块的require查找系统的grunt。

(3)创建package.json、Gruntfile.js/coffee

对于package.json，做过node.js开发的都熟悉，用于发布和管理依赖。这里，我们可以把grunt的配置放到devDependencies中。

Gruntfile.js或者Gruntfile.coffee是用来配置Grunt的task的。

这里，手动建一个项目find，手动创建package.json和Gruntfile.js。当然，可以使用npm init命令初始化package.json文件，如下图所示：

package.json配置：

{    "name": "山鬼谣-find-grunt",    "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"    }}

因为，已经在package.json中填写了相关配置，因此可以使用npm安装。刚才使用中文name报错了，改成了英文OK（"name": "shanguiyao-find-grunt",）。将grunt安装到开发环境中。

(4)安装Grunt

npm install grunt --save-dev

如下图，grunt安装成功，并且更新了package.json中grunt的版本，现在为4.5：

(5)安装grunt插件

其实，可以使用上面同样的方式安装package.json的grunt插件。因为已经有了package.json描述，所以npm install就一并安装了。安装完成后，项目的node-module下情况如下：

三、使用Gruntfile.js

Gruntfile应当和package同样存放于项目的根目录。Gruntfile主要是项目和任务的配置，包括自定义任务。

//整个任务必须导出module.exportsmodule.exports = function(grunt) {    //grunt配置    grunt.initConfig({        pkg: grunt.file.readJSON('package.json'),        //uglify插件的使用，用于将js压缩为一个目标文件        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');    // 默认任务列表    grunt.registerTask('default', ['uglify']);};

四、使用grunt

首先，建立目录src和shanguiyao-find-grunt.js。

var O = (function(){    var MyObject = {        "name": "山鬼谣",        "url": "http://www.cnblogs.com/vczero/",        getName: function(){},        showLove: function(){console.log('Javascript世界');}    };    MyObject.test = function(){};    return MyObject;})();O.showLove();

整个项目如下：

使用grunt命令：

OK，我们可以看到压缩后的效果了。

五、后期的blog

(1)grunt-cli源码研读

(2)大型项目的grunt配置举例