Grunt——前端任务自动管理工具

介绍

Grunt是一个前端项目构建工具。在前端开发中，经常要做一些重复性的工作，比如压缩文件、合并文件、单元测试、语法检测、疯狂地敲击F5和Ctrl+F5等等。而Grunt可以处理以上重复性的工作，减轻你的劳动，简化你的工作。

安装

Grunt是通过npm安装管理的，npm是Node.js的包管理器。Node.js和npm的安装过程自己Google，这里就不在赘述。

ps:Grunt 0.4.X必须配合Node.js >=0.8.0 版本使用。

安装Grunt-cli

将grunt-cli安装到全局环境中。

npm install -g grunt-cli

这样，grunt命令就被加入到系统路径中，以后可以在任何目录下执行此命令了。

两个文件

package.json文件

package.json文件包含项目基本信息和grunt插件依赖。看下面这个例子。

{
  "name":"GruntTest",
  "vesion":"0.1.0",
  "author":"SevenHDU",
  "license":"MIT",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

然后在项目的根目录下运行下面的command。

npm install

根目录中会多出一个node_modules的文件夹，package.json中依赖的模块都安装到该文件夹下。

也可以通过以下command直接安装grunt模块。

npm install grunt-contrib-connect --save-dev

此时，该模块也会自动添加到package.json文件中。

Gruntfile.js文件

gruntfile.js是任务配置文件。看下面这个例子。

module.exports = function(grunt) {
    //配置模块信息
    grunt.initConfig({
        uglify:{
          dist:{
            src: 'src/test.js',
            dest: 'dist/test.min.js'
          }
        }
    });
    //加载模块
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //注册任务
    grunt.registerTask('default', ['uglify']);
}

上面代码的任务是经src文件中test.js压缩，并将生成的压缩文件放到dist文件夹下。

主要分三块：

grunt.initConfit    

配置相关模块信息。

grunt.loadNpmTasks

加载完成任务所需要的模块。

grunt.registerTask

注册任务，这样就可以在命令行中输入grunt + 任务名 来执行任务，如不加任务名，则执行default任务。