Gulp 使用gulp压缩JS

本节我们学习如何使用 gulp 压缩 JS，在实际项目中，如果 JS 文件太大，那么可能导致页面加载变慢。所以我们可以将这些 JS 文件进行压缩。我们除了可以选择使用各种工具手动来进行压缩，还可以通过 gulp 来实现 JS 文件的压缩。

压缩JS文件

使用 gulp 来压缩 JS 文件，需要用到一个 gulp-uglify 插件，下面我们一起来看一下，要如何压缩 JS 文件。

例如我们要实现的工作是压缩 js 目录下的所有 .js 文件，将这些 JS 文件压缩到 dist 目录下的 js 文件夹中。

安装插件

首先我们需要安装 gulp-uglify 插件，打开命令行工具，或者直接在 VSCode 中打开终端。然后进入到 gulpfile.js 文件所在的目录下，如果你的项目中还没有这个文件，则需要创建这个文件哟，因为 gulp 的所有配置代码都写在 gulpfile.js 文件。。

如下图所示，在命令行工具中执行安装 gulp-uglify 插件的命令：

npm install gulp-uglify

在这里插入图片描述

在gulpfile.js文件中编写代码

插件安装成功后，我们就可以在 gulpfile.js 文件中编写代码，首先同样是应用 gulp 模块：

// 获取 gulp
var gulp = require('gulp')

然后获取 uglify 模块：

var uglify = require('gulp-uglify')

接着就可以通过 task() 方法创建压缩任务：

gulp.task('script', function() {
    // 找到要压缩的js文件
    gulp.src('js/*.js')
    // 压缩文件
        .pipe(uglify())
    // 将压缩后的文件存到只指定目录
        .pipe(gulp.dest('dist/js'))
})

执行压缩命令

然后我们可以命令行工具中，执行 gulp script 命令，其中 script 是任务名称。

image
然后我们可以看到看到项目根目录下会自动生成一个 dist 目录，指定的 JS 文件成功被压缩到了这个目录下的 js 文件夹中。

链接：https://www.9xkd.com/