使用gulp（基于流的自动化构建工具）实现前端打包踩坑

分享下我最近使用gulp（基于流的自动化构建工具）打包踩过的坑：

说多了都是泪，直接来撸问题：

很显然是gulp-label问题，经过最终定位发现是版本不兼容问题：

"gulp": "^4.0.2",
"gulp-cli": "^2.2.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",
"gulp-changed": "^4.0.1",
"gulp-clean": "^0.4.0",
"gulp-imagemin": "^6.1.0",
"gulp-mini-css": "0.0.3",
"gulp-uglify": "^3.0.2",
"pump": "^3.0.0"

以上是正常运行是的包，当把gulp-label@7换成gulp-label@8时，则出现以上BUG（注意：当前我打包的JS文件包含子文件夹，如果不包含则一切又正常）

结论：JS打包时如果包含子文件夹，可能会由于插件不兼容性导致以上问题。

分享下我的gulpfile.js文件：

var gulp     = require('gulp'),
    uglify   = require('gulp-uglify'),//压缩文件
    mincss   = require('gulp-mini-css'),//css压缩文件
    imagemin = require('gulp-imagemin'),//图片压缩文件
    babel    = require('gulp-babel'),//支持ES6语法
    clean    = require('gulp-clean'),
    pump     = require('pump');

gulp.task('compressJs', function(cb){
    gulp.src('./public/js/**/*.js')
    .pipe(babel())//将ES6代码转译为可执行的JS代码
    .pipe(uglify())
    .pipe(gulp.dest('./release/js'));
});

gulp.task('compressCss', async function(){
    gulp.src('./public/css/*')
    .pipe(mincss())
    .pipe(gulp.dest('./release/css'));
});

gulp.task('compressImage', async function(){
    gulp.src('./public/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./release/images'));
});

gulp.task('clean', function(cb) {
    pump([
        gulp.src('./release', {allowEmpty: true}),
        clean()
    ], cb)
})
gulp.task('default', gulp.series('clean', gulp.parallel('compressJs', 'compressCss', 'compressImage')));

新增.babelrc文件，兼容ES6语法

{
  "presets": ["env"]
}