Grunt 杂记

简介

Grunt是一个基于NodeJS，可用于自动化构建、测试、生成文档的项目管理工具。

Grunt 能做什么

Grunt可以自动化我们的整个开发流程，简单地说，就是用JavaScript去执行一些程序来完成一些任务。比如说将css、Javascript、图像等资源压缩；将Sass和Less通过预处理器编译成Css；将Coffeescript、Typescript等转化为Javascript；实时监听文件的变化，并执行自动编译任务；

在Grunt工具箱中，按任务目标我们可以分为：

• 编译文档型：比如编译LESS、Sass、Stylus、Coffeescript等；
• 文件操作型：比如说合并、压缩JavaScript、CSS、图片等；
• 质量保障型：比如JSHint、Jasmin、Mocha等；
• 类库构建型：比如说Backbone.js、ember.js、angular.js等。

这些任务都依赖于给Grunt提供的插件来完成的，但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

开始使用

Grunt的使用非常简单，仅需下载相应的命令行工具，针对不同的任务下载不同的插件，即可完成整个自动化过程。

• 将grunt-cli（grunt命令行工具）作为全局模块安装

  $ npm install -g grunt-cli

• 通过npm初始化，为我们生成一份package.json文件

  $ mkdir grunt-app && cd grunt-app $ npm init

• 为项目安装grunt作为依赖

  $ npm install –save-dev grunt

  至此grunt已经安装完毕，但它还没有特殊的功能，要使用grunt的各种功能，需要建一份Gruntfile.js文件，并为之安装相应的插件。

• 新建Gruntfile.js，并写入以下内容

  module.exports = function(grunt) {
  
    // 之后所有的配置都是配在传递给grunt.initConfig这个方法的对象中
    grunt.initConfig({
      // 将package.json文件作为一个json对象读入
      pkg: grunt.file.readJSON('package.json'),
    });
  
    // 加载grunt的插件，这里的 grunt-contrib-uglify 是一个例子
    grunt.loadNpmTasks('grunt-contrib-uglify');
  
    // 注册一个grunt任务，第一个参数为任务的名字，当任务的名字default时，通过grunt运行项目时，会默认执行该任务；第二个参数是一个数组，是后续所要执行任务名字的集合。
    grunt.registerTask('default', ['uglify']);
  };
  

安装grunt插件

在安装grunt插件时，需要考虑自己需要哪些功能，下面罗列出开发中需要的大部分功能。并举个简单的例子，详细用法可参考 [Gruntjs][1]。

1. [grunt-contrib-uglify][2] （混淆并压缩js文件）

   • 安装

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

   • 配置task

   grunt.initConfig({
       uglify: {
           my_target: {
             files: {
               'dest/output.min.js': ['src/input1.js', 'src/input2.js']
             }
           }
       }
   });
   
   grunt.loadNpmTasks('grunt-contrib-uglify');
   

 2. [grunt-contrib-cssmin][3] （压缩css）

    * 安装
    > $ npm install grunt-contrib-cssmin --save-dev

    * 配置task

        ```
        grunt.initConfig({
            target: {
                files: {
                  'output.css': ['foo.css', 'bar.css']
                }
            }
        })

        grunt.loadNpmTasks('grunt-contrib-cssmin');
        ```

 3. [grunt-contrib-clean][4] （清除文件和目录，一般用来清除上一次编译生成的文件）

    * 安装
        > $ npm install grunt-contrib-clean --save-dev

    * 配置task
    ```
    grunt.initConfig({
        clean: {
            build: {
                src: ['path/to/dir/one', 'path/to/dir/two']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    ```
 4. [grunt-contrib-watch][5] （监听文件的变化，并自动执行任务）

    * 安装
        > $ npm install grunt-contrib-watch --save-dev

    * 配置task
    ```
    grunt.initConfig({
        watch: {
            scripts: {
                files: ['**/*.coffee'],
                // 监听到文件变化后执行的task
                tasks: ['coffee'],
                options: {
                    spawn: false,
                },
            },
            css: {
                files: '**/*.sass',
                tasks: ['sass'],
                options: {
                    livereload: true,
                },
            },
        },
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    ```

 5. [grunt-contrib-connect][6] （开启一个服务器，使我们可以通过 `ip:端口号` 的方式访问目录下的资源）

    * 安装
        > $ npm install grunt-contrib-connect --save-dev

    * 配置task
    ```
    grunt.initConfig({
        connect: {
            server: {
                options: {
                    port: 9001,
                    base: 'www-root'
                }
            }
          }
    });

    grunt.loadNpmTasks('grunt-contrib-connect');
    ```


 6. [grunt-contrib-less][7] （将less编译为css）

    * 安装
        > $ npm install grunt-contrib-less --save-dev

    * 配置task
    ```
    grunt.initConfig({
        development: {
            files: {
                'path/to/result.css': 'path/to/source.less'
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    ```

 7. [grunt-contrib-coffee][8] （将coffeescript编译成javascript）

    * 安装
        > $ npm install grunt-contrib-coffee --save-dev

    * 配置task
    ```
    grunt.initConfig({
        development: {
            files: {
                'path/to/result.js': 'path/to/source.coffee'
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-coffee');
    ```

  [1]: https://github.com/gruntjs "Gruntjs的github链接"
  [2]: https://github.com/gruntjs/grunt-contrib-uglify "grunt uglify"
  [3]: https://github.com/gruntjs/grunt-contrib-cssmin "grunt cssmin"
  [4]: https://github.com/gruntjs/grunt-contrib-clean "grunt clean"
  [5]: https://github.com/gruntjs/grunt-contrib-watch "grunt watch"
  [6]: https://github.com/gruntjs/grunt-contrib-connect "grunt connect"
  [7]: https://github.com/gruntjs/grunt-contrib-less "grunt less"
  [8]: https://github.com/gruntjs/grunt-contrib-coffee "grunt coffeescript"