使用Gulp压缩JS

1. 1. 前言
2. 2. 正文
   1. 2.1. 安装插件
   2. 2.2. 配置gulp
   3. 2.3. 运行代码
   4. 2.4. 效果对比
   5. 2.5. 补充
3. 3. 后记

前言

上篇文章介绍了使用gulp压缩css的方法，不更新压缩js的方法，总感觉少点什么。这篇文章将介绍使用Gulp来压缩js。

正文

在这，安装nodejs和初始化项目就不介绍了。

安装插件

压缩css时我们用的gulp-clean-css，压缩js时，特别是含有es6语法，我们用的是gulp-terser。
首先，在终端输入以下命令：

npm i gulp gulp-terser

配置gulp

在项目根目录下新建gulpfile.js，编写以下内容：

const gulp=require("gulp")
const terser=require("gulp-terser")
function minJs(){
  return gulp.src("js/*.js") // js文件位置
  .pipe(terser({
    compress:{
      drop_console:true, // 是否清除代码中控制台输出
      passes:2,
    },
    output:{
      comments:false, // 是否保留注释
    }
  }))
  .pipe(gulp.dest("dist")) // 指定输出目录
}

exports.minJs = minJs

运行代码

在终端命令行，输入以下命令：

npx gulp minJs

大概会看到如下结果：

这时候，我们就会发现dist目录中出现了压缩好的文件。

效果对比

压缩前：

压缩后：

通过对比，发现压缩了有1.22kb。代码少可能压缩效果不明显，我本地也没有很大的js文件

补充

gulp-terser这个插件支持es6语法，但不会说把es6转换成es5来支持低版本浏览器。需要转换的话，还要用到babel这个插件，感兴趣的小伙伴可以下去自行探索。

后记

以上就是本文全部内容，欢迎评论区讨论.