npm 包 gulp-closure-compiler 使用教程

前言

对于前端开发者来说，一个好用的构建工具非常重要。其中一个经典的工具就是 gulp。gulp 可以让前端开发者更快速的完成构建工作，并保证构建的质量和稳定性。在 gulp 的插件中，gulp-closure-compiler 是一个非常有用的插件，本文将会介绍如何使用 gulp-closure-compiler 完成代码的压缩。

简介

gulp-closure-compiler 是一个通过 Google Closure Compiler 实现 JavaScript 代码的压缩的 gulp 插件。它可以通过对 JavaScript 代码的优化、压缩和混淆来实现代码的精简，从而加速代码执行速度，减小文件大小。

安装

在使用 gulp-closure-compiler 插件之前，需要先安装 gulp 和 gulp-closure-compiler。首先确保已经安装了 Node.js 和 npm，然后在命令行中输入以下命令安装 gulp 和 gulp-closure-compiler：

npm install gulp
npm install gulp-closure-compiler

使用

基础用法

首先创建一个 gulpfile.js 文件，然后在其中引入 gulp 和 gulp-closure-compiler：

const gulp = require('gulp');
const closure = require('gulp-closure-compiler');

接着定义一个简单的任务来压缩代码：

gulp.task('minify', () => {
  return gulp.src('src/*.js')
    .pipe(closure({
      compilerPath: 'node_modules/google-closure-compiler/compiler.jar',
      fileName: 'build.min.js'
    }))
    .pipe(gulp.dest('dist/'));
});

这个任务会选择 src 文件夹下的所有 JavaScript 文件，使用 Google Closure Compiler 对代码进行压缩，并将压缩后的文件输出到 dist 文件夹下，文件名为 build.min.js。

配置选项

gulp-closure-compiler 支持多个配置选项，下面是一些比较有用的选项：

• compilerPath：Google Closure Compiler.jar 文件路径
• fileName：输出文件名称
• compilationLevel：指定代码压缩等级，可选值为 SIMPLE、ADVANCED 和 WHITESPACE_ONLY，默认为 SIMPLE。
• warningLevel：指定编译器的警告等级，可选值为 DEFAULT 和 QUIET。
• languageIn：指定编译器处理的JavaScript 代码的版本。支持 ECMASCRIPT3、ECMASCRIPT5 和 ECMASCRIPT6，默认为 ECMASCRIPT5。
• languageOut：指定编译器输出的 JavaScript 代码的版本。支持 ECMASCRIPT3、ECMASCRIPT5 和 ECMASCRIPT6，默认为 ECMASCRIPT5。

示例

以以下 JavaScript 代码为例：

function hello(name) {
  console.log('Hello ' + name + '!');
}

首先安装 gulp 和 gulp-closure-compiler：

npm install gulp --save-dev
npm install gulp-closure-compiler --save-dev

然后在项目根目录下创建 gulpfile.js 文件，然后添加以下代码：

-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ---------------------------------

------------------- -- -- -
  ------ --------------------
    ---------------
      ------------- ----------------------------------------------------
      --------- --------------
    ---
    --------------------------
---

在命令行中输入以下命令来执行任务：

gulp minify

成功执行后，dist 文件夹下将会生成一个 build.min.js 文件。打开它，可以看到代码被压缩后的结果：

function hello(a){console.log("Hello "+a+"!")}

这就是通过 gulp-closure-compiler 对 JavaScript 代码进行压缩的例子。

总结

本文介绍了如何在 gulp 中使用 gulp-closure-compiler 对 JavaScript 代码进行压缩。通过使用 gulp-closure-compiler 可以让开发者充分利用 Google Closure Compiler 的优势，加快 JavaScript 代码的执行速度，提高页面性能，是前端开发工程师的一种有效工具。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162444