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

    };