grunt入门

grunt是一个优秀的前端的自动化生产工具，最开始作者一直不用这类工具，感觉麻烦，但是当后面项目大一些后开始尝试使用，就一发不可收拾，但是对于grunt的一些机制原理等，自己也是捣鼓了一些时间，今天就来总结一下自己的经验，希望对部分同学能有一些帮助。

---

1.grunt的用处

对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，代码合并等等，grunt可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你完成大部分无聊的工作

2.grunt的三要素

• task
• target
• options

先来简单解释一下这三个要素吧

1. task

这个就是grunt的任务，之前提过grunt是用来自动执行各种各样的任务的，比如压缩文件，合并文件，单元测试等等，这些都是一系列任务

2.target

这个是任务的目标，也就是任务具体做的事，例如有一个合并文件的任务，这个任务可以做两件具体的事:

• build1：合并a.css和b.css
• build2：合并a.css和c.css

每一个具体的事情就是一个target

3.options

从字面上就可以理解，这个就是配置。task或者target的配置，每个task有自己的配置，每个target也可以有自己的配置

---

开始做个Demo吧

咱们按顺序开始以下几步吧

• 装上node和git，然后新建一个文件夹
• 在文件夹的根目录中打开git 执行 npm init，会新建一个package.json文件，只需填写一下基本内容就好，在此不赘述了。
• 全局安装grunt命令行，执行 npm install -g grunt-cli，这样后面就可以用grunt命令来执行之前我们说的task和target了
• 安装grunt和四个插件，执行命令：

  • npm install grunt --save-dev 安装grunt

  • npm install grunt-contrib-uglify --save-dev 安装压缩插件
  • npm install grunt-contrib-watch --save-dev 安装监控文件变化插件
  • npm install grunt-contrib-cssmin --save-dev 安装css压缩插件
  • npm install grunt-contrib-csscomb --save-dev 安装css合并插件
• 新建一个Gruntfile.js文件，这个文件中主要写的对各个任务的配置，直接贴出一个简单的Gruntfile.js的文件内容吧

module.exports=function(grunt){
// 任务配置，所有插件的配置信息
grunt.initConfig({
    // watch插件配置信息,用于观察文件的变化
    watch:{
        build:{
            files:['src/js/*.js','src/css/*.css'],
            tasks:['jshint','uglify','cssmin','csscomb'],
            options:{spawn:false}
        }
    },
    // uglify插件配置信息，用于压缩文件
    uglify: {
      build: {
        files:{
            'build/js/yourName.min.js':['src/js/test.js']
        } 
      }
    },
    // cssmin插件配置信息，用于压缩css
    cssmin:{
        options: {
            shorthandCompacting: false,
            roundingPrecision: -1
        },
        build: {
            files: {
              'build/css/output.min.css': ['src/css/*.css']
            }
        }
    },
    // csscomb插件配置信息，用于合并css
    csscomb: {
        bulid: {
            files:{
                "src/dest/css/output.restored.css":["src/css/test.css"],
                "src/dest/css/output2.restored.css":["src/css/test2.css"]
            }
        }
    }
});
// 加载包含任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-csscomb');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify','cssmin','csscomb','watch']);
};

在上面的代码中，有watch，uglify，cssmin，csscomb四个task，每个task里面都有自己的options和target(uglify里没有options因为options并不是必须的，根据需求而定)

对于每个task的build target里都有files属性，files属性里主要是输入和输出文件,files中的输入输出文件有四种写法，在grunt中文官网有详细描述，这里我就不细说了。


对于每个task的options，不同插件有不同的配置方式，需要各位在使用对应的插件时，去grunt插件官网看看基本的配置方法和插件描述

• 在项目根目录打开git，如果直接执行grunt命令，则会执行组合的‘default’任务，也就是uglify ,cssmin,csscomb,watch四个task,如果需要执行指定的单个task，例如uglify，则执行命令grunt uglify，如果需要执行task的具体target，例如cssmin的build，则执行命令grunt cssmin:build

---

总结一下，grunt这个工具的目的其实就是让我们方便地使用各种插件来帮助我们进行开发，而它的工作机制其实就是：首先我们用node安装好了基本的环境后，需要用什么插件就node install 插件名称，然后在Gruntfile.js中配置这个插件task的options和target就行了，最后按需执行插件！

这篇其实算不上一个grunt的完整Demo，比如路径配置，files，特殊插件配置和更灵活的用法都没介绍，我也没打算做这样一个教程，因为也已经有不少优秀的grunt教程了，grunt中文网也有。不过单看教程并不能让我们更好地使用grunt，后面需要用到的其他插件需要去官网看看插件的基本配置和介绍，一些其他用法也都是需要去官网或者其它大牛博客看看的，我现在只是从理解grunt本身这方面来做的一个浅显的介绍，希望能帮助到部分同学，共勉！