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出错时可能会提示


gulp-uglify插件最新pump使用教程_第1张图片
这里写图片描述

而使用了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转es5gulp-babel插件

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

你可能感兴趣的:(gulp-uglify插件最新pump使用教程)