高性能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']);

    };