使用GruntJS链接与压缩多个JavaScript文件过程详解

在这里我将为你详细讲解如何使用GruntJS链接和压缩多个JavaScript文件。我们将顺序进行以下步骤：

1. 安装grunt-cli和grunt-contrib-concat，grunt-contrib-uglify插件。

在开始之前，我们需要先确保你的系统上安装了npm，它是整个Grunt工具链的基础。接下来，在终端中运行以下命令，安装grunt-cli和需要用到的两个插件：

npm install -g grunt-cli
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev

1. 创建Gruntfile.js文件。

在项目根目录下创建一个名为Gruntfile.js的文件。在这里我们将配置Grunt任务。

module.exports = function(grunt) {
  // Grunt configuration
};

1. 配置concat任务。

首先，我们来定义一个concat任务。这个任务用于将多个JavaScript文件连接成一个文件。

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/*.js'],
        dest: 'dist/js/script.js',
      },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
};

上述配置中，我们首先定义了concat任务，然后指定了一些选项。其中，我们将使用;作为各个文件连接的分隔符，也就是说，每个文件之间会加上一个;。接着，我们定义了一个输出文件dist/js/script.js。

这里的源码是src目录下所有.js文件，但您可以根据自己的需求修改。

1. 配置uglify任务。

现在，我们来定义另一个任务：uglify。这个任务用于压缩JavaScript文件。

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/*.js'],
        dest: 'dist/js/script.js',
      },
    },
    uglify: {
      options: {
        mangle: false,
        compress: false
      },
      target: {
        files: {
          'dist/js/script.min.js': ['dist/js/script.js']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
};

首先，注意到uglify任务中我们设置了mangle: false和compress: false，这意味着我们不会混淆或压缩代码。这里要提醒你的是，在实际项目中，最好开启压缩和混淆以尽量减小文件大小和优化代码性能。

接着，我们定义了一个输出文件dist/js/script.min.js，这个文件将成为我们压缩后的代码。

最后，我们指定压缩的源文件为上一步中的输出文件dist/js/script.js。

1. 注册Grunt任务。

已经完成了配置任务，现在我们将这些任务注册到Grunt中。

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/*.js'],
        dest: 'dist/js/script.js',
      },
    },
    uglify: {
      options: {
        mangle: false,
        compress: false
      },
      target: {
        files: {
          'dist/js/script.min.js': ['dist/js/script.js']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('default', ['concat', 'uglify']);
};

最后一步，我们注册一个名为default的Grunt任务，它的作用是将我们先前定义的concat和uglify任务一起运行。

1. 效果演示。

启动Grunt：

grunt

运行之后，在dist/js/目录下应该会生成两个新的文件：script.js和script.min.js。其中，script.min.js是压缩过的文件，您可以查看其中内容以确认是否压缩。

示例：

// 示例一
// src 文件夹下 有 a.js b.js c.js
// dist 文件夹下 有 js 文件夹

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      js: {
        options: {
          separator: ";",
        },
        files: {
          "dist/js/app.js": ["src/a.js", "src/b.js", "src/c.js"],
        },
      },
    },
    uglify: {
      js: {
        files: {
          "dist/js/app.min.js": ["dist/js/app.js"],
        },
      },
    },
  });

  grunt.loadNpmTasks("grunt-contrib-concat");
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.registerTask("default", ["concat", "uglify"]);
};


// 示例二
// src 文件夹下 有 a.js b.js c.js
// dist 文件夹下 有 js 文件夹

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      js: {
        options: {
          separator: ";",
        },
        files: [
          {
            src: ["src/a.js"],
            dest: "dist/js/a.js",
          },
          {
            src: ["src/b.js", "src/c.js"],
            dest: "dist/js/bundle.js",
          },
        ],
      },
    },
    uglify: {
      js: {
        files: [
          {
            src: ["dist/js/a.js"],
            dest: "dist/js/a.min.js",
          },
          {
            src: ["dist/js/bundle.js"],
            dest: "dist/js/bundle.min.js",
          },
        ],
      },
    },
  });

  grunt.loadNpmTasks("grunt-contrib-concat");
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.registerTask("default", ["concat", "uglify"]);
};

这就是使用GruntJS链接和压缩多个JavaScript文件的过程。希望这篇文章对你有所帮助！