grunt入门

1. grunt是什么

一个可以运行 各种处理前端繁琐操作（压缩文件，删注释，测试等等）的插件 的平台。
所谓的自动化，就是插件帮你处理了各种繁琐的操作。而grunt的作用就是作为主管分配任务给插件，实现自动处理。

2. 如何使用

1. 安装nodejs,与npm，必须的
2. 安装grunt命令行到系统，从而可以在任何位置使用grunt

$ npm install grunt-cli -g //-g 的意思是全局

3. 配置package.json 文件与 gruntfile.js 文件，以下以一个demo作为例子，新建文件夹内容如下：

   
   
   

   其中dest是处理完的文件，node_modules是库，src是源码，test是测试

1. package.json是npm的库清单，写上要导入什么库，之后在所在目录输入下面的命令就可以自动导入

$ npm install

package.json也可以通过以下命令生成。

$ npm init

package.json的文件内容是大致是这样

{
    "name": "project-name",
    "version": "1.0.0",
    "description": "...",
    "main": "index.js",
    "keywords": [
      "flux",
      "react"
      ],
    "repository": "github_username/repository_name",
    "author": "your name",
    "license": "MIT",
    "devDependencies": {   
        "grunt": "^0.4.5",
        "grunt-contrib-concat": "^1.0.0",
        "grunt-contrib-connect": "^1.0.1",
        "grunt-contrib-cssmin": "^1.0.1",
        "grunt-contrib-htmlmin": "^1.2.0",
        "grunt-contrib-jshint": "^1.0.0",
        "grunt-contrib-qunit": "^1.1.0",
        "grunt-contrib-uglify": "^1.0.1",
        "grunt-contrib-watch": "^1.0.0",
        "jshint": "^2.9.1",
        "uglify": "^0.1.5",
        "watch": "^0.17.1"
      }
}

另外库也可以一个一个导入, 加了--save-dev可以自动写入到package.json文件中

$ npm install grunt-contrib-uglify --save-dev

2. gruntfile.js是配置要执行的任务，文件内容大致如下

module.exports = function(grunt) {
    grunt.initConfig({
        //载入npm的库清单，必须
        pkg: grunt.file.readJSON("package.json"),
        
         //以下是插件的具体配置，各种插件的配置可参考官网，下面是一些例子
        //concat，合并文件
        concat:{
            options:{separator: ";"},   //合并的分隔符
            dist:{
                src:['src/*.js'],    //要合并的文件
                dest:'dest/<%= pkg.name %>.js'  //合成后的文件
            }
        },

        //minify js  压缩JS
        uglify:{
            options:{
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */' 
            },  //banner 就是在压缩后的文件开头生成一个标签，这里是名字+日期
            dist:{
                src:["<%= concat.dist.dest %>"],  //表示要压缩concat之后的文件
                dest:"dest/<%= pkg.name %>.min.js"  //压缩后的文件
            }
        },

        //单元测试的工具
        qunit:{
            files:["test/*.html"]
        },
        //js的语法检查
        jshint:{
            files:['Gruntfile.js', 'src/*.js', 'test/*.js'],
        },
        //实现监控的工具，开启后每次改动文件都会执行里面定义的任务
        watch:{
            files:['<%= jshint.files %>', '<%= qunit.files %>'],
            tasks:['jshint', 'qunit']
        }
    });

    //载入库，必须的 
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-qunit');

    // 默认任务，命令行输入'grunt'运行，分先后顺序
    grunt.registerTask('default', ['concat' ,'uglify']);

   // 自定义任务, 命令行输入 'grunt test' 运行，test就是自定义的名字
    grunt.registerTask('test', ['jshint', 'qunit', 'watch']);
};

配置完之后就可以在命令行输入 grunt 来运行了

更多查看grunt官网

3. 总结

其实就是写两个文件package.json, gruntfile.js