高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP视频流媒体网页无插件直播服务器EasyDSS之什么是Grunt？

这两天公司让研究js压缩，去掉js中的备注和空格，网上看了一些技术方案，都需要js代码合并，而我们并不想把js代码合并成一个js。所以就看到了grunt的配置压缩，下面我们直接来看过程吧。

什么是Grunt？

Grunt是前端的Mavan，它是JavaScript世界的内置工具。简而言之，就是运行在Node.js上面的任务管理器（task runner），其可以在任何语言和项目中自动化指定的任务。我们可通过npm来安装Grunt和Grunt插件。

Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作，比如：

Minification
Compilation
Unit testing
Linting and more

Grunt使用简介

1.命令安装

为了要使用Grunt，需要全局安装Grunt的命令行接口CLI（Command Line Interface)。如果是在Linux、mac上运行，需要用管理员权限运行命令窗口或是使用sudo。

npm install -g grunt-cli

2.grunt依赖

一个基本的Nodejs项目，根目录包含package.json文件，如：

    {
      "name": "my-project-name",
      "version": "0.1.0",
      "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-jshint": "~0.10.0",
        "grunt-contrib-nodeunit": "~0.4.1",
        "grunt-contrib-uglify": "~0.5.0"
      }
    }

接下来运行 npm i

或者通过以下命令安装

    // --save-dev 意思是将依赖放入devDependencies中
    npm install grunt --save-dev

    npm install grunt-contrib-jshint --save-dev

    npm install grunt-contrib-nodeunit --save-dev

    npm install grunt-contrib-nodeunit --save-dev

3.Gruntfile配置

在项目根目录中创建Gruntfile.js，示列如：

module.exports = function(grunt) {

  // Grunt配置
  grunt.initConfig({
    //获取package配置
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
       // 配置日志输入标识
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        // 配置源文件目录
        src: 'src/<%= pkg.name %>.js',
        // 压缩后目标目录
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载js压缩插件
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 注册默认执行任务
  grunt.registerTask('default', ['uglify']);

};

4.Grunt运行

根目录打开命令窗口，运行如下命令

    grunt

执行后的效果就是讲src目录里的js文件压缩输出到dest目录中

5.监听文件目录

很多情况下，我们在编码的时候，希望可以自动将更改部署到目标目录。这时候我们可以使用：

    npm i grunt-contrib-watch --save-dev

修改Gruntfile.js

      module.exports = function(grunt) {

      // Grunt配置
      grunt.initConfig({
        //获取package配置
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
           // 配置日志输入标识
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          build: {
           // 配置源文件目录
            src: 'src/<%= pkg.name %>.js',
            // 压缩后目标目录
            dest: 'build/<%= pkg.name %>.min.js'
          }
        },
        //监视
        watch: {
            scripts: {
                //监听目录src下的所有js文件
                files: ['src/*.js'],
                //只要文件有变动就执行uglify任务
                tasks: ['uglify'],
                options: {
                    spawn: false,
                },
            }
        }
      });

      // 加载js压缩插件
      grunt.loadNpmTasks('grunt-contrib-uglify');

      // 注册默认执行任务
      grunt.registerTask('default', ['uglify','watch']);

    };