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

//git输入指令
npm install pump

2. 安装压缩js插件

npm install --save-dev gulp-uglify

3. 配置文件

//转换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转es5

gulp-babel

插件

npm install --save-dev gulp-babel
npm install --save-dev babel-preset-es2015 //es6转es5