Grunt

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

Posted by Silence on May 22, 2017

简介

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,并写入以下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
      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. grunt-contrib-uglify (混淆并压缩js文件)

    • 安装

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

    • 配置task
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    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 (压缩css)

    • 安装

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

    • 配置task
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
        grunt.initConfig({
            target: {
                files: {
                  'output.css': ['foo.css', 'bar.css']
                }
            }
        })
    
        grunt.loadNpmTasks('grunt-contrib-cssmin');
    
  3. grunt-contrib-clean (清除文件和目录,一般用来清除上一次编译生成的文件)

    • 安装

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

    • 配置task
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    grunt.initConfig({
        clean: {
            build: {
                src: ['path/to/dir/one', 'path/to/dir/two']
            }
        }
    });
    
    grunt.loadNpmTasks('grunt-contrib-clean');
    
  4. grunt-contrib-watch (监听文件的变化,并自动执行任务)

    • 安装

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

    • 配置task
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    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 (开启一个服务器,使我们可以通过 ip:端口号 的方式访问目录下的资源)

    • 安装

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

    • 配置task
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    grunt.initConfig({
        connect: {
            server: {
                options: {
                    port: 9001,
                    base: 'www-root'
                }
            }
          }
    });
    
    grunt.loadNpmTasks('grunt-contrib-connect');
    
  6. grunt-contrib-less (将less编译为css)

    • 安装

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

    • 配置task
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    grunt.initConfig({
        development: {
            files: {
                'path/to/result.css': 'path/to/source.less'
            }
        }
    });
    
    grunt.loadNpmTasks('grunt-contrib-less');
    
  7. grunt-contrib-coffee (将coffeescript编译成javascript)

    • 安装

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

    • 配置task
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    grunt.initConfig({
        development: {
            files: {
                'path/to/result.js': 'path/to/source.coffee'
            }
        }
    });
    
    grunt.loadNpmTasks('grunt-contrib-coffee');