关于gulp:Gulp-使用gulp压缩JS

10次阅读

共计 811 个字符，预计需要花费 3 分钟才能阅读完成。

本节咱们学习如何应用 gulp 压缩 JS，在理论我的项目中，如果 JS 文件太大，那么可能导致页面加载变慢。所以咱们能够将这些 JS 文件进行压缩。咱们除了能够抉择应用各种工具手动来进行压缩，还能够通过 gulp 来实现 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 文件中编写代码，首先同样是利用 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 文件夹中。

正文完