Grunt使用入门

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.exports
module.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") %> */
'
            },
            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配置举例

 

分类: JavaScript

标签: grunt, grunt使用入门, grunt自动化, grunt配置