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 是任务名称。

而后咱们能够看到看到项目根目录下会自动生成一个 dist 目录，指定的 JS 文件成功被压缩到了这个目录下的 js 文件夹中。