最近在调试项目时, 发现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转es5gulp-babel
插件
npm install --save-dev gulp-babel
npm install --save-dev babel-preset-es2015 //es6转es5