npm 包 taskkit-uglify 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对 JavaScript 代码进行压缩，以减小文件体积，提高页面加载速度。其中，UglifyJS 是一款广受欢迎的 JavaScript 压缩工具。而 taskkit-uglify 是一个基于 UglifyJS 的 npm 包，可以方便地在项目中集成 JavaScript 压缩任务。

本文将介绍如何使用 taskkit-uglify 进行 JavaScript 压缩，并讲解一些常见的使用场景和注意事项。

安装

安装 taskkit-uglify 可以通过 npm 进行安装：

npm install taskkit-uglify --save-dev

基本用法

taskkit-uglify 可以作为 taskkit 插件来使用。taskkit 是一个任务运行器，可以将各种编译器、压缩工具、本地服务器、测试器等组合成任务集合，自动运行任务。

在使用 taskkit-uglify 之前，需要先安装 taskkit：

npm install taskkit --global

然后创建一个 task.js 文件，并在其中引入 taskkit 和 taskkit-uglify：

var taskkit = require('taskkit');
var uglify = require('taskkit-uglify');

在 task.js 中定义压缩任务：

taskkit.task('uglify', function() {
  return taskkit.src('src/*.js')
    .pipe(uglify())
    .pipe(taskkit.dest('dist'));
});

在上面的代码中，我们定义了一个 uglify 任务，用于压缩 src 目录下的所有 JavaScript 文件，输出到 dist 目录下。这里我们使用了 taskkit 的 src 和 dest 方法，pipe 方法将两者串起来，中间插入 uglify，来实现按顺序执行的任务。

最后，在命令行中运行 taskkit uglify 命令，即可运行 uglify 任务。

gulp 集成

除了作为 taskkit 插件进行使用，taskkit-uglify 也可以通过 gulp 进行集成。

首先，安装 gulp 和 gulp-uglify：

npm install gulp gulp-uglify --save-dev

然后，创建一个 gulpfile.js 文件，并引入 gulp 和 gulp-uglify：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

在 gulpfile.js 中定义压缩任务：

gulp.task('uglify', function() {
  return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

在上面的代码中，我们定义了一个 uglify 任务，用于压缩 src 目录下的所有 JavaScript 文件，输出到 dist 目录下。这里我们使用了 gulp 的 src 和 dest 方法，pipe 方法将两者串起来，中间插入 uglify，来实现按顺序执行的任务。

最后，在命令行中运行 gulp uglify 命令，即可运行 uglify 任务。

高级用法

taskkit-uglify 还提供了许多高级用法，可以满足更多的压缩需求。下面介绍一些常见的用法。

压缩选项

可以通过传递一些参数来配置 taskkit-uglify 的压缩选项。例如：

uglify({
  compress: {
    unused: true,
    dead_code: true
  }
})

在上面的代码中，我们启用了 unused 和 dead_code 选项来压缩未使用的代码和死代码（即永远不会执行的代码）。

更多压缩选项可以参考 UglifyJS 文档。

混淆变量名

可以通过 mangle 选项来对变量名进行混淆。例如：

uglify({
  mangle: true
})

在上面的代码中，我们启用了 mangle 选项来混淆所有变量名。如果需要排除某些变量名，可以将 mangle 设置为一个对象，并设置 except 属性。例如：

uglify({
  mangle: {
    except: ['$', 'exports', 'require']
  }
})

在上面的代码中，我们排除了 $、exports 和 require 这些变量名。

保留特定函数名

可以通过 keep_fnames 选项来保留特定的函数名。例如：

uglify({
  keep_fnames: true
})

在上面的代码中，我们启用了 keep_fnames 选项来保留所有函数名。

如果需要排除某些函数名，可以将 keep_fnames 设置为一个函数，返回 true 或 false。例如：

uglify({
  keep_fnames: function(node, name) {
    return name.startsWith('my_');
  }
})

在上面的代码中，我们保留了所有以 my_ 开头的函数名。

排除文件

可以通过 ignore 选项来排除某些文件不被压缩。例如：

uglify({
  ignore: ['**/*.min.js', 'test.js']
})

在上面的代码中，我们排除了所有已经压缩的 JavaScript 文件和 test.js 文件。

定义全局变量

可以通过 global 选项来定义一些全局变量。例如：

uglify({
  global: {
    $: 'jquery',
    angular: true,
    Backbone: false
  }
})

在上面的代码中，我们定义了 $ 为 jquery，angular 为 true，Backbone 为 false。

调试输出

可以通过 output 选项来输出调试信息。例如：

uglify({
  output: {
    comments: true
  }
})

在上面的代码中，我们输出了调试信息中的所有注释。

更多选项可以参考 UglifyJS 文档。

总结

taskkit-uglify 是一个非常方便的 JavaScript 压缩工具，可以方便地集成到 gulp 或 taskkit 中，满足不同的需求。在使用 taskkit-uglify 时，可以通过传递一些参数来自定义压缩选项，例如启用某些选项、排除某些文件、定义全局变量等。希望本文对你有所帮助，也欢迎大家在评论区留言，分享自己的经验和想法。

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

npm 包 taskkit-uglify 使用教程

安装