gulp-uglify插件最新pump使用教程

最近在调试项目时, 发现gulp-uglify原来的使用方式会报错, 因此在这里特别说明一下新版本的使用教程.
本篇博客的最后修订时间为2017/6/14.

pump

使用不了最新版本的gulp-uglify, 主要是因为这个pump, 之前的版本一直是使用pipe( ), 先简单介绍一下pump.

pump简介

pump是一个小节点模块,将流连接在一起,如果其中一个关闭,则会将它们全部破坏。当dest发出关闭或错误时,使用标准source.pipe(dest)事件源将不会被销毁。 您还不能提供回调来告诉管道何时完成。

为什么我们使用pump

当使用Node.js流中的管道时,错误不会通过管道流传播,如果目标流关闭,则源流不会关闭。 泵模块将这些问题规范化,并在回调中传递错误。

总结

…其实说白了就是pump可以使我们更容易找到代码出错位置.

当我们使用pipe出错时可能会提示
这里写图片描述

而使用了pump会提示
这里写图片描述


使用教程

前期安装gulp我就不再多讲, 本篇博客只叙述压缩插件的使用, 不会安装的可以查看我的这篇博客:
前端构建工具gulp超详细配置, 使用教程(图文)

1. 安装pump

1
2
//git输入指令
npm install pump

2. 安装压缩js插件

1
npm install --save-dev gulp-uglify

3. 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//转换js并压缩文件
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
var babel = require('gulp-babel');
gulp.task('js', function(cb){
pump([
gulp.src('./src/js/*.js'),
babel({presets: ['es2015']}),
//2017年6月14日测试, 发现使用es6的let语句定义变量会发生错误, 如果发生错误把第4步的gulp-babel两个插件安上, 并写上上面的语句
uglify(),//压缩操作
gulp.dest('./dist/js')
],
cb//函数有参数
);
});

4. es6转es5gulp-babel插件

1
2
npm install --save-dev gulp-babel
npm install --save-dev babel-preset-es2015 //es6转es5
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!