接下來是個人的理解：

壓縮js

1、node安裝，node會自動安裝npm。

 安裝完之後檢視版本：node -v 和 npm -v

2、新建專案後package.json 安裝。

命令：npm init（直接一直回車，輸入yes之後回車資料夾下就會出現package.json ）
注意出錯：name不能包含大寫字母。
name: (reactJsCssPak2) reactJsCssPak
Sorry, name can no longer contain capital letters.

//package.json
{
  "name": "reactpak",
  "version"
 
: "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3、安裝grunt命令列工具grunt-cli。

  命令： npm install -g grunt-cli
  安裝完之後檢視版本：grunt -version

4、安裝grunt及其外掛。

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev  （  js語法檢查）
npm install grunt-contrib-uglify --save-dev  （  壓縮，採用UglifyJS）
npm install grunt-contrib-concat --save-dev （ 合併檔案）
或
npm install grunt grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-concat --save-dev
 

//安裝的時候node_modules出現，而且也出現這四個目錄，之後package.json也會顯示這四個目錄（那是因為在安裝外掛的時候加了"--save-dev"）。 
{
  "name": "reactpak",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies"
 
: {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^2.3.0"
  }
}

5、新建檔案Gruntfile.js

新建一個js，裡面包含a.js和b.js ，再新建Gruntfile.js。目錄如下：

//a.js
function a() {
    console.log("aaa")
}
//b.js
function b() {
    console.log("bbb")
}

第一種測試：我只想壓縮

//Gruntfile.js
module.exports = function(grunt) {
  // 配置
  grunt.initConfig({
      pkg : grunt.file.readJSON('package.json'),
      uglify : {
          options : {
              banner : '\n'
          },
          build : {
              src : 'js/*.js',
              dest : 'dest/dest.min.js'
          }
      }
  });
  // 載入uglify外掛，壓縮
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 註冊任務
  grunt.registerTask('default', ['uglify']);
}; 

//dest.min.js
function a(){console.log("aaa")}function b(){console.log("bbb")}

總結：單個js直接壓縮，多個js直接合並壓縮。

第二種測試：合併與壓縮

//Gruntfile.js
module.exports = function(grunt) {
  // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            domop : {
                src: ['js/a.js', 'js/b.js'],
                dest: 'desttwo/desttwo.js'
            }
        },
        uglify : {
            options : {
                banner : '\n'
            },
            build : {
                src : 'desttwo/desttwo.js',
                dest : 'desttwo/desttwo.min.js'
            }
        }
    });
    // 載入concat和uglify外掛，分別對於合併和壓縮
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 註冊任務
    grunt.registerTask('default', ['concat', 'uglify']);
}; 

//desttwo.js
function a() {
    console.log("aaa")
}

function b() {
    console.log("bbb")
}


//desttwo.min.js
function a(){console.log("aaa")}function b(){console.log("bbb")}

總結：這個過程是先合併再壓縮，出現兩個js檔案。

第三種測試：我想把所有的js單獨壓縮

//Gruntfile.js
module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        uglify : {
            options : {
                banner : '\n'
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相對路徑
                        cwd: 'js/',
                        src: '*.js',
                        dest: 'destthree/js/',
                        rename: function (dest, src) {
                            var folder = src.substring(0, src.lastIndexOf('/'));
                            var filename = src.substring(src.lastIndexOf('/'), src.length);
                            //  var filename=src;
                            filename = filename.substring(0, filename.lastIndexOf('.'));
                            var fileresult=dest + folder + filename + '.min.js';
                            grunt.log.writeln("現處理檔案："+src+"  處理後文件："+fileresult);
                            return fileresult;
                            //return  filename + '.min.js';
                        }
                    }
                ]
            }
        }
    });
    // 載入concat和uglify外掛，分別對於合併和壓縮
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 註冊任務
    grunt.registerTask('default', ['uglify']);
}; 

//a.min.js
function a(){console.log("aaa")}
//b.min.js
function b(){console.log("bbb")}